Selected an existing component within our design system to explore and redesign
Project Overview
MY ROLE
During my time at The Pill Club, I worked on the redesign of the input field component within the company design system. I was responsible for conducting a competitive analysis, a UX review of our existing component, and created a high-fidelity interactive prototype using Figma based on my research findings.
Hypothesis
Making improvements to the input field component would benefit The Pill Club by optimizing scalability, improving time-efficiency, and providing a more consistent user experience.
- Input fields are a frequent touch point for new users.
- Forms that follow usability guidelines are twice as likely to be completed by the user with no errors on the first try.
- Components will decrease behavioral or stylistic defects, which ensures scalability.
Review of The Pill Club UX
I chose to work on input fields because it was a large project that I could learn a lot from and be able to impact the user experience across the interface. First, I reviewed the input field component that we had in our design system and made a list of pain points. Below are three use cases from the interface.
MY FINDINGS
The input fields in our current experience present a friction point for our users. From a visual design standpoint, the application of colors, typeface, and visual hierarchy could be further developed to improve usability and in turn enhance scannability and legibility of text content. From an interactive design standpoint, our input field component should display consistent features and incorporate best practices in terms of component anatomy and text placement to create a more intuitive experience for users.
Competitive Analysis
I identified a few direct and indirect competitors who displayed some different examples of input fields in their interfaces. I analyzed three companies in depth and noted a few key insights from the component.
NORDSTROM
- Open input field makes text more legible
- Once an input field is successfully completed, the fill color changes
ALL BIRDS
- Input fields are grouped with their labels
- Label typeface is clear and distinct from input text
WAYFAIR
- Floating label strategically utilizes space
- Placeholder shifts to label seamlessly
Design Exploration
After completing the competitive analysis and exploring a breadth of design options, I moved onto design exploration and experimented in Figma to map out all of the possibilities within the different input fields states. I broke them down into inactive to active and completed states. I was able to get some great feedback during this stage from designers and engineers to factor in constraints. I considered the time it would take to build out each option and what design solution could leverage existing product features.
Design Process
These are the elements included into the final design of the input field.
ANATOMY
VISUAL DESIGN
FUNCTIONAL DESIGN
Solution
This solution's aim is to make the input fields across the interface more accessible for users by altering the visual design and functional behavior of the different states.
Outcomes
The final design of the component in product as of (5/15/21) is displayed below. The features adopted from the design exploration and prototyping I conducted were the use of the purple active and completed border which was originally a gradient colored pink and orange border.
Takeaways
This project was a great opportunity to learn how to work closely with an engineer as the sole designer on a project. I was able to get the engineer’s input early in the design process and that was very helpful in guiding my vision for the redesign of the component. I was honored to see that some of the design suggestions I made were adopted into the interface. This was one of the three other projects I presented to stakeholders and company executives at the company all-hands meeting.
What I Learned
- Make sure to take time to speak with engineers to learn how to design within their constraints
- Analyze the different use cases and think about how the user may benefit from various design improvements
- Value the feedback from designers who aren't working on your project
→ I had the amazing opportunity to collect feedback throughout the design process for this project. I learned to ask targeted questions about my iterations, which guided my design direction.
→ For this project, I had to step into the users’ shoes and not only consider component design best practices. My competitor analysis was helpful, but I also had to deeply consider the smaller aspects of the component. I later realized that I would have to break down the component anatomy to fully understand how to improve accessibility and to design intentionally.
→ I waited until later in the design process to get feedback from senior designers, but I soon discovered that I would have benefitted from their feedback sooner. Their outside perspective was really important in making new discoveries that I never considered.
Thanks to my amazing team!
A special thanks to my team for supporting me through this process and giving me the space to explore and build out my own ideas. I appreciated them putting their trust in me to take on this project fully self-guided. It was an amazing opportunity to work with the Product Design team at the Pill Club. I was honored to play a role in supporting their mission to make Women's healthcare more accessible.