Progress Tracker Component.

Defining a scalable progress tracking system for multi-step financial journeys.

The Challenge.

Nationwide had several competing progress tracker designs in circulation, each created in isolation for different journeys.

This fragmentation created:

Inconsistent user expectations,
Uneven guidance through critical tasks,
Increased design and engineering overhead,
Risk in high-stakes journeys where abandonment or confusion has a real business impact.

While working on the design system team, I was tasked with defining a single, scalable progress tracking solution that could safely support a wide range of journeys and be reused consistently across the organisation.

Strategy & Design.

Progress trackers are not purely decorative in regulated financial journeys.

They:

Set expectations around effort and time,
Reduce drop-off by clarifying progress,
Build trust during sensitive data entry,
Influence completion rates.

The goal was to define:

When a progress tracker should be used?
How much prominence it should have?
What constraints prevent misuse?
How it adapts to different journey lengths and devices?

Two Variants, Clear Rules:

To support different journey needs while preventing overuse, I defined two explicit variants, each with clear usage guidance.

High-Prominence Progress Tracker.

This variant is designed to guide users through complex, multi-step tasks such as applications or onboarding flows.

Design Intent:

Provide clear orientation at a glance,
Reinforce progress without competing with primary actions,
Reduce anxiety during longer tasks.

Component Structure:

The tracker consists of two complementary elements:

1. Visual progress bar

A linear progression of up to six steps,
Completed steps shown in blue,
Current step highlighted in action blue,
Future steps shown in light grey.

The bar is deliberately medium-to-low in visual prominence. It provides reassurance and orientation without distracting from the primary task.

2. Contextual label

Clearly states the current step,
Shows how many steps remain,
Names the journey section (e.g. “Income”).

This label complements page titles and ensures users understand both where they are and what they’re doing.

Constraints and Governance:

Through testing and layout evaluation, I defined a hard constraint of six steps for this variant. Beyond this point, the tracker becomes visually dense and harder to parse, especially on mobile.

For journeys exceeding six steps, I worked with product owners and content designers to establish two system-level options:

Simplify or merge steps,
Break the journey into multiple smaller tasks.

This ensured the component guided better journey design, rather than legitimising overly complex flows.

Low-Prominence Progress Tracker.

For shorter applications where a full progress bar would be excessive, I defined a simplified variant.

Design Intent:

Maintain orientation without visual noise,
Support quick, low-effort journeys.

Component Structure:

A single contextual label indicating:

Current step,
Total remaining steps.

This variant complements page titles and avoids introducing unnecessary UI weight.

Accessibility & Consistency.

Both variants were designed with accessibility as a core constraint:

Clear text labels for screen readers
Logical reading order
Predictable placement across journeys

By encoding these behaviours into the system, accessibility and consistency scaled automatically with reuse.

The Solution:

The final system delivered:

A single, governed progress tracking pattern,
Clear guidance on when and how to use each variant,
Reduced inconsistency across journeys,
Improved user orientation during complex tasks.

Outcomes & impact:

Reduced abandonment in multi-step journeys,
Fewer usability issues caused by unclear progress,
Faster design and delivery through reuse,
Improved trust and confidence during sensitive user flows.

View Prototype