Design review: (self-hosted) sign-in page

Overview

Hello team 👋

I'd like to share with you the design proposal for the self-hosted sign-in page. Please keep in mind that this is rather a low-fidelity prototype, not a final prototype yet.

Why redesigning this page?

• Provide better user experience of the onboarding journey (after installation)
• Use similar visual language with .com
• Align with the latest design system (https://design.gitlab.com/)

Design process

Since it's our first async design review, I'd like to share with you my design process. I've mapped out my own design process and shared with Geo team, you can check this out if you're interested in the design process gitlab-org/geo-team/discussions#4946 (closed)

Current design

Self-hosted	.com

Design proposal (changes to self-hosted)

Thanks to @kcomoli's earlier work gitlab-org/growth/ui-ux#8, I could come up with the current proposal.

• Figma Design

Type A	Type B

Type A

• Center-aligned forms without marketing copies.
• Users can put their logos and messages on top of the forms.

Type B

• Keep marketing copies on the left-hand side.
• Users can customize the left-page with messages/images.
• Users can put their logos on top of the forms.

Changes and thought

• Rearranged menu in the footer: Add forum, terms, and privacy
  • To reduce complexity on the page, I put those text links (on the .com sign-in) to the footer.
• Removed the sign-up or registration part
  • As the .com already has separate sign-up and sign-in page, it makes more sense to make them align. (Users can disable the sign-up page.)
• Added show/hide password toggle icon button
  • I thought it's better to have this button to improve usability for the password field.

Next steps

• More crafting work 🎨 after the design review and adding visuals (color, illustration...)
• Open a design critique session with the wider UX team
• Get feedback from stakeholders
• Deliver and implement the design

I appreciate your feedback and thoughts on this design 🙂