Updating Registration Page

UI Design | Wireframing
Registration page on laptop and mobile

The Request

In this request, I was asked to collaborate with project managers to shorten the number of fields on our registration page, modernize the look and feel, and make the layout more mobile-friendly. Additionally, we tackled some changes to label and section names and verified if removed fields were simply removed or moved to another part of the customer's journey.

Primary Goal: Modernize the look & feel, decrease number of fields, and ensure requested changes aligned with best practices

Tools: Figma, Hotjar, pencil & paper

Compatability: Desktop & Mobile

Wireframe

early wireframe of registration page

The Label

By moving the label from a left-side label to a top label, we decreased back-and-forth eye movement across the page.

gif of label moving from placeholder to top label as user types

Password Tooltip

In response to customer data and feedback, we added a tooltip that explained to customers what criteria needed to be met when making a password and validated as they typed.

Dynamic tooltip expressing when password requirements are met as the user types

Mobile View

Mobile view of registration page
registration page
Utilizing Typography to Improve UX Previous
Adding Allow Overspending Feature Next