UI/UX Design

Hue app: Tailoring hair care with AI personalization

icon arrow down
0
100

Overview

Hue is a concept ios app of an AI hairstylist app that offers women personalized hair care routines and product recommendations. It aims to simplify selecting hair products, making it a personalized experience.

  • Role:

    Product Designer/Researcher 

  • 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.

  • Methods:

    Low fi design, high-fi design, prototyping, secondary research, user discovery interviews, branding, competitive analysis, journey mapping, research recruitment, cognitive walkthrough, wireframing, prototyping, usability testing, and research analysis.

  • Timeline:

    3 months

  • Platform:

    iOS

The final Hue app solution

Home and treatment screens
After consultation learnings

So, how did I get there? Learn all about it below.

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.

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.

First time user red route

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.

I chose calming colors for my background 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.

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-fidelity screens before & after usability tests

I find creating the high fidelity screens to be incredibly rewarding. And the learning I get from a usability test to be so eye opening. Next up, I'll walk you through the changes between my key flows pre and post usability test.

Onboarding flow (pre-test)

Onboarding pre-usability tests

Onboarding flow (post-test)

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.

Consultation flow (no changes post test)

The consultation flow where the app learns more about the users hair went well and didn't require additional updates.

Results flow (no changes post test)

The results flow was successful and required minimal technical updates.

Outcome

Final outcomes

I successfully created the Hue product mvp that is ready for the ios developers to build it and it allows me to share the proof of concept with others backed by results. It resonated with the target users and the usability testing confirmed Hue addressed the core challenges faced by our users.

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.

you may also like