Bersolek is a mobile platform that helps people book beauty treatments by providing salon reservations online. This is my personal project to improve my design skills that I did outside of my work hours.
Roles and Responsibilities
As long as this is a personal project, so I did all of this process by myself, from research until usability testing. I took four roles in the UI & UX design industry, here they are :
- UX Researcher: As a researcher, I created the research plan, arranged the survey questions, shared it, conducted the interview, benchmarking, and analyzed the data & findings.
- UX Designer: As a designer, I analyzed problems, determined the initial product requirement, making a mental model & affinity diagram, and arranged the solutions.
- UI Designer: Explored inspirations, design high-fidelity, and prototypes.
- UX Writer: I also responsible for the copy on the screen to guide users and help them to achieve their goals.
My Own Problem Assumptions
The reason why I write this case study because I encountered some issues when I want to get some beauty treatments in a salon. These issues bring me to create a solution for my own nuisances. Okay, I guess it is will better if I tell you a story about my experience to get some beauty treatments in a salon.
Here it is...
On a sunny day, I went to my usual salon to cut my hair. I make preparation for this, I even skipped my personal task on that day. When I arrived at the salon, I was told by a receptionist that the hairstylist did not work. I asked her when does she work again. Unfortunately, she did not know. So I left the salon and decided to visit my other usual salon. Poor me, the salon was closed.
I could go to any salon, but I was not that typical customer. I couldn’t trust any salon if I don’t know anything about the salon itself. I just want to go to a salon that I had visited.
I went home with a feeling of disappointment and piqued. When I arrived at my home, I lost my energy and my mood. I was too tired to continue my life. So I just lied down on my bed for a whole day.
From that experience, the unexpected thought hit my mind. What if there is a platform that helps people to be able to book a salon they want? They can make a reservation for some beauty treatments and they also know if the salon was closed. Just like the other booking application.
So, before I jump to design a solution, I did some research to validate the problems. Are other people also have the same problems as I do? But before I conduct research, I have to know my audience. The people that will use this application. This is essential to guide the design process and ensure services and products meet user needs. It is also more effective because focused conversations are possible. This is my potential persona for this case:
This potential persona will help me to conduct research from arranging survey questions to doing in-depth interviews. But before I explain it, I want to make a clear about this case study. What is the background problem and what is the main goal of this application? This is essential to make sure the whole process stays on track.
The Background Problem and The Objective
The background problem is the main reason why I write this case study. According to my own problems assumptions, I conclude that the background problem is the problem that I encountered when I want to get some beauty treatments in a salon, i.e;
People feel disappointed and piqued when they already gave some effort to go to a salon but it was closed or the workers did not work.
Furthermore, I determine the objective of this application. The objective is the main goal of this application for the next few years. In this case, I set the achievement of this application in the next five years.
Help people who want to go to a salon so that their trips are not in a vain.
After I made the potential persona and determine the objective, I conducted research. This is important to know more about the users. I used two kinds of methodology; quantitative research (online survey) and qualitative research (in-depth interview).
Quantitative Research (Online Survey)
As I said before, I need to validate my own problem assumptions (now the background problem) to make a good design solution. So, I conducted quantitative research to know how many people have the same problems as I do. I arranged an online survey using google form then spread it to my acquaintances (I already sorted them based on the potential persona that I mentioned before) and some online communities. Here the results :
From those diagrams, we can see that people tend to go to their regular salon than a random salon. Meanwhile, the second result reported that people go to another salon if the previous salon is unavailable. So, after I got those results, I pursued to conduct qualitative research (in-depth interview).
Qualitative Research (In-Depth Interview)
After I found out that people have the same problem as I do, I invited five participants to do an in-depth interview. Three of them are my close friends and two of them are strangers that I met online. The aim is to know more about why do they behave like that? What is the reason?
There are four basic questions that I asked :
- What triggers you to go to a salon?
- What do you do to achieve it? (go to a salon)
- What do you expect when you achieved it?
- What do you want to give and get if you achieved it?
After I asked those questions, I also asked about the questions on the online survey. Why would they only want to go to their regular salon? why did not try another salon? I also asked have they ever go to a salon but it was closed? If yes, then what would they do? Why did they do it? if then they went to another salon, what is the meaning of this salon? Is it one of their regular salon or just a random salon? I dug deeper into their behavior. There are so many questions I asked until I felt satisfied and knew what their problem really is.
Before creating solutions, I did an analysis of other competitors. The aim is to find out best practices, innovative ideas, and an effective flow that lead to the best user experiences.
Unfortunately, I had trouble finding similar products. I couldn’t find any booking salon apps, but I found a barbershop app which is a booking salon for men.
Chief Barbershop is a barbershop that has a lot of branches that provide a booking service through a mobile application. In order to make a reservation, users have to book a service then choose the stylist. The lack is when users want to book more than one service in one branch, they have to make another reservation even the schedule and the stylist are the same. This is the user flow :
So, we can see that between this product and mine is a bit different. This product is for one salon with a lot of branches. Meanwhile, mine is for many salons.
Determine Problems and Solutions
After I got some insights from my participants, I arranged them into a mental model and an affinity diagram.
A mental model is an explanation of behavior, thought process, and the way people do something or interact in the real world. This mental model is also crucial because it will help me to design solutions based on the problems so that the possibility of the design solutions which are offered is appropriate to the user's needs. Here the mental model for this case :
This mental model describes the four basic questions that I mentioned before. Later on, the action will help me to define problems. Let’s see it :
From that mapping, we can see that I put the background problems as a scenario. A scenario mapping is a process where we seek and illustrate what might happen when users try to achieve their goals (go to a salon). Furthermore, after I made these scenarios, I tried to integrate them and the research results into an affinity mapping that describes the user’s problems.
This mapping describes the user’s problems that might appear when the scenarios occurred.
After I defined the problems and did a benchmark, I initiated to create solutions based on the problems. I arranged them into the How Might We (HMW) diagram.
An idea without a clear strategy will become a useless idea. The product won’t grow and expand properly. That’s why we need the AARRR Framework or Pirate Funnel.
AARRR Framework is a framework to enhance the growth of our product. There are five strategies for this funnel :
- Acquisition: a strategy to lead the users to use our product
- Activation: a strategy to help the users to solve their problems through our product
- Retention: a strategy to encourage the users to use our product again
- Referral: a strategy to make the users like our product and tell it to others
- Revenue: a strategy to make the users feel satisfied with our product
In the next step, I will interpret the solutions into the product.
These are the high-fidelity design based on the proposed solutions. I used Figma to create all of these, high-fidelity designs until interactive design.
This is the first page when users open the application. On this page, users can find a variety of beauty salon based on they had visited the most, recommendation, popular, and the nearest from them. Notification as a reminder for their upcoming schedule, a warning if they have not completed their payment, and an announcement when they have made a reservation successfully.
This is a screen when users click “see all” on the nearest section at the home page. Furthermore, they can filter and sort the list based on popular, nearest, and review.
This is a screen for the detail of the salon. On this screen, users can book services. I also put information about the detail of the salon such as the distance, open hours, review, address, and the services that provided by the salon itself. If the stylist or the therapist is unavailable, the card for the service will disable like “scrub & body bath”. To overcome the user’s trust issue, I also give a label for sterile tools and Muslimah salons.
This is the screen for the booking schedule. On this screen, users can pick the date and time.
This is the screen when users have booked a service. The purpose of this screen is to convince them if they have made the right reservation. Furthermore, they have to choose the payment method.
This is the screen when users have chosen the payment method on the reservation detail screen. They have to complete the payment process in order to book the treatments that they want.
This is My Booking screen and the detail itself. On this screen, users can examine their active and history booking. They also can reschedule or refund their active booking by clicking on the kebab menu.
This is the screen when users have successfully placed a reservation (left screen) and the page for deals (right screen). On this screen, they can view some offers provided by some merchants (beauty salons). This is one of a strategy for retention on AARRR framework.
After I create the prototype, I conducted remote usability testing by using Maze Design. The aim is to evaluate the usability of the product by examined to potential users. In order to do it, I arranged the plans into a scenario with three tasks.
The reason why I divided the tasks into three parts is there will be a lot of information for participants when they tried to complete the tasks. This will overwhelm them.
Google HEART Metrics
To measure UX, I used HEART metrics from Google. It is a set of user-centered metrics and developed to evaluate the quality of the user experience including help designers measure the impact of UX changes. The metric itself has five factors; Happiness, Engagement, Adoption, Retention, and Task Success.
However, since this product is new and has not been used by “real users”, I will only employ one category as the goal of this test. I want them achieved their goal easily, so I picked task success as the metric. As Aditi Bhargava (UX Researcher at Google) said;
It’s important to narrow down your list of goals to no more than 3. While focusing on every aspect of the HEART framework may seem like a good way to build a near-perfect UX, it’s not practical to be juggling five goals and more than a dozen metrics. “What do we want a customer to tweet after using our product?” For example, if you want users to talk about how easy your app is to use, focus on task success. If you want them to talk about how much they enjoy using your app, choose happiness.
So, I have picked a goal and metric from the HEART framework, now I will define signals and metrics for measuring.
Now, let’s take a look into my usability testing report;
Task 1 — Choose The Treatments
From that report, we can see that the success rate is 75% and the duration rate is 12,8 seconds, which means that the rates are not bad. Meanwhile, the error rate is 17,6% which means that it is quite high. After the users tried the prototype, I gained insights from them and I knew why this happened. The reason is they didn’t know that they have to follow the instructions blindly. They thought that they could choose the treatments independently.
Task 2 — Pick A Schedule
The success rate for this task is 90,9% which means good and the error rate is 13%. It is not bad. Meanwhile, the duration rate is 29,3 seconds. This is bad because it’s long. I gained insights from them too just like the previous task and the reason is the same. So, I checked the heatmap and found out that they picked the slot (available time) randomly. They spent their time choosing the slot they like.
The duration rate on the second screen (right) hits 73,56 seconds but the usability score for this task is 83 which means good.
Task 3 — Complete The Payment
The success of this task is nearly perfect. The success rate is 100%, the duration rate is 3,7 seconds which means fast, and the error rate is only 6,7%.
Now, I have the rates for each task but since these tasks are actually in the same flow, so I combined them in one rate for each metric;
When this usability testing end, I asked the participants about their experiences. How easy is this app to use? Do you think it is hard? Unexpectedly, all of them had the same answer;
“It’s easy to use. I just didn’t know that I had to follow the instructions blindly”
“It was not hard at all. Actually, it was easy”
“It’s easy to use but I’m a bit disappointed because I couldn’t choose the items that I want”
“I spent my time choosing the items I liked, until I realized that not all of them could be selected, only a few of them work. So I thought my trouble was just not being free to choose”
Before I conducted this usability testing, I already did the same thing using the other design version. Yes, I did the test twice. But, the success rate was only 45% which means terrible. After the test, I asked them about their obstacles and their answer was they couldn’t find the salon. Many of them gave up before the task was completed. That’s why I redesigned the high fidelity. The first step that I took was to revise the information architecture on the home page.
I did some revisions to my previous design. Here they are;
- Changed the position of the most visited salon. In the old version, the most visited salon was on the search page. The users have to click on the search bar on the home page first to find their usual salon. After I conducted the first usability testing, I realized that was not appropriate. That’s why they were struggling to find the salon. Why did I put it on the search page while it could be put on the home page?
- Redesign the whole home page. One of the goals of this product is to help users to find salon recommendations quickly and easily. It is important to place these contents on the page where users can see them directly. Besides that, I also removed the categories because I thought it was not necessary. This app is not e-commerce which has specific goods to find. For the discount banner, I relocated it to the new page namely deals because the first thing users look for is a salon, not a discount.
- Split the beauty treatments based on the category. The reason is to help users to find the treatments quickly without too much effort so that they don’t have to scroll too far.
- Revised the available slot. This old version won’t solve the problems that I mentioned before in the scenario mapping which is the queue is too busy.
Lesson Learned and Outcome
In order to write this case study, I had to think critically to solve the problems. I thought of many possibilities to design solutions. Even though I have done a lot of things, this case study is still not perfect, there’s so much space to improve and iterate over and over. There were so many ups and downs but I had to be consistent and focus to make it till the end. At least, for now, I think it’s enough. If someday I have an opportunity to update this case study, I will make it.
So, this is my case study. I hope this is helpful for you.
Thank you for reading 🤝🏻💖
P.S: All of the icons, illustration, and picture was taken from Freepik, Undraw, and Unsplash.
If you want to discuss with me about design or project, just contact me here firstname.lastname@example.org