HairShare
OVERVIEW
HairShare is a mobile app designed to make hair maintenance more efficient for people who often find the process difficult.
ROLE
UX/UI Designer
Design Tool: Figma
User Research, Visual Design, Low – fidelity Wireframes, High-Fidelity Prototypes, Usability Testing
August 2022 – November 2022
CONTEXT
Through several conversations I’ve had with my peers, I noticed every time the topic of hair care or hair routines arose, there seemed to always be a collective annoyance within the group. The shared issue appeared to be an effect of living in a busy city and having too many tasks and too little time. Between searching across multiple apps for hairstyles, products and reviews, hair maintenance always seems to be one of the most time consuming tasks. Being that this is something I also struggle with, I began to search for a solution.
RESEARCH
I conducted 6 interviews to try and understand potential user needs. Here are some questions from the interviews:
- What percentage of the time do you have a good experience doing your hair?
- How often do you try new hairstyles?
- Tell me about a time when you had to do your hair and it frustrated you?
- Can you describe the last time you had a good and bad experience doing your hair and why?
- Where do you seek help when you are having a problem with your hair?
BRAINSTORMING
From these findings, I was able to identify some trends and create a Persona and Affinity Map. I also found that every person I interviewed stated that they use YouTube as their main resource which was very vital to my research. At the same time, the interviewees explained how YouTube could be a “hit or miss” or was rarely efficient.
Then with this information, I identified pain points and goals and came up with a How Might We statement for Jade.
HMW Statement:
How might we make Jade’s hair maintenance process more efficient?
SOLUTIONS
The first step in my visual design process was sketching. Since Youtube was mentioned in all of my interviews, I used it’s layout as a reference and looked for where I could make improvements.
My main focus was to create an app that is reliable and efficient. I wanted to design an interface that allows the user to immediately use the app without a lengthy and mandatory sign up process.
Then, I made a list of features and prioritized the most important ones which were, Search Keyword, Follow, Save Post and Leave a Comment. With this information, I created a core user flow:
WIREFRAMING
Using Figma, I designed a low-fidelity wireframe for the Save Post feature.
Frame 1 is the screen the user sees upon opening the app for the first time.
Frame 2 is the search result screen.
Frame 3 displays a full post.
Frame 5 displays a saved post.
HIGH-FIDELITY PROTOTYPE
After wireframing, I designed a high-fidelity prototype. By this time, I did a little more brainstorming and decided to call the app HairShare.
Frame 7 is the first screen the user sees upon opening the app.
USABILITY TESTING & UNMODERATED TESTS
Once I finished refining the prototype, I began the testing phase. During some of the tests, I conducted timed tasks which were incredibly insightful.
Here’s some of the feedback I received:
OUTCOME
The feedback I received was mostly comments on the background color being “too dark” which made it difficult to take in the content, so I changed it to white. From there, I was able to make more improvements and these were the final results:
KEY TAKEAWAY
There are may things I learned throughout this process, but the most important takeaway was prioritizing the user. Occasionally, the visual artist in me would takeover and focus too much on developing unique designs. However, I was always able to consider the perspective of the user and maintain a good balance of great designs and overall functionality of the product I was creating.