Update Learn Gitlab progress bar
What does this MR do and why?
TL;DR: Convert linear Learn Gitlab progress bar to circular.
Learn GitLab is our main product onboarding tool intended to help new users get started. For Trial signups, Learn GitLab is the first page they land on after signup and thus an opportune place for us to drive valuable behaviours during the trial period.
The new design proposal is based on best practices and competitive analysis. In the current implementation, we aren't showing the tasks in a meaningful way and the progress bar feels disconnected from them.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
Before | After |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
How to set up and validate locally
- Setup gdk to simulate SaaS - https://docs.gitlab.com/ee/development/ee_features.html#simulate-a-saas-instance and restart GDK
- Visit
/users/sign_up
. Submit the form. - On welcome page select
Just me
andCreate a new project
. - Submit the form.
- Enter group and project name. Finish registration.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #427793 (closed)