Brewing your experience, please wait!
Stepper is a tabular navigation component that helps users visualize and interact with a multi-step process.
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 www.servicenow.com.
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.
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.
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
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.
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.
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
