04
Case Study
Login
Redesign
A System Fix Disguised as a Small Update. I transformed a stalled, undefined feature into a polished, accessible system entry point.
- 15+ IAM error states mapped to specific, actionable messages — SSO-related support tickets dropped post-launch
- Progressive disclosure flow (Email → Auth Method detection → MFA) eliminated redundant fields and aligned with how SSO actually works
- First login surface built end-to-end on Shield Design System tokens — WCAG AA compliant for federal procurement requirements
The Context
A disconnected experience.
The login page is the "Front Door" of the company. It’s what customers see first. For years, the login page was a standalone piece of code that didn’t use the design system. It was inconsistent with the product it was letting people into.
The Risks:
- Trust gap: A dated, unbranded login page looks suspicious to security professionals (it resembles a phishing attempt).
- Functional failure: The page lacked clear error handling for SSO (Single Sign-On) failures, leading to high support ticket volume.
- Performance: Large, unoptimized background images caused slow load times on mobile connections.
The Solution
Structure, clarity, and integration.
01
System Integration
I brought the login page into the Design System. This meant using the same typography, shadows, and button components as the core product.
02
Error Taxonomy
I worked with the IAM (Identity and Access Management) engineers to map every potential failure state to a specific UI feedback. We moved from generic "Login Failed" messages to actionable help (e.g., "Your SSO session has expired. Please re-authenticate through your provider.").
03
Progressive Disclosure
The new design uses a two-step login flow:
Step 1: Identify the user (Email).
Step 2: Determine the authentication method (Password vs. SSO vs. MFA).
This reduced visual clutter and allowed for a faster path to the product for SSO users.
Implementation
Accessibility and Brand Alignment.
01
Accessibility First — The new login page was built to be fully keyboard-navigable and screen-reader compliant, meeting the strict requirements for federal agency users.
02
Updated Branding — Refreshed logos, product names, and alt text across all touchpoints, including invite emails and deep links.
03
Login Portal Dropdown — Added a portal selector in the Workforce Passwords UI to help admins understand which environment they are accessing.
Outcome and Impact
"This project transformed a stalled, undefined feature into a polished system entry point."
By addressing the underlying logic and system infrastructure instead of just the visual gloss, the redesign solved critical support load issues while re-establishing user trust from the very first interaction.