Design: In-product MR Survey

As part of &6141 (closed) we need to design the widget that will be used to present and collect survey responses inside the merge request.

Design considerations

• Location: The survey should not affect the layout or cover important elements. That means it will likely be shown at the bottom or bottom right corners of the screen. That said, we need to ensure it does not blend too much with the rest of the UI (e.g. the sidebar).
• Emphasis: If there’s color and/or a transition, it may help people see it, regardless of where it’s located.
• Consistency: Try to follow an existing UI pattern. The most similar is the notification broadcast message (example).
• Other dialogs: Consider behavior when there are other dialogs, like broadcast messages.

Proposal

• ▶️ Figma prototype
• 📐 Figma specs
• See explorations in the designs below 👇

Details

1. Show conditions:
   1. If the instance is GitLab.com (SaaS).
   2. If the user is logged-in.
   3. If Snowplow is not blocked by the browser. The browser may be using an ad-blocker or sending the “Do Not Track” signal.
   4. If the user has not dismissed this survey in the last 90 days.
   5. If no notification broadcast message (example) was visible on page load. For example, if I close a notification broadcast message, the survey would only appear on reload/when visiting another MR. This is because the proposal has a similar design and placement to notification broadcast messages.
   6. If 10 seconds have passed after page load. This is to avoid asking users about their satisfaction immediately after the MR page is loaded.
   7. If the user has only answered the first question (overall satisfaction), keep showing the second question (speed/performance) until they answer it or dismiss the survey.
2. Dismissal: When the survey is completed or the user dismisses it (clicks the X button), the survey doesn't appear again to that user for the next 90 days (that should be possible using UserCallout).
3. Animations:
   1. The survey moves in from the bottom of the screen (just like a toast), as seen in the prototype: ease-in 200ms This helps make it noticeable and less jarring.
   2. Dismissing (click the X button) or moving between steps doesn't have any animation.
   3. The final “thanks” step fades out after 5 seconds (just like a toast).
4. Legal disclaimer: Links to https://about.gitlab.com/privacy/
5. Questions:
   1. Overall, how satisfied are you with merge requests?
   2. How satisfied are you with the speed/performance of merge requests?
6. Data automatically collected (see technical details):
   1. MR days: Number of days in the last 30 days that the user visited an MR page.
      1. This is already collected today through Snowplow.
   2. Paid plan: Whether the user is a member of 1+ paid group(s) or not.
      1. This is also already collected.
   3. Account age: Number of days since user's account creation.
      1. This is not collected today, but will be once the survey is implemented.