IT workers using the M365 Admin Center often have to work through stepped flows that can feel arduous and overwhelming. I wanted to design a Wizard pattern flow that gave the user a clear understanding of the scope of their task and what steps they needed to take to complete that task.
In the process of designing the Wizard, I worked to align all UI elements to the M365 design system, and define the step by step patterns to ensure a consistent experience across our product. I also worked with our partner teams make sure our wizard design accommodated all edge case scenarios.
A vertical list was chosen over a horizontal list to accommodate varying number of steps and text length.
12px spacing between text and dot was chosen. 10px was too little, and 14px looked like too much.
The blue/blue combination solid colors was chosen. Green was reserved for “completion” states.
8px sub step circle size was chosen to differentiate from main steps.
A linear style of sub step lines was chosen as it was the most visibly silent way to display sub steps.
48px for main steps and 32px for sub steps was chosen to help differentiate between the two.
Dot progress from step one to completion.
I decided to release two versions of the wizard pattern: Full-page and Panel. The full-page version offers a more immersive experience for long stepped flows. It also allows for a secondary detail panel to populate.
The Panel wizard on the other hand works well for quicker, lighter weight work flow where it is important to retain context of the page behind the wizard.
“I must say though, this
wizard is really cool.
Love what you are doing here!”
Gareth G. – Feedback from user study