Login Flow Redesign
Project Type
Audit | Redesign | Prototype
Role
Product Design Intern
Overview
As a Product Design intern, my first project was to evaluate and redesign the client's existing login flow. The experience supported three distinct authentication methods but suffered from inconsistent visual design, poor error feedback, and confusing navigation; which created unnecessary friction for users trying to access the product.
This case study documents the problems identified in the original design and the decisions made to resolve them in the redesigned flow.
The name and overlay of the page have been blurred out for non-disclosure reasons.
The Original Flow & Identified Problems
The existing login experience had three authentication methods:
Email passcode: A one-time code was sent to the user's email address.
Email and password: Traditional credential login, which also served as the only entry point for account creation.
Google SSO: Single sign-on via a connected Google account.
The original flow had several notable usability and design issues across all three methods:
Layout & Presentation
The login overlay was anchored to the top-left corner of the screen, styled to resemble a dropdown menu rather than a focused modal. This reduced visual prominence and did not signal that it was a primary task.
Inconsistent Visual Design
The email passcode flow used inconsistent typography: after entering an email address, the prompt to enter the passcode appeared in a noticeably different font, breaking visual continuity.
The Google SSO button was visually mismatched with the other two login options, lacking consistent sizing, spacing, or style treatment.
Account Creation Discoverability
The option to create an account was only exposed within the email-and-password flow. Users navigating the passcode or SSO methods had no visibility into account creation, making the feature easy to miss.
Feedback & Error States
When an incorrect passcode was entered, the error message displayed "Invalid email/password", a message that referred to the wrong authentication method and would confuse users who had not set a password.
Upon successful login, there was no confirmation state or visual feedback, leaving users uncertain whether the action had completed.
The Redesign
The redesign addressed each identified problem with targeted design decisions, while keeping the overall experience simple and intuitive.
Modal Placement & Focus
The login interface was converted to a centered overlay modal that dims the background content. This draws the user's attention directly to the task, signals its importance, and reduces visual noise.
Structure & Hierarchy
A clear title and supporting subheader were added to orient the user and provide contextual guidance without overloading the interface.
All three login options are now consistently spaced and visually aligned. Input fields are wider and uniformly sized across methods.
Error States
Error states now use red typography and exclamation mark icons to clearly communicate when something has gone wrong. Error messages are specific to the authentication method in use, eliminating the misleading "invalid email/password" copy for the passcode flow.
Account Creation Visibility
The account creation prompt is now present across all screens in the login flow, not hidden behind a single method. Users can discover and access account registration regardless of which authentication path they begin.
Outcome
The redesigned login flow resolves the core usability issues present in the original: inconsistent visual design, misleading error feedback, and limited discoverability of key features. By centralizing the modal, standardizing component styles, and adding appropriate user feedback, the experience is clearer, more accessible, and better aligned with standard interaction patterns.
Before
After
