# UX Design Standards · UX-01

## Standard Metadata

- Area: UX
- Owner: Frontend Steering group
- Last reviewed: 2026-09-09
- Next review due from: 2026-12-01
- Enforcement: Code review
- Status: Active

## Reuse Proven UI Patterns · UX-01.1 · **MUST** · **DEV**

Use widely adopted UI patterns for common flows such as sign-up, login, password reset, onboarding, etc.
Avoid novelty in routine interactions unless it’s tied to product differentiation. Leveraging existing UX patterns reduces user learning curves and speeds up delivery.
Reference aggregators like [Mobbin](https://mobbin.com/) or [PageFlows](https://pageflows.com/) for examples.

    ✓ Use centred forms, clear buttons, and familiar field layouts.
    ✓ Reference competitor flows where users already feel comfortable.
    
## Set UX Goals Explicitly · UX-01.2 · **MUST** · **DEV**

Define a clear, outcome-focused goal for every user flow. Avoid focusing on UI components in isolation.
Reframe goals as questions to guide better UX decisions.

    ✗ "Build a sign-up form with two text fields and a button."
    ✓ "How can we make sign-up as fast and error-proof as possible?"
    
This practice ensures the design stays focused on real outcomes like conversion or task completion.

## Optimize for Edge Cases · UX-01.3 · **MUST** · **DEV**

Anticipate user errors and distractions. Build defences and guidance into the UI at both field and flow levels.

    ✓ Provide instant feedback on errors (e.g. mismatched passwords).
    ✓ Confirm input accuracy before submission (e.g. "confirm email").
    ✓ Display clear error messages: "We couldn't save your changes", not "500 Internal Server Error".
    
Good UX accounts for the 80% happy path and the 20% that causes real frustration.

## Use Established Layout & Interaction Conventions · UX-01.4 · **MUST** · **DEV**

Stick to UI conventions users already know.

    ✓ Logo top-left
    ✓ Primary CTA bottom-right or centred
    ✓ Forms in vertical layout with visible labels
    ✓ Responsive design for all viewports
    
Avoid design award aesthetics that compromise usability. Favour familiarity and clarity over originality unless deliberately differentiating.

## Keep Visual Design Simple · UX-01.5 · **SHOULD** · **DEV**

Use a restrained palette: one primary, one secondary, and one accent colour. Avoid visual noise.
Use tools like [Coolors](https://coolors.co/) for consistent colour schemes.

    ✓ Use consistent button styles across the app.
    ✓ Avoid gradients, excessive shadows, or non-functional animations.
    
Simple visuals reduce user distraction and improve focus.

## Prioritize Clarity in Language · UX-01.6 · **MUST** · **DEV**

Use language familiar to your audience. Avoid technical jargon or developer-oriented messages.

    ✗ "Validation error: token mismatch"
    ✓ "You’ve been logged out. Please sign in again."
    
Write content as if explaining to a non-technical friend. Error states especially should offer solutions, not confusion.

## Learn from Adjacent Domains · UX-01.7 · **SHOULD** · **DEV**

When designing new or uncommon flows (e.g. collecting sensitive data), look at adjacent industries:

    ✓ Study mortgage, tax, and legal apps for patterns around trust and risk.
    ✓ Identify how these platforms build credibility and reduce anxiety.
    
Use this insight to design flows that are clear, empathetic, and trustworthy.

## Leverage AI for UX Testing · UX-01.8 · **SHOULD** · **DEV/TEST**

Use AI tools like ChatGPT for usability feedback. Simulate user perspectives to reveal blind spots.
Example prompts:

    ✓ "Critique this sign-up flow: where could users get stuck?"
    ✓ "Act like a distracted user—what's confusing in this screen?"
    ✓ "How do top SaaS products design this flow?"
    
AI feedback isn’t final, but it helps prioritize areas for further testing or validation.

## Choose Metrics That Matter · UX-01.9 · **MUST** · **DEV**

Define clear success metrics per flow: conversions, drop-off rate, completion time, or task success.

    ✓ Track user behaviour via tools like Amplitude or Hotjar.
    ✓ Use metrics to challenge assumptions and identify improvement areas.
    
Measuring UX makes quality tangible, allowing for iteration based on real-world feedback.

## Follow Jakob's Law · UX-01.10 · **SHOULD** · **DEV**

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

Follow [Jakob's Law](https://lawsofux.com/jakobs-law/) by defaulting to use what already works. Innovate only on your core differentiators.

    ✓ Use standard flows to train users via familiarity.
    ✓ Focus your innovation where it enhances value, not on aesthetics.
    
Efficient UX is about speed, clarity, and impact—not novelty.