The Problem
Users often struggle to find hair care products that cater to their specific needs, leading to frustration, unsuccessful results, and wasted resources. The challenge was to incorporate AI technology capable of analyzing hair health . Plus design a product from the ground up that engages users while sharing complex information.
The project aimed to:
- Provide a seamless and personalized user experience from personalized hair assessment to building a hair routine.
- Simplify the hair product discovery process for users with diverse hair needs.
- Overcome the limitations of current technology in hair analysis.
User research
I begin with a solid foundation of secondary and market research, complemented by targeted user discovery interviews with 13 participants of various backgrounds and hair types. These steps were pivotal for me to demonstrate market need, user needs then craft personas representing our core audience. Following the personas I developed user stories focused on the product MVP. You can view my two personas below, but I'll share the major takeaways.
Key takeaways:
- Individual hair acceptance is crucial.
- People are unsure of which products to use.
- People define healthy hair uniquely.
User flows
My first user flow is highlights the first time user experience. The user is taken from onboarding, hair assessment and ends with customized product recommendations.
Progressing further, the secondary route maps out how a user could access and manage their personalized hair routine on a regular basis.
Style Guide
Next up was creating the style guide. I included color, font type, photography and illustrations. I did so I had a foundation in which to build all of my creative decisions on. Before, I dive deeper this is how I defined the brand voice.
Our brand is like your trusty, fact-checking friend who's always sharing the newest brand or hair product you should try. We stand out with a distinct voice making it a fun and sentimental hair journey. We're not just informative have a personality.
I chose SF Pro as my main typeface because as a Apple font it would be very familiar to my audience. Choosing something familiar to them would lower the cognitive load. You'll see I kept it as the logo font, but later updated it to a typeface called Bungee Spice to bring that distinct difference between the brand name and the app itself. I chose calming colors for my background (#F9F4EC) so a user could browse in a welcoming space and nothing felt over-powering. Yet, if I wanted to deliver colorful and fun imagery through illustration I could because the background lent itself to it.
Sketches & Low-fi wireframes
I sketched out my ideas and created wireframes for each screen, and studied other apps to gain ideas along the way. I learned to use the initial onboarding screens to highlight the app's value proposition. My goal was to reduce user drop off during the investment upfront of the hair assessment phase.
High- fi wireframes
Below you can see my onboarding flow become fully realized with illustrations and value based content. I made high-fidelity frames by combining branding and user research. Since budget was a constraint I chose an illustration style that offered me various illustrations that fit my content needs, but still allowed me to stick with one visual style. Of course it had to be free!
The home screen, greets users with personalized hair routines and product recommendations, is reminiscent of a hairstylist's welcome back to clients.
The home screen, which offers customizable hair care routines and time settings was inspired by the Peloton app's approach to user choice and flexibility. I provided users with two different ways to reach their hair goals. They could either access on-off routines, or access a monthly routine.
Usability testing results & updates
During usability testing two main areas were highlighted for improvement. First, concerns were raised about the illustrations showing scientists made them feel it was an experiment. The illustrations also didn't show diversity within the people so it didn't feel inclusive to women of color, prompting me to update the illustrations to be more inclusive. I chose new illustrations that featured a diverse range of skin tones and hairstyles. Plus, I replaced all science related screens with product images, or celebratory imagery. The largest drawback to the change was I had to break the illustrations visual continuity to be similar rather then perfectly related. However, given the budget constraints of an MVP I did my best to have them tell a similar color story.
Secondly, participants indicated that the user flow lacked clear direction, causing confusion about the next steps in the app’s process. To address this, I refined the user flow to offer a more intuitive and guided experience, ensuring users have a clear understanding of what to expect at each stage.
Outcomes & Learnings
Outcomes
The culmination of this project was the successful creation of the Woven Hue product mvp with prototypes ready for the ios developers to build it. The MVP resonated with our target users and the second round of usability testing confirmed that Woven Hue effectively addressed the core challenges faced by our users. By offering a personalized, technology-driven solution, Woven Hue empowers women to embrace their natural beauty with confidence and ease.
Lessons
When conducting usability testing, it’s important to ask the user what they think throughout and how each screen makes them feel. It illuminated how important the content design was in the onboarding flow and highlighted the illustrations I chose were not inclusive of diverse users.
One of my biggest struggles with the home screen was what to show to a user and what would be most important for them to learn. It became clear it was important to create a different home screen for first-time users vs. returning users as their needs were different. For instance new users were much more concerned with hair routines vs. products.
Check out the Figma prototype below
