Discovery

Evaluate the current design

I delved into the implementation of the wizard component and here are my key findings:

1. Inconsistency in Navigation: Across various projects, I noticed a lack of consistency in the navigation approach, particularly regarding exit and save options. This incongruity might lead to confusion among users, impacting their overall experience.

2. Unclear Progress Indicators: During my assessment, I observed that the progress indicators lacked clear differentiations, leaving users uncertain about the consequences if they decide to navigate back to previous steps. A more distinct and informative progress indicator would enhance user understanding and confidence.

3. Responsive Design Challenges: When examining cases with secondary and tertiary steps, the responsive design seemed unclear and could be improved. Ensuring a seamless and intuitive experience across all devices is crucial for user satisfaction.

By addressing these discoveries, we can refine the wizard component, providing users with a more cohesive, transparent, and user-friendly journey through the processes.

Research

Understand the purpose of wizard and set design principles

Prior to delving into the design process, I conducted comprehensive competitive research to explore the realm of best practices, design principles, and previous researches. Here are the key findings that strongly resonate with our specific use cases.

• Clarity and Simplicity: Keep the wizard's interface simple and uncluttered. Use clear and concise language for instructions and labels, ensuring users understand the purpose of each step without confusion.

• Progress Visibility: Provide a prominent and easily understandable progress indicator that shows users where they are in the process and how many steps are left to complete.

• Consistency: Maintain consistency in the design and layout of each step, ensuring a cohesive experience throughout the wizard.

• Flexibility: Allow users to move forward and backward through the steps, enabling them to review or change their inputs as needed.

• Responsiveness: Ensure the wizard is mobile-friendly and adapts to different screen sizes, as users may access it from various devices.

• Save and Resume: If applicable, provide a "Save and Resume" feature, enabling users to come back to the wizard later and continue from where they left off.

A/B testing for 2 current designs

We ran a quick A/B test with 10 contributors on Usertesting. Option B was the winner with the buttons clear present upfront.

Final design

A clear wizard component empowers users to navigate complex processes or tasks with ease and confidence

After several iterations and discussions with designer and engineers, here is the final design and details

Wizard final design

Step

Wizard navigation final design

Responsive design

When the screen width is 1279 px or less, the wizard enters a collapsed view, displaying only the tile and current step. If the current step is secondary or tertiary, it will be presented in breadcrumb format. In this collapsed view, the steps are not clickable. Users can click an expand icon button to view the full wizard with all the steps.

Variants

Here are all the variants, including responsive design and different status for the steps.

Accessibility

Landmarkers

Wizard should be labeled as complementary.

Labeling elements

Components contained within the wizard, such as buttons, should be labeled according to the guidelines specific to those components.

Development and delivery

The development took 1 month to complete. During the development, the developer helped uncovered some of the scenario I did account for and I adjusted the design accordingly.

Impacts

6 design teams, more than 7 products, and over 100 users including designer and developers will adopt to this new component that is provided by Story Design system.