[UX] Add guided walkthrough to the pipeline editor during MR widget CI onboarding
UX issue, related to #334657 (closed)
Problem
Currently, we guide users through steps on the pipeline editor with content in a sidebar.
These sidebar instructions are better than nothing, but we hypothesize that having steps there mixed in with the docs is not the best. It'd be better to take the user directly to where they can perform the action in the UI and move on, so using popover prompts would be more effective in quickly getting the user to commit and run their first pipeline.
Experiment Idea
We believe that in-context guidance inside the pipeline editor during the MR widget Verify onboarding will increase % of users creating at least 2 pipelines compared to the current pipeline editor experience.
To verify that, we will test a variant of an MR widget Verify onboarding with in-context guidance inside the pipeline editor against the current experience.
And we’ll measure the impact on % of people who click on the widget CTA and create at least 2 pipelines.
Design
Current experience
- Click on the CTA in the MR widget
- Land in the pipeline editor with the on-boarding instructions by default open in the sidebar
| Current Verify onboarding in the pipeline editor |
|---|
 |
Proposed Experiment
Instead of opening the sidebar by default and asking the user to read through all that text, we keep it closed, and use a popover prompt to get users to commit their first pipeline.
- Baseline: The pipeline editor sidebar with onboarding steps is expanded on load (it's the current experience).
- Variant: We don't expand the sidebar on load, and show a popover guiding the user to commit. Clicking on the CTA button in the popover should auto-scroll to the commit form at the bottom of the screen.
Design Files
| Baseline | Variant |
|---|---|
 |
 |
Measures of Success
- Increase in % of users creating at least 2 pipelines