Case Study 02 · 2024

Password Validation

Authentication UX and frontend for real-time password validation — stricter security rules, clearer feedback, fewer errors at submit.

UX DESIGNFRONTENDAUTHENTICATIONREAL-TIME VALIDATIONMICROCOPYAPI INTEGRATION
My role: UX & Frontend
Product context: Authentication · Account security
Impact: Clearer rules, fewer errors at submit

Project overview

What this project was

I owned UX and frontend for a new password validation experience in an authentication product. The goal was to meet stronger security standards while keeping account creation and password updates simple and understandable.

Business goal

Adopt stricter password policy without increasing friction, abandonment, or support load during sign-up and password change.

Why it mattered

Late, post-submit validation frustrated users during high-intent moments — account creation and credential updates. Clearer in-flow feedback reduced failed saves and supported compliance with evolving security requirements.

The problem

Where it was breaking

User pain points

  • Users only discovered password problems after clicking Save.
  • Frustration during account creation and password updates.
  • Repeated form submissions and drop-off in authentication flows.
  • New rules (length, character mix, personal-info bans, password history) were hard to parse from a single error message.

Business challenges & constraints

  • Security policy became significantly stricter in a short window.
  • Rules had to be enforced consistently on client and server.
  • Personalised checks (name, email, last six passwords) required live backend validation.
  • Minimum 12 characters with upper, lower, numeric and special characters.
  • Passwords could not contain the user's name or email.
  • Passwords could not match any of the last six previously used passwords.
  • Validation had to stay accurate as users typed, not only on blur or submit.

My role

What I owned

UX Design
Frontend Development
Validation Flow Implementation
Collaboration with Backend Developers

Research & discovery

How I learned what mattered

  1. 01

    Discovery

    Reviewed existing change-password and sign-up flows to see where users failed and when errors appeared.

  2. 02

    Definition

    Broke complex policy into discrete, scannable rules users could track while typing.

  3. 03

    Design

    Prototyped checklist states, microcopy and success/error indicators below the password field.

  4. 04

    Build

    Shipped real-time UI connected to a backend validation endpoint so every rule updated as the user typed.

Challenges

Technical & UX hurdles

Complex, multi-part policy

Length, character classes, personal-info exclusions and password history had to be explained without overwhelming the form.

Server-dependent rules

History and personalised checks could not be solved on the client alone — the UI had to reflect API responses in real time.

Post-submit-only legacy behaviour

Moving validation earlier meant reworking when and how errors surfaced without fighting existing form patterns.

Match confirmation field

New and retyped passwords needed aligned, immediate feedback so users did not save mismatched values.

The solution

What I designed & shipped

Interactive requirement checklist

Listed each rule under the password field with plain-language microcopy instead of a single generic error on submit.

Visual status indicators

Each requirement showed success or failure instantly — users saw progress as they typed rather than guessing.

Real-time backend validation

Connected the UI to a validation endpoint so policy checks (including history and personal-info rules) stayed authoritative.

Show / hide password controls

Kept familiar show-password affordances on new and confirm fields so users could verify what they entered.

Confirm-field parity

Surfaced “passwords must match” as soon as retyped input diverged, alongside the main checklist.

Real-time checklist — each rule updates as the user types, with clear error and success states before Save.
All requirements met in-flow — users know the password will be accepted before submitting.

In action

Password Validation — feature walkthrough

A short walkthrough of the feature as shipped — the same flow described in this case study.

Results & impact

What changed after launch

Validation errors after submit

01

Clarity of password requirements

02

Confidence during authentication

03

Key learnings

What I'm taking forward

Lesson 01

Strict security rules are usable when each requirement is visible and updates in real time.

Lesson 02

Backend-backed validation is worth the integration cost for rules the client cannot infer.

Lesson 03

Microcopy and state indicators matter as much as regex for complex password policy.

Lesson 04

Moving validation before submit is one of the highest-leverage UX changes in authentication flows.