Brewing your experience, please wait!
Design Systems

Designing a Dynamic Stepper UI Component for Multi-Step Processes

1 Month
work type

Creating a Dynamic and Responsive Tabular Navigation Experience


Stepper is a tabular navigation component that helps users visualize and interact with a multi-step process.

ServiceNow, Inc.

ServiceNow is a cloud-based platform company that helps organizations digitize and unify processes to improve workflows for employees and customers. They offer solutions for agile and innovative process management. Learn more at


To design a Stepper UI component that is flexible and scalable, allowing for varying numbers of steps and label lengths, while still providing a clear and intuitive navigation experience for users on multiple devices.

Users & Audience

Target Users: Users interacting with multi-step processes that require clear and intuitive navigation. Audience: Developers and designers creating user interfaces for multi-step processes on various devices and teams, who want to use a standardized and dynamic Stepper UI component for their projects.

Roles & Responsibilities

Designing and developing a flexible and scalable Stepper UI component with various variations / Collaborating with senior designers to align with company standards / Presenting and communicating the design solution to stakeholders / Iterating design and documenting guidelines and best practices for use

Scope & Constraints

Project Scope: Design and documentation of a dynamic Stepper UI component that helps users visualize and interact with multi-step processes and can adapt to various use cases. Constraints: Varying numbers of steps and label lengths, and varying device sizes which can affect the way the component should react and be displayed.

Outcomes & Lessons

Project Outcomes: - A dynamic Stepper UI component that can adapt to various use cases and improve navigation for users - A formula for determining number of steps displayed for different label lengths and number of steps - Widespread adoption and standardization of the component Lessons Learned: - Importance of flexibility and scalability in component design - Need to consider different device sizes for navigation - Importance of creating a logical formula for responding to size changes - The need to gain momentum and adoption to increase usage and impact - Consideration of accessibility guidelines and standards.

Before After
coming soon.
Light Mode Dark Mode
coming soon.

Project Process



Understanding the accessibility need and user problem related to color blindness and difficulty in understanding charts



Investigating existing data visualization color palette



Exploring and prototyping different pattern options as a replacement for color



Iterating on the design and testing for technical feasibility



Documenting Implementation for the final chosen pattern into the pattern library

For more about the design process, please contact me separately.


Makiko Kanzaki (Review)
Sr. Staff UX Designer, Design Systems @ ServiceNow, Inc.
Wade Fong (Review)
Design Principal, Design Systems @ ServiceNow, Inc.
Hans Sichart (Review)
Design Principal, Design Systems @ ServiceNow, Inc.
Andrea Perry (Review)
Sr. Manager, Design Systems @ ServiceNow, Inc.
Tony Baek
UX/UI Design Intern, Design Systems @ ServiceNow, Inc.
Thank you.
Tony Baek's signature
Tony Baek's signature
About me

Execution is my mantra.
I design ideas into reality. 🤘

view my story
Contact Me

Let's grab a simple cup of coffee or tea. ☕️

project contact
personal contact
academic contact
Where I am now