Update Learn GitLab Progress visualization

Context

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.

Ties to Q3 KR: https://gitlab.com/gitlab-com/gitlab-OKRs/-/work_items/3998

Current State

A linear progress bar makes a lot of sense if say you are going through a form and moving from screen to screen. You want to understand how much longer it will take and how many steps to get there.

Proposed change (Figma)

Drawing inspiration from Duolingo by gamifying the experience a little bit and the Zeigarnik effect, which shows that people are bothered by unfinished tasks.

This design works better for our purposes. The user is leaving to do tasks and coming back and they are not necessarily performed in order either, but the end goal is to finish them all. So having a circle makes more sense here. The user can work towards completing the circle in any order they choose. There's also more of a sense of completion with a circle, like there's an end point and it's all done. Lines can go on forever.

Humans usually don't like incomplete objects and want to have a conclusive ending. Going "full circle" provides that to the user visually. That's also why I added in color indicators and "X tasks to go" to show progress as well as success green and "You completed all tasks!" messaging when done. The user can visually see their accomplishments and feel good about them when they have achieved their ultimate goal.