[UX] Unify purchase flows in the Customers Portal for usability and scalability

Problem

Over time, we have not invested in the CDot purchase flows, leading to usability issues, scalability issues, and an inconsistent experience.

Usability issues

In https://gitlab.com/groups/gitlab-org/-/epics/9569, we moved all purchase flows from .com into CDot (see linked epic for reasoning), and this has resulted in a degradation in the user experience for the purchase flows.

The most recent UX scorecards for the purchase flows scored the now-defunct .com purchase flows at a B, but the CDot purchase flows (that we are using now) scored a C-.

Scalability issues

Additionally, the purchase flows in CDot use 12 different frontend components to handle the purchase experience. These components are based on the same core functionality, but they have all diverged.

This means that any changes we make to the purchase flows are inefficient and time-consuming, because the changes must happen individually for each of the purchase flows. This leads to an increase in product development time.

Proposal

Create a holistic vision for the CDot purchase flows that is optimized for usability and scalability. Ensure that the purchase flow framework can accommodate a variety of different product types and situations like first-order purchase, add-on purchases, and subscription modifications.

Design

See linked designs below. Figma files here.

Next steps (if any)

Edited by Lina Fowler