Improve first time experience for "merge request reviews"

Problem to solve

When we moved merge request reviews down to Core, there was a surge in comments from users not understanding the feature or how it is intended to work.

image

https://twitter.com/MarekBartik/status/1272439375910113282

image

https://mobile.twitter.com/DerHildebrand/status/1270851676560293888

image

https://twitter.com/Exadra37/status/1272677507041579010

Both users had trouble understanding the concept of what a review would be in this context, and why it would be the new default choice.

These problems also exist for GitHub, who have exactly the same UI the first time the user notices this feature. This GitHub user blog post “GitHub Reviews Gripes” summarizes the problems quite well.

image

https://twitter.com/search?q=github%20%22start%20a%20review%22&src=typed_query&f=live

image

https://twitter.com/mindplaydk/status/1179693004552097792

Proposal

Popup to communicate value

A lot of the recent user feedback for merge request reviews was not around the value of the feature itself, but instead about not understanding what a review would actually be. We could use the same flow that the Growth team built for the onboarding experience of pipelines where the feature first gets introduced with a popup, and then guides the user along a very simple first example.

Button text

The current button text of "Start a review" does not communicate to the user what is actually happening. In their mental model, a review is not a group of comments they write. There is a similar concept we have for suggestions where the user can add multiple suggestions at once, the button in that case says "Add suggestion to batch", which is more descriptive of what actually happens than "Start a review".

Primary button

According to https://gitlab.com/gitlab-com/Product/-/issues/536#note_318594411, 1.55% of merge requests on .com contain comments that were part of a review. Even considering the fact that this feature was only available for Silver/Premium customers so far, this number shows that reviews do not seem to be the default choice for users, so we should align our button styling to the actual user behavior.

Moving cancel button to the right

Having three buttons next to each other here can be overwhelming, so one small improvement would be to move the "Cancel" button to the side.

Screenshot

@pedroms I would love to get your take on the ideas here. I have combined all three into just one screenshot and made a super quick and rough example of the popup to communicate the value and push users into the flow, but I think we can evaluate each of them individually, as they don't seem to be dependent on each other.

image

Design

Figma: https://www.figma.com/file/lIoy9q6XHJ2NjgbYhf6LuK/Improve-first-time-experience-for-MR-reviews-222334

Edited by Pedro Moreira da Silva