HP Design system is used by 70+ internal product teams to build product prototypes. The goal is to use the design system to create consistent experience across products, enhance brand identity, and streamline the development process. In this project, I created input stepper component to provide a consistent design experience for product teams.
My Role
UI Designer
Timeline
1 month
Collaboration
1 PM, 2 Engineer, 4 UI Designer
Status
Shipped
PROBLEM
There is no component support increasing/decreasing numeric value in current design system.
Current situation:
Some product team design their own input steppers, leading to inconsistency and increased development cost.
Some product teams use native steppers, where the small buttons might cause usability problems.
How might we design an input stepper that ensure usability, accessibility, and consistency across products?
Competitive Analysis
Understanding the trend and best practices in creating input stepper
Research 5 design systems
I first created mobile version that incorporated invoice/estimate, payment, financial visualization and client management, targeting to accommodating the core needs.
By providing focus indicator to increase action visibility and usability for users.
Providing informative feedback and visual cues to let user understand the valid value range and unexpected situation.
Design Decisions
Identify core functionality ——
Trailing or both side buttons?
Buttons on both side is a more popular design pattern, while trailing buttons would fit in with more use cases, and is more suitable for input stepper customization. Ultimately, I prioritized future update over popular design trend to support product team customization, and provide flexibility to product team for more use cases.
Trailing buttons
Both side buttons
Disable or not disable buttons when reach valid range margin?
Disable buttons can provide straightforward feedback for users, while keep buttons always enabled and provide an hint to indicate the valid range is more align with our current design system guideline. Therefore, I prioritized input stepper that not disable buttons.
Disable controller
Not disable controller
With or without focus ring?
Having focus ring is able to to provide clearer distinct between buttons and input field. However, the utility button in our current design system does not support focus ring. In order to keep input stepper consistent with other components and ensure scalability. I prioritized the input stepper without focus ring.
With focus ring
Without focus ring
Interaction Design
Providing accessible experience ——
Design for hint states
I first designed hint states to provide informative feedback to users, helping them understand the valid range for a specific input.
Design for error states
I designed error state to provide actionable information that allows users to fix errors correctly. It gives users correction cues within the error message.
Impact
Provides unified design across HP's products, decreases maintenance cost, and increase accessibility for end user.
Takeaways
Consistent design
I learned about the importance of having consistent design, where each component within the design system will work together seamlessly to create a cohesive user experience. Consistency ensures that users can easily navigate and interact with the system, reducing learning curves and increasing efficiency.
Balancing between functionality & scalability
I understand the importance of strategic planning in design and development. It's critical finding the right balance between introducing advanced features and ensuring the system is sustainable and easy to maintain.
