Design a unified input field component that scales across all products
Overview
Create a unified user input solution so the team doesn't reinvent the wheel
As Click's product pipeline grew, we started to experience inconsistencies in UI components across different projects. The input field is one of them.
I led the research and design of the component to unify the UX of user input, making it more scalable and accessible.
The new input field now served as one of the core components of our design system.
High level view of Click's Design System development process
Design Audit
Review existing instances of input fields and identify common patterns and pain points
Inconsistent input field UX across projects needed to be streamlined
State indications are not accessible to users with color blindness
The legacy input solely use color to indicate the component state.
The old underline style field was not easy to focus on
With the blur test, we found the box style field has a clearer visual hierarchy for discoverability.
Design System Research
Study other established design systems to understand the best practices for input fields
Google's Material Design
AWS Cloudscape
IBM Carbon
Iterations & Experiments
Iterate through various micro decisions and criteria to find the best solution
Evaluate how well does different states and feedback work when combined
Other than design critique, we also consulted with the developers to get their opinion
Solving the accessibility issue around the error state
Documentation
Document the specs and props for the finalized input field component
Create the anatomy of the input field component and specify the details
A complete collection of every state and feedback
Showcase how the component inherit the spacing tokens
Implement accessibility features to ensure all components are accessible
Product Development Impact
Plug-and-play input field component that accelerated new project launches
Implemented in our pilot project: CT-102 Substance Abuse, this component became the design system foundation for rapid product development.
Teams can now launch new therapeutic apps with consistent, tested UI patterns instead of rebuilding inputs from scratch.
The new input field used in the pilot CT-102 Substance Abuse project
My Takeaway
• Accessibility benefits everyone. An accessible design components has great contrast and hierarchy.
• Design tokens are powerful enablers. They make it easy to create a consistent product experience.
• Iterative testing is essential. Now that we have tools like Storybook, we can easily preview and test the component in different states and scenarios.