Create a shared layout for the registration, the trial, and the in-app checkout flow.
Problem
As we introduced new registration, trial, in-app checkout flows, and conducted multiple experiments independently, these flows although similar, present some discrepancies and increases code complexity. This is an issue for both designers and engineers.
For designers
- No SSOT for design. We all use different files although we are working on the same flow. This increases the risk of introducing discrepancies that are carried in the implementation.
For engineers
- Each page have their layout, this repeat similar code and increases the overall codebase weight. This could be simplified.
What this looks like in the app
In-app checkout | Trial flow | Registration flow |
---|---|---|
![]() |
![]() |
![]() |
Container width: Fluid?, Layout:checkout | Container width: 960px, Layout:trial | Container width: 1115px, Layout:checkout |
For fixed width, which is recommended for forms, the width should be 990px
or 1280px
max.
Proposal
Create a shared and flexible layout to use for the registration, trial, and in-app checkout flow.
Before | After |
---|---|
![]() |
![]() |
Things to consider
- Growth experiments. We need a base that allows multiple combination of layouts as the growth team will be experimenting with the content within the trial and registration flow.
- Can we align the 2 column layout from the in-app checkout without altering the experience?
- Other considerations from the fulfillment side?
Next steps
-
Reach consensus. -
Create a layout based on our Layouts guidelines or create a new one. -
Add the layout in Figma and test it in the different flows. -
Review the design files and apply the shared layout on the trial, registration, and checkout Figma files.
Follow-ups
- Document the changes in Pajama. gitlab-org/gitlab-services/design.gitlab.com#928 (closed).
- Handover to engineering for implementation. #331003 (closed)
- Implement the boilerplate in the trial flow - #331155 (closed)
- Update the grid to use a Pajamas spacing - Issue to be created
🔎 Figma file
Edited by Kevin Comoli