Project
New Stepper Component
Timeline
4 weeks
Tools
Figma, Figjam, Google Suite
End-to-end design of a new stepper component to support complex form use cases, aligning with broader UX patterns and improving clarity through progressive disclosure.
Discovery: A Tool to Simplify Complexity
The Problem
Geotab’s design system lacks a consistent and reusable stepper component, leaving designers without the tools to clearly communicate complex workflows and end-users struggling with cluttered forms, unclear progress, and slower task completion.
Our Goal
Provide ideal product navigation for end-users by adding progressive disclosure tools to reduce cognitive load and improve the overall form experience.
Success Metrics
Increase form completion %
Decrease average form completion time
Decrease dropoff %
Market Analysis
I conducted a lightweight market analysis to move quickly and reduce risk within a tight timeline. Since I was new to the team and still building context and access to internal insights, I used external patterns to validate expectations, spot common pitfalls, and set a clear baseline before committing to design decisions.
I'm Looking For
Clear visual contrast through typography, colour, and position showing hierarchy
Mobile-first designs
Accessible and interactive navigation
Modern approaches to the component problem
Definition: User Stories + Context
I developed user stories through conversations with Designers, Engineers, and the PM. This built a clear understanding of user needs, which we translated into actionable insights and predictable behaviors we could design for.
Needs
Insights
Designers
Needs a reusable, flexible pattern to support complex patterns
Provide designers with the tools they need to create seamless and intuitive experiences
Needs to guide users through a multi-step experiences without clutter
Equip designers with a way to present content more concisely, particularly on mobile devices
Need sectioned content to make sure users don't get overwhelmed
Providing designers with a diverse toolkit, allows them to design more user-centric flows, so users can work with the designs, not against them
End-users
Need the ability to complete forms in as few scrolls and clicks as possible
Minimizing scrolls and clicks streamlines task completion, reduces user fatigue, and improves completion rates
Need ability to perform specific tasks efficiently without confusion
Displaying progress and next steps reassures end-users, provides context, and increases task completion rates
Need to avoid mistakes when inputting data across multiple related fields
Breaking large experiences like a form into digestible steps, reduces input fatigue and lowers error rates
TLDR;
Designers need a reusable pattern and a tool that provides guidance through a complex process to craft intuitive, accessible experiences
End-users need to perform tasks efficiently and clearly in order to reduce errors, user fatigue, and improve task completion
Development: Designing for Mobile and Desktop Differences
Mobile V1
Mobile Refined
The Key Changes
Removed different stages of steps
Streamlined the designs to their essentials
Added error state
Capped the amount of steps
Decided on identifying an optional state only with text
Desktop V1 vs. New Stepper
Issues
Scaling bug
Low readability and accessibility issues
Unnecessary step creation
Lack of error state
Improvements
Fully responsive
Streamlined step states
Error state and documented edge cases
Meets AAA accessibility
Delivery: Accessibility and Documentation
Sample Accessibility Considerations
Keyboard Controls
The stepper is fully keyboard-accessible, allowing users to navigate via primary navigation and secondary navigation. Focus behavior is consistent, supporting WCAG compliance and inclusive interaction.
Voiceover
The stepper supports screen readers with a clear voiceover order: step name, number, and optional label (left to right). On mobile, only the relevant step content is read. Button voiceover follows a logical order: primary → secondary → tertiary.
Documentation
Both mobile and desktop versions use a shared secondary navigation that meets WCAG guidelines. On mobile, the stepper is non-interactive and includes a clear label for steps completed. Keyboard navigation and screen reader output follow the same structure, keeping focus order, labels, and control hierarchy consistent and predictable.