Hassle-Free Barbershop Experience with Shaveo — Barbershop App UX Case Study
Men and barbershops are a combination that will last forever. We go to the barbershop to get a haircut or fix our looks in a specific time range. In this case study, I'm doing research about how customers go to barbershops and how I can make their experience way better.
Overview
Have you ever wanted to go to the barbershop and feel disappointed when you see that your favorite barbershop is closed? That’s what I felt when I decided to pick this problem as my next case study problem.
It all started when I need a new haircut but my favorite barbershop is closed. At that moment, I was confused and decided to find another barbershop but I was not sure enough that I will find a decent barbershop that will suit me. So I started to think what if there’s an app that will help users to find another decent barbershop that will give its users some information about barbershops around them? That’s when Shaveo comes in handy to save your day and gives you a better haircut and looks!
Goals
- Helps user to find a perfect barbershop that suits their needs
- Give users a better barbershop experience
Roles
I did all of the processes by myself which means I'm going to do the research, ideation, visuals, prototype and testing. The tools that I used in this project are Figma for doing the visuals, Dribbble and Behance to seek some inspiration, Balsamiq for wireframing and Notion to do some writing and notes.
Process
I’m using the Design Thinking process for this project. I chose this process because of its simplicity and how it's heavily focused on the users.
Empathize
The process starts with Empthatize. This phase aims to gather some information about users as many as possible.
User Interview
To gather some qualitative information, I chose to do the information gathering by doing an in-depth interview. With this method, I’m able to ask the users directly and gather as many insights and information as possible in a session.
In order to make the research accurate, I’ve set some criteria for my interviewee. Those criteria are:
- Male
- 16–35 years old
- Live in Indonesia
- Have been using barbershop services for the last 6 months
Then, I need to ask them some open-ended questions to gain some insights and give me chances to dig for more information about them. Here are some of the questions that I ask to the interviewees:
- How often do you go to the barbershop?
- What is the first thing you notice when you visit a barbershop?
- What are the common problems going to the barbershop?
- Do you have a favorite barbershop? If so, how did you find it? Why make this barbershop your favorite barbershop?
- Do you have a favorite barber? If so, why is this barber your favorite barber?
Time to roll the interview. I set the interview to run for a week-long and managed to interview 5 interviewees that fit my criteria.
Define
The interview is done and I’ve gathered some interviewee responses from the previous phase, now it’s time to find out what are their problems and seek some insight that might be useful for this project.
Affinity Diagram
The first thing that I did in this phase was gathered the responses and try to sort them out to help me figure out the problem. The process I used to achieve this goal was Affinity Diagram. I gather all of the responses and try to find some of the most mentioned responses then categorized them based on their subject. Here is the result:
After gathering some responses from interviewees, I managed to categorize them into 4 main categories which are Barber, Pricing, Queue, and Barbershop. Then, I figured out what is the most addressed problem in each category.
- Barber
This is the most frustrating problem category for interviewees. All of my interviewees always address this issue. They don’t satisfy with the haircut they get. The reason is varied, but most of the reasons mentioned lead to the conclusion that the interviewees are not satisfied because the barber is not competent enough to bring the best haircut for their customers and the barber is not communicative enough to their customers. - Pricing
Unlike the previous category, this category is the one that is mentioned the least. The most problem addressed in this category is that the barbershop is not updating their service prices and don’t give enough information about their services on their social media which causes the customers confused about the pricing of their services. - Queue
Queueing is frustrating and we all agree about it. In a barbershop, queueing is the most common thing that we’ll see and so does what my interviewee sees. The most issue addressed by my interviewees in this category is how this queue takes too much of their time and how badly they want to skip it just to get their haircut as soon as possible. The other problem is they need to see how long the current running queue is without going to the barbershop by themself. - Barbershop
In this category, the problem that was addressed the most is how the barbershop tells its customers about its availability. Most of the time the customers found their favorite barbershop is closed once they are right in front of their door. Once they found it closed, they need to find another barbershop recommendation as soon as possible to save their time but they also find it difficult and time-consuming.
Persona
Based on the information I’ve gathered before, I defined a persona to represent the target users of the app that I will build in this project. This persona will help me to decide some decisions during this project. Here is the persona that will be used during this project:
User Journey Map
The next thing I did in this phase is defining a customer journey map. During the process, I empathized with how the persona would find their perfect barbershop based on their responses and the insight I get from the previous phase. It helps me to understand how they interact with certain activities. Here is the result:
How Might We and Solutions
After finding out what the problems are and how users find their perfect barbershops, I took the most addressed problem from each category in Affinity Diagram. Then, I’m trying to find the solution to each of those problems. Here are the results:
By figuring out these solutions, I can start moving to the process which is the Ideate process where all of the activities that happened there will be based on these solutions.
Ideate
I found the solution, now it’s time to bring the solution to life. In this phase, I’ll define the basics of how the app would work.
Information Architecture
Since the barbershop is the main subject of this project, I’ll start with what pieces of information about barbershops will be included in the app. Here is all information about barbershops that I’ve defined:
Now, I defined all of the information that will be included and used across the app. Then, I put all of the information under each of the main menus. Here is the result:
Concept Model
The information is defined clearly, the next step is to define what information belongs to who and how the information is connected to each other. The tool that I used to define these connections is the concept model. Using this tool, I can define and see how information is connected and how important the information is to other information. Here is the result:
User Flow
The informations are set and so their connection, now I need to define how the user will use this application. I defined the user flow diagram to explain how the user will use this app. Here is the result:
Look and Feel
This is where the fun starts. In order to design an app that would match its goals and give an immersive experience, I need to define the feel and mood of this app. I’ll start with the mood board first.
I started by collecting some accurate photos of how the barbershop looked and feel. I browse some photos online from Unsplash and put them in one place. Here is the result:
From the mood board that I’ve defined above, I came to the point that this app would be an app that would use black and white as its main color to achieve a gentlemanly and classy feel. Also, since the target users of this app are the millennial generation and young adults, I’ll make this design look and feel modern and clean that would fit with them and the barbershop.
Since I want this app’s main colors to be black and white, I need to define the exact black and white color hex. After some selections, I chose #1C1D21 as the black color and #FFFFFF as the white color.
The feel and mood are set, now it's time to define what this app would be called. First, I gathered all of the words that related to barbershops and haircuts. I need to find a word that would fit with the feel of this app.
After some ideation process, I chose the word “Shave” as the main word of this app name. The reason I chose this name is that the word “Shave” itself feels gentlemanly and related to the barbershop and haircut while also being catchy and simple at the same time.
But “Shave” is not enough since it’s not sound millennial and modern enough. So to achieve it, I added “O” at the end of the word. So this app is called “Shaveo”.
Then I design the logo of this app. The logo itself is quite simple. This is how the logo looks:
Everything is set, now it’s time to move on to the prototype phase.
Prototype
Everything is already defined, now it's to craft the product for the solution that I’ve already defined. The process will start with designing the design system and then move to the crafting phase which starts with the wireframe which will be turned into the hi-fi prototype later on.
Design System
In order to craft a simple yet consistent product, I need to define the design system that would be used across the app. The design system consists of colors, buttons, spacing, and typography.
The first thing that I did in every project I work on is defining the numbers. I used a 4-point system with a little modification to achieve a consistent and more flexible design. These numbers will be the main numbers that I’ll use in spacing, typography, and sometimes shape across the app. Here are the numbers I picked for this project.
Then I moved on to colors. The main colors of this app are defined already which are black (#1C1D21) and white (#FFFFFF), but it’s not enough, I need to define other accent colors to accommodate other cases and states. Here are the colors I’ve picked for this app.
Next, I defined the typography that will be used in the text of this app. I chose sans serif font because I want this app to look modern and clean. After some research and testing, my choice goes to Lato simply because this font gives a modern look and bold just like how I want this app to look and feel.
With all of the basic guidelines defined, I can use them to design the components that will be used across the app. By applying those guidelines I can design consistent components that would like like a unit and also become branding of the app itself. Here are the results
Wireframe
Before jumping into the hi-fi, I made some sketches on the paper to help me to define the wireframe and give some visualization of how this app would look.
Then, I turned those sketches into some lo-fi wireframes using Balsamiq
Finally, I defined the spacing and margin by using the wireframe that I already defined to make sure the design is consistent and clean. Also, it’ll make the information well-grouped and easy for users to identify
Hi-Fi Prototype
Using the wireframe I've defined before, I designed the hi-fi mockup on Figma. During the design process, I found some improvements that I can add to the Hi-Fi design. Here are some improvements that I did and how I ended up improving them:
Home Screen
Since the home screen is the first screen that users see whenever they open the app, the home screen should be informative enough for the users. So, I’m adding information about loyalty card and coupons on the home screen. I did this because :
- The content on the home screen looks repetitive and doesn’t give users enough information about what they have in their accounts.
- The loyalty card and coupons information will drive users to spend more since there are some rewards waiting for them
- I found some similar patterns on another app in Indonesia, so by adding this information the users will easily understand and feels identical. It’s aligned with Jakob’s Law
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. — Jakob’s Law
Home Screen with Active Order
While users have an active order, The users need to be aware and notified of their active order. So I decided to put the active order information on the home screen since the home screen is the first screen that users see whenever they open the app. This component also informs the users of when the users get their haircuts.
Seems like the information is not highlighted enough. So I decided to give a spotlight by replacing the greetings message with the component and giving it a little spotlight to make sure it’s highlighted enough.
Barbershop Details
The barbershop details page is already informative enough, but I want to add some highlights to the information that matters the most for the users, which is the queue information since most of the pain points that the respondents had is queueing.
With all of the changes I’ve made, here is the final hi-fi mockup :
Then, I connect the mockups to make a prototype, here is the final prototype that I've made
Test
The moment of truth. It’s time to take the solution to the test. In this phase, I will test the design that I made in the previous phase. It starts with usability testing and then I’ll do some iterations based on the usability testing.
Usability Testing
To test the design, First, I made 5 scenarios that will be carried out by the testers. Those scenarios are :
- Find Nearby Barbershop
Testers will be assigned to find nearby barbershops by using the Search menu.
- Book Barbershop Appointment
Testers will be assigned to book a barbershop appointment
- Book a Barber Directly
Testers will be assigned to book a barber directly from the barbershop details page
- Cutting Queue
Testers will be assigned to cutting the current queue from the barbershop they’ve booked
- Review Appointments and Service
Testers will be assigned to review their previous barbershop appointment and service by using the Order menu
At the end of each scenario, I asked the testers how they felt about the task overall using a Single Ease Question. The scale consists of 1–7 which 1 being equal to Very Hard and 7 equal to Very Easy. The reason I used Single Ease Question is that I want to make the testing session short and simple for the testers while being informative at the same time.
While the testers do the testing, I observe how the testers would interact with the design and took notes about it while listening to what are their feeling and feedback about the design. The usability testing is held offline and I set the test to run for a week long. I managed to get 10 testers on the testing session and here are the results :
Iteration
After the usability testing is done, I review the test results and my notes then try to tweak some designs based on what the testers feel about the product. Here are some of the findings and some of the iterations I did :
Use Coupon Button
Most of the testers don’t aware of this button which makes them not do the third scenario right. It is also harder to click for some users who recognize this button. So, I added a fill to the button and make the hotspot bigger so it’s easier to click at.
Service Duration of Each Service
The items in the service list are not informing users about how long the service will be. Some of the testers need this information so they can estimate the time they took in the barbershop. So, I added the service duration information in each of the service list item
Review Last Visit in the Home Screen
During the observation, the testers got some hard times in the fifth scenario. Testers were confused about how to review their last appointment which makes them take a long time on the home screen. To make the review process easier, I added a new widget on the home screen which is the Review Last Visit widget. This widget will inform and also notify the users to review their last appointment.
Reflections
Lesson Learned
The whole design process of this study case was super fun for me. I learn some from this study case. I found that I shared the same problem and also got some new problems that I never thought some of the people who went to barbershops felt. I also learned that people have their own problems when it comes to barbershops and I won’t find this out if I’m not conducting the research at the first stage of this study case. I’m glad that I'm able to design the solutions for some of their problems.
Key Takeaways
This study case is far from perfect. I found some flaws and insights in the design process I did in the process of doing this study case. Those flaws and insights are :
- Words also part of the design system
Visuals are not the only thing to achieve some kind of look and feel, words are also one of the things to achieve it. This is where UX writing comes in handy. I realize that the writings in this project are not quite given the look and feel that I set in the Look and Feel section. I think It would be perfect if the words are aligned with the theme of this app itself to give the users an immersive experience and some excellent branding. - The research is not perfect enough
Once the process is finished, I realize that there are some processes that might make this design process better. I think I need to design a better plan for my next study case before I jumped into the process and I also need to learn to do better research to conduct better UX research in the future - Direct usability testing is not dead and it’s way fun!
I found that conducting usability testing is fun when I did it directly with the users. I’m able to see their reaction and how they would interact with the design I’ve made. It’s also much more communicative since the users are able to talk about what they thinking directly to me and give me chances to ask them what and which part can be improved - The Design Thinking method is the perfect design process for this study case
My first study case is carried out using the User-Centered Design method and I think it’s not good enough. So, I’m trying something new in this study case by using the Design Thinking method and I think chose the perfect and right design process since I’m able to set and achieve the goals that I set for this project, thanks to the Design Thinking method. It’s also flexible enough since it has 5 phases that aim to specific goals in each of the phases.
