Progress indicator redesign

Built as a reusable pattern across the products

Context

VIU by HUB's current progress indicator was not built to scale, making it difficult to adopt across our white-label products. Customers have also reported difficulty navigating and understanding their progress through the quoting flow, which increases the drop-off rates.

With both user experience and revenue at stake, a thorough evaluation and redesign were needed.

Goals:

  1. Research and evaluation - Assess user feedback and discover the competitor’s progress indicator design.

  2. A complete redesign of the indicator, which includes the consideration of scalability in mobile devices and white-label products.

Role

Lead Designer

Timeline

1 week research

3 months redesign

2 mionths development


1. Research & discovery phase

The full research work was compiled in Figma and completed within one week. The competitor brands include: Lemonade, Zebra, Travelers, Geico, Progressive, Allstate, etc.

 
 

Considerations:

  1. Consider icon style, color, and illustration. Avoid complex designs that could cause style inconsistency throughout the flow.

  2. Consider the progress indicator’s interaction, whether it should be interactive or non-interactive.

  3. How might we avoid user frictions and confusion during the flow? Consider whether the interactive action is necessary.

  4. Ensure that the same design flow is used across all insurance products.

What to avoid:

  • Avoid using confusing or imprecise copy that misleads users' decisions or creates a negative impression.

  • Avoid using different design flows and indicators for different products; all products should provide a consistent experience to save users' learning time. This can also be a problem for the multi-branding design.

  • Avoid using too many elements in the progress bar as this can cause misalignment on mobile devices.

Key Research Takeaways

  • In general, horizontal designs are more commonly applied in the industry, typically divided into 4 to 5 steps.
  • In general, sub-sections are not directly displayed through the main indicator. Designers should consider incorporating design elements that can indicate the presence of sub-sections, so users are clear about their current position within the process.
  • Frequently using pop-up modals could interrupt users and prevent them from progressing to the next step in their workflow.
  • Icons are usually not involved in the progress indicator; the group [text + indicator(dots/line)] is the most common pattern.
 

2. Design exploration

Overview of proposed new progress indicator

After UX research and discussions with the team, we agreed to modify the current version and explore a new design. The new indicator should answer the current UX issues and enable the multi-brand design system for white-label products. Typography, color, spacing, and the various states of the indicators must be taken into consideration.

Additionally, several logical questions need to be explored beforehand:

e.g. Should we inform users about the remaining steps?

e.g. What would be the best experience for users when they want to go back?

 

Snippets of design options

I explored both interactive and non-interactive solutions. With the design and dev teams, we chose the non-interactive version — users already navigate via Back and Next, and clickable steps would add color complexity without a clear benefit. A progress bar handles movement within each step.

 
× Snippets of interactive design options

 

Iteration outcome

A non-interactive live progress indicator that can show the state of each step and the progress within each step.

Full width image
Full width image
 

3. The Solutions

Design changes and the rationales:

Design change 1: Add a sub-step progress bar to indicate the current status within each step

A sub-step progress bar is a common component and provides visibility into the progress. In current quote flow, users need to go through multiple steps before they reach to the next step. The sub-step indication can keep users always informed and reduce the abandon rate.

Design change 2: Replace the illustrations with the checkmark icon and numbers in the indicator

The current illustration is VIU by Hub branded, which will cause trouble if the flow is white-labeled to other brands. The component should be as brand-agnostic as possible, considering its scalability and consistency.

Using step number as an indication and when the step is completed turn it into a checkmark icon to differentiate other incompleted steps.

Design change 3: Change the current interactive action to non-interactive behavior

The current indicator allows users to navigate back to the previous step by selecting the "Back" button on the web page. On mobile, users must use the browser's back icon instead. This interactive behavior adds no extra value and may confuse users when navigating back and forth through the process.

Design change 4: Apply design tokens to the new progress indicator

Without confirming the function of each element, it is difficult to apply the correct design tokens, as there are separate tokens for non-interactive and interactive states. Now that we have decided to go with non-interactive behavior, the appropriate design tokens can be applied to the progress indicator.

Design change 5: Use high contrast color to differentiate current, completed, and incomplete steps

Ensure that the color contrast meets WCAG AA standards, with particular attention to disabled indicators, making sure they remain visible even in a disabled state.

4. Final outcome

Anatomy (color, typography, component status)

 

Applying design tokens to white labels

Applying VIU by HUB token colors to the component

Applying token colors to white label partners Honda and Valon.

 

Mobile and Desktop breakpoints

 

 5. The impacts

Impact & Result

↓ Complaints

User Satisfaction

Long-standing usability pain point resolved post-launch

3 Brands

White-label Adoption

Deployed across VIU, Honda, and Valon without modification

WCAG AA

Accessibility Standard

High contrast met across all component states 💖

My highlights

Throughout this redesign, I had full ownership of the project — from initial research and strategic thinking to cross-functional collaboration and final design delivery. Here is a breakdown of the highlights:

  • Strategic thinking — The redesign is connected to real business goals and user outcomes, not just visual changes.

  • Systems thinking — The component was designed for reusability, scalability, and long-term maintainability within a design system. Without putting all of these into consideration, the design ecosystem would be inconsistent.

  • Quantified impact — Outcomes are expressed in measurable results, such as reduced complaints and increased website traffic.

  • Cross-functional collaboration — Key decisions, such as removing interactive behavior, were made in alignment with product and development teams.

  • Accessibility as a standard — WCAG AA compliance was treated as a non-negotiable requirement, not an optional enhancement.

  • Considered trade-offs — Interactive navigation was evaluated and deliberately removed to reduce cognitive load and avoid redundancy with existing browser behavior.

 

Thanks for reading!