NENAD VASILJEVIC
Case study: Designing a salon booking application.
UI & UX design
.png)
ROLE
Product Designer
User Research, Interaction, Visual design, Prototyping & Testing
Januar 2023 - Ongoing
A case study of how I designed an application for viewing and scheduling appointments in a hair salon for women and men.
It’s no secret that we all have been pissed off by the tiring long queues and delays at the salons. Well, at least I have. 😀
This idea of creating an application where a user can view and book appointments at his favorite hair salon was pitched to me by one of my friends while I was at college. We did basic research about the possibility of this project. We asked around several salons in Loznica (my hometown) but unfortunately, we found out that this could not be implemented here due to some other problems. So we had to ditch this project. 🙁
Recently, while I was surfing through my old files, I found this project material, which made me think why not create this as a mock project where I could hone my skills. I started working on this project from scratch and created screens for mobile.
Research
As an initial process, the problems faced by customers were taken into consideration. A general inquiry about problems faced by people at salons was conducted among my friends, who come from different parts of Loznica (So we could get a general idea from the different areas).
The Problem
After the initial idea is collected, the problem is identified. According to a study conducted by professors from Belgrade, the health and beauty salon industry in Serbia is growing exponentially. But with the rapid growth of this industry, customers face many problems, such as:
- Customers can't find or maybe don't know about a salon they've heard of
- The services that each salon provides may be different. There is no way to get to know them other than direct contact with salon employees
- The customer has to waste time on the phone trying to find an available appointment and the appropriate service
- The customer has to wait in line to get their turn, which can lead to wasting time.
The Solution
Addressing all the problems, solutions were found for them.
- Following the map found in the application itself, the customer can easily find the salon.
- The salon lists the services it provides, along with service details and times for each of them. This allows users to select the desired service. Since the time required for each service is provided, they can find the approximate time required for the services.
- When booking an appointment, the user has an insight into which time slots are free and thus there is no unnecessary waste of time on the phone.
- Reserving a place for the desired salon will solve the problem where customers have to wait in line. Overcrowding can be avoided and the user can save a lot of time.
About the User
The targeted age group of customers for Salone is between 16 and 50. They can be defined as people who hate to waste time, loves technology, the internet, and have the opportunity to explore and discover new things.
Knowing the user can help in fine-tuning the product, while also making the product accessible to all.
My idea is to advertise the application and introduce it to mass use through various promotional campaigns, so that the workers in the salon would distribute promotional material such as lighters, pocket calendars, USB sticks with a QR code. The code would allow users to install the app without searching the app store.
User goal
From the received data, the user's goal is identified. The goal of the user is to find and schedule an appointment in a certain salon without any difficulty. They want a seamless process from finding to booking an appointment with ease.
The value of this project to the user
When we create a product, we should always consider the value of the product we are creating. In this case, the value to the user is:
- The user can easily find the salon.
- Sometimes we want to try some variations from our regular ones. This will reduce the time spent searching for something new.
- Elimination of unnecessary phone calls due to booking an appointment
- Eliminating salon waiting periods can improve customer experience.
- Users can always find new offers available in their favorite salon
The value of this project for salon
When creating a product for the public that can drastically improve their lives, the business of the product should also be taken into account. The salon may make a small profit as a commission from each booking. In addition, salon employees no longer have to talk on the phone and manually enter scheduled appointments, which significantly affects the productivity, concentration and profit achieved by the salon. At the end of the working day, employees have an overview of the list of reservations for the following day, so they can better organize themselves and prepare material for the next working day.
User flow
The next step was to create a user flow. Creating a user flow helps us determine the correct flow and user needs. In this case, I focused on creating a user flow mainly on choosing a service and booking an appointment at the salon, as this is the main function of Salone.
User flow
Colors
Yes, colors are important. Choosing the right color can evoke emotion and allow users to connect. For this salon application, I decided to use a variation of brown and beige as the primary colors, which are associated with elegance, vintage and old barbershops and beauty salons.
The primary color is used as the brand color and its variations are used along with monochromatic colors as secondary colors.
Typography
Personally, I prefer not to use more than 2 typefaces. In this case, I used 2 typeface for the entire project with different fonts. We really can bring hierarchy to our design just with a 2 typeface using different fonts of size.
For login, registration and profile settings forms, I used typeface named Inter, and all in the Regular version.
For the rest of the design, I used typeface named Helvetica 35 Thin , Regular or Italic font.
Wireframes
Creating wireframes can help us to decide the layout before starting visual design. There are various tools to create wireframes, but I still prefer to sketch out ideas using pen and paper. It gives us flexibility while ideating. After the initial layout is set, I converted those sketches to high-fidelity wireframes. Sorry for the messy handwriting.
Wireframe sketch
Wireframe high fidelity
Splash and Register Screens
Initially, I created the splash screen and the register screens. Splash screens consist of salon branding on a primary color background.
Registration can be done by entering an email address and desired password. Users can also continue registration using social sign-ins. Social sign-ins are one of the most used registration processes, so it is placed at the bottom where users can reach them easily.
Visual Design
Since the layout and flow are sorted, it's time to create the visual design. I followed the grid system for the entire design and followed the wireframe.
Splash and Register screens
Home Screen
The home screen contains a welcome message, a display of the logged-in user's profile picture and a sandwich menu that leads to further actions. On this screen, the user should choose whether he wants male or female treatment in the salon.
Home screen
Choose the treatment, date and time screen
Select service screen is a screen where the user should choose which treatments he would like, then the appropriate date and the available appointment for that day. If the user is not logged in or registered, when completing the booking, he will be redirected to the login or registration screen. After completing this action, he will receive a return message that his reservation is successful.
Chose the treatment, Date and Time screen
Complete booking screens
Sandwich menu and settings screen
By clicking on the sandwich menu in the upper right part of the screen, the user gets the opportunity to access additional options of the application. These are the pages where the user can get to know the stylists employed in the salon, then view a photo gallery of some of the creations, and finally see contact options and a map of the location where the salon is located. On the settings screen, the user has the option to change personal data, password or log out of the application.
Settings and Sandwich menu screen
Content of the Sandwich menu screens
Conclusion
Working on this project was fun, even if I know it was a dummy project. The reason I approached this project as a real one is that I felt this is a solution for a majority of people. I think this was a problem worth solving so that people could save their time as well as resources.