Style
A new solution for DIY Haircuts
OVERVIEW
Problem Statement
In 2020, with many people stuck at home because of the pandemic, people could no longer go to the hair salon to get a haircut. DIY barbershops and hair saloons have popped up in homes all across the country as people have hunkered down without access to a professional hair stylist. Not only are most people getting used to cutting their own and family members’ hair, they’re finding it to be much cheaper than regular trips to a professional. There is a definite opportunity space available for improving the home barbershop experience as there are no cohesive resources online for how to perform certain haircuts for different hair types and face shapes.
Our Goal
To provide people with a way to easily cut their hair successfully, and to also get a haircut that they know will suit them.
Role
UI/UX Designer, UX Researcher
Team
Mary Alsayar, Alazar Abebe
Tools
Adobe XD, Adobe Illustrator, Adobe Photoshop, Zepeto, Fusion360
Skills
Needfinding, UI/UX Design, Research, User Flow, Digital and Paper Prototyping, User Testing, Animation
Duration
2 weeks
What kind of haircuts are Why would someone choose
the most difficult to DIY? to cut their own hair?
How does someone Who does this
choose a haircut? affect the most?
Why do people struggle with cutting their own hair?
We worked on understanding the problem better by coming up with questions to guide our research
How does someone know How does hair type and
a haircut will suit them? face shape affect this?
What resources What DIY resources
are available? do people currently use?
RESEARCH
Trends
We looked at trends in sales and on social media relating to DIY Haircuts. We discovered that DIY haircuts were on the rise in popularity during quarantine, mostly with people sharing their failed attempts at cutting their own hair or a family member's hair.
Searching the #QuarantineCut hashtag, "Quarantine Haircuts", and "DIY Haircut Fails" on Twitter and Instagram generated hundreds of posts per hour as people joined the trend of cutting their own hair and sharing pictures online for people to judge. Some even turned it into a challenge of either shaving their hair or giving themselves (and even their pets) a ridiculous haircut for fun, with many celebrities hopping on that trend.
We also saw a surge in memes related to "quarantine hair" and "quarantine haircuts" since people had to now DIY their haircuts while hair salons were shut down.
Google reported a huge spike in search for "How to cut your own hair", with a big upswing starting around March 8th of 2020. Many DIY haircut articles saw a surge in traffic during quarantine, as well as many YouTube videos relating to DIY haircuts gaining spikes in views.
According to Forbes, sales of hair clippers rose 166% during the week of April 6th of 2020.
Also according to Refinery29, haircut products and hair dyes were selling out online and in stores as many people attempted to give themselves a new look during quarantine, with hair dye seeing a 23% spike in sales during April 2020.
Market Research
From our market research, we found 3 main tools that people can use to try on and learn how to DIY a hairstyle. Those tools are YouTube videos, a product called "Self-Cut System", and Makeup apps that have hair filter features (such as Perfect360).
YouTube Videos
In 2020, many YouTube content creators used their platform to educate viewers on how to cut their own, or to show themselves cutting their own hair following someone else's YouTube tutorial. Videos related to DIY haircuts saw a rise in views during quarantine. This was people's main source of learning how to do haircut on themselves or a family member.
Self-Cut System
According to Amazon, the Self-Cut System is a product that is "uniquely developed to cater to the image-conscious short hairstyle community, demonstrating step-by-step techniques for the latest hairstyles. The educational app includes easy-to-follow tutorials for trendy short styles, producing professional quality haircuts by self-grooming". To use it, once must purchase a 3-way mirror designed specifically for this product, and download the free app that come with tutorials.
However, even though this product seems like a great solution for DIY haircuts for short-haired people, the reviews for the app said otherwise. Most of the reviews were very old, showing that this product is possibly not be used much today. It also appears that the developers of the app had many bugs in it that gave users issues, and the tutorial themselves weren't helpful.
Hair Filter Apps
This particular tool isn't used to teach someone how to cut their own hair, but it is mostly used for fun as it allows people to try out different hair styles and hair colors virtually through AR technology.
INSIGHTS
Insight #1
DIY Haircuts are on the rise, with many people searching for ways to easily and successfully cut their own hair.
Insight #2
People understand how to do a haircut best by learning visually, and need clear visual instructions to be satisfied.
Insight #3
People love getting to see how they would look with different hairstyle/color even if it is only for fun.
Insight #4
Social Media has a large influence on people's actions when it comes to DIY haircuts. Trends and feedback, whether it's positive or negative, encourages people to try cutting their own hair and share the results.
USER JOURNEY
Before the lockdown and quarantine, most people got their hair professionally cut at a hair salon, in which the user journey looks something like this:
However, due to COVID-19, many hair salons were shut down, leaving people searching for ways to cut their own hair. From our research and small user interviews, we found out that the majority of the people who attempt DIY Haircuts do it through YouTube tutorials, and their journey to achieving the desired haircut looks something like this:
The main struggle points for users trying to cut their own hair are finding a suitable, easy-to-follow tutorial, and then doing the haircut itself. The success or failure of the DIY haircut relied heavily on the clarity of the tutorial the user followed.
OPPORTUNITY AREAS
Opportunity #1
How can we make a haircut tutorial easier to follow?
Opportunity #2
How can a user choose a haircut that will suite them?
Opportunity #3
How can a user obtain the required tools?
Opportunity #4
How can a professional hair stylist still use their skills to help others while they're at home?
IDEATION
Using the research and identified opportunities, we came up with a few concept sketches possible solutions
(Sketches by Alazar Abebe)
Based on our four concept ideas, we decided we want our app solution to focus on two main components:
Hairstyle try-on feature, and clear personalized step-by-step instructions
PERSONAS
We created two persona's based on the two main use cases:
A person who wants to cut their own hair, and a person who wants to cut the hair of someone in their household.
For the purposes of this project, we decided to focus on the first use case and persona:
A person wanting to cut their own hair at home
CONCEPT 1
Concept Proposal:
#DIY_QuarantineCuts
We want to design an app that allows users to cut their own hair at home successfully, with the option to go to a professional hairdresser once hair salons open up again.
This app will allow people to input information about their hair, then "try on" haircuts/styles, then choose the one they like and learn how to apply it on themselves.
User Flow
Digital Prototype
Onboarding
For the onboarding phase of the app, we require users to have an account so that their activities and information can be saved. We have a long questionnaire to gather information about the user's hair type and face shape so that the app can generate haircut options that will be suitable for the user and follows with the trends of their age and country.
Profile
For the Profile page, the user can access all of their saved information, as well as add to it. We wanted to incorporate a feature that allows users to find a hairstylist that can give them their desired haircut chosen from the app. For that, users can search and sort based on location and rating to find the one they like, so that once the lockdown has shifted, they can get their hair cut by a professional again.
Try-On
For the "Try-On" feature, we wanted to keep the screen simple and similar to regular camera screens like that of snapchat and phones. The users see their face on the screen using the front-facing camera, and can see what different hairstyles would look on them with AR technology. The users would swipe left and right to brows, and once they like a style, they can take a picture of it that goes to their "photos" gallery, and tapping on it would take them to the "learn" phase.
(Zepeto avatar was used in substitute of a person's face for the purposes of this mock up)
Learn
And finally, the Learn phase. After the user has selected the haircut they desire to achieve, they can go to the learn page, which will take them to a step-by-step video on a mannequin head showing how to achieve that haircut.
Paper Prototype + User Testing
The goal of the paper prototype is to test the flow and the interaction of the user and the product to get feedback. We tested the sign-process, try-on feature, and the steps the user can take after choosing a style.
Onboarding
Try-On
Find or Learn
User Feedback
The sign-up process is too long, maybe have a face scanning feature to
gather the information instead of a long questionnaire.
Most people don't like having to make an account,
that step could be eliminated to simplify the app.
For the try-on feature, it would be nice if users can filter the
generated haircuts based on popularity, length, etc.
Liked the idea of getting to see the hairstyle on themselves, but the
"taking picture" part then clicking the image to learn aren't very intuitive.
The "Find" feature isn't needed and seems out of place
considering the purpose of the app.
It can be eliminated to keep the focus on DIY Haircuts.
On the "Learn" page, users need a lot more information
instead of just the video starting.
Having both verbal and visual instructions would be ideal.
Should have a list of all the tools that are needed before starting the
tutorial. Maybe also provide links on where to obtain the tools.
Give the users a list of "Do's" and "Don'ts"
before starting the tutorial.
Give the users the ability to control the pace of the tutorial video,
or instead of a video, the users can click for the next step.
People need clarity and intuitiveness with an app like this,
so the more steps users have to do on their own, the more
complicated and less user-friendly the app feels.
So basically, MAKE IT SIMPLER
FINAL CONCEPT
Concept Proposal:
Design an app that allows users to cut their own hair at home successfully. This will be achieved through the use of AR technology that collects information about the user's hair and face, then generates suitable haircuts for them to try on before choosing the one they like. After that, the app guides the user on how to achieve the haircut through an interactive step-by-step animation.
Design Criteria:
1 2 3
Understand the user's face and hair type Allow user to "try on" Guide the user through clear steps
and generate personalized haircuts different haircuts to achieve the desired haircut
Styl User Journey
Styl User Flow
FINAL SOLUTION
Onboarding
Open App: The app opens with a scissor animation and the app name appearing at the bottom
Scan Face: The app guides the user to scan their face to gather information about their hair and face type instead of the questionnaire
Scanned Information: After the scan in complete, the user checks if the information is correct, and the app would generate hairstyles
Try-On
Try-On Hairstyles: The app takes the user to the "try-on" page, which is a front-facing camera screen that uses AR technology to allow the user to see themselves in the different haircuts by swiping. That way they can know if a haircut will suit them before they get it done.
Choose Haircut: After deciding on a haircut, there are a few routs to go. The user can click the scissor icon at the bottom of the first picture, which takes them to the Learn page, or they can take a picture of the haircut and continue browsing. After taking a picture, the user can access their photo gallery of other hairstyles, and choose from there which one they want to learn.
Learn
Transition and Instructions: After the user chooses the haircut, the app transitions to the "Learn" phase and presents the user with the list of items and products they need before they start cutting their hair.
Learn and Finish: In this part, the user gets to learn and do the haircut on themselves. They would tap to see the next set of instructions, or say "next"/"back" if they are unable to tap the screen. They are guided step by step with an animated mannequin showing how the haircut can be achieved. Once done, the user can take a picture and share their results on social media.
(Note: The sketch is only a mock-up, the actual app would have higher fidelity imagery)
Styl Video Demo
RETROSPECTIVE
Project Limitations:
- Since this project was only two weeks long, we didn't have the time to dive too deep into the research and testing.
- Due to this prototype being created with Adobe XD and no coding involved, we couldn't create a fully-functioning app for potential users to test. Although we were able to conduct user testing with the paper prototypes, it does not give a fully realistic experience. Therefore, we do not know if the app is actually affective and achieves its goal.
Future Improvements:
- Give the user the option to choose whether they want to cut their own hair or someone else's hair. The tutorial would look different for each option, and the app is currently tailored only towards those who want cut their hair themselves.
- Create a more unique branding for the app and give it its own logo. Also make the icons and features more unified.
- Create a way for users to save their information so they can access it once they're done instead of having to start over each time.
- Make a higher fidelity prototype and conduct a more realistic user testing for the try-on and tutorial part.
