top of page

Hair cut booking app

Team goal

          As a team of 3, with limited time, identify a people problem or challenge associated with the idea of scheduling. This can be as brad as scheduling a haircut to a medical procedure or even a driving test.

How might we

We understand that there are already many apps on the market to help people manage their appointment, and almost all the hair salon provides ways for customers to book and cancel their appointment. So, how might we design something different to stand out from all others?

People problem

          Online appointment systems have gradually become a new trend, but many hair salons still take reservations on the phone. These include some small barbershops and freelance hairstylists, who often do not have enough funds to invest in online booking platform development.

          However, regular phone appointment scheduling has the following pain points: First, clients need to call the shop during working hours. They will also need to call to cancel the booking. Secondly, if clients want to cut a particular hairstyle, they usually have difficulty finding the right professional hairstylist. Third, clients generally cannot get detailed information such as prices and services until they arrived at the hair salon. It's not easy to find all the information they want to know in advance.

          This project focuses on optimizing the haircut booking process so that users have a better booking experience.

Home.png

Browse Hairstyle

barber list.png

Matches Stylist for Selected Hair Style

Hair style.png

Hair Style Intro

Barber detail.png

Stylist Detail

Home-1.png

Apply Filter for Search

Manage bookings.png

Booking Managing

Check ONO, my most recent project!

Prototype video

My contributions

          I Nailed down the idea and the structure of the app with sketches. Also, I helped to prototype, generate and post our user-testing, improve the prototype with feedback, and present our work to the class.

User story

          As a user, I want the platform to recommend a haircut that suits me and make a list of hairstylists closest to me. I want to get reminders when the scheduled time is about to arrive and give me the option to cancel and change my appointment. I hope to complete the entire booking process quickly.

The idea

          I proposed an idea that was quickly endorsed by the team, which is to create a system that suggests users the best barbershop or hairstylist based on what hairstyle they want, instead of suggesting the shop that has the best overall ratings.
This idea is especially beneficial to people who live in countries of immigrants like Canada or the United States. For example, as an Asian, I live in a place where most of the population is not Asian. If I want a haircut, the map would suggest me to go to the barbershop that was rated 5 stars, however, the workers there may not be able to make the
hairstyle I want because I as an Asian have a different skull shape, hair texture and cultures. The vast experience of haircuts they had cannot be directly applied to me.
People need help to direct them to the places that are the best fit for their individual, instead of the location that is suggested by the most majority.

User flow

userflow.PNG

          We made a user flow chart with Figma to plan out our app, the user will start from the discovery page, where all the possible hairstyles are listed here with images. Then, they can apply keywords to filter the information and pick the one they liked. If the users picked a hairstyle, the system should allow them to find a barber who is especially good at cutting this style which is promoted by the barbet themselves and rated by other users. After that, the users can decide the details of the appointment and set up a notification to remind them to go to the appointment.

Sketch

sketch.PNG

          Most of the time, drawing is my strong suit. I made some sketches, and make changes to them based on the suggestions of my teammates. The sketches are good to help the team to have a general idea about how the app should look like. It is fast to draw and easy to edited, which is a very efficient way to design during the early stage

Wireframe

wireframe.PNG

          We first built a low-fidelity prototype for testing and reviewing inside of the class, after absorbing all the suggestions we got from the class, we then created a high-fidelity prototype for user testing on Usertesting.com.

High-fidelity prototype

0_edited.png
2_edited.png
5_edited.png
6_edited.png
7_edited.png
8_edited.png
9_edited.png

User-testing

What are we trying to learn?

  • Is the experience of scheduling a haircut appointment efficient and enjoyable?

  • Are users encounter problems and get stuck. For example, Confusing navigation and misleading buttons.

  • Does it require additional explanation and guidance?

  • Are there any pain points when scheduling an appointment?

  • Where we can make improvements and what really matters to users?

Hypothesis

Key Questions

  • What was the best/worst thing about this app experience?

  • Have you had experience with scheduling haircuts online?

  • If you could change one thing about this mobile app, what would it be? What did you like about the site?

  • On a scale of 1-10, how familiar are you with haircut booking?

  • Overall, what’s your experience been with this app?

  • What was the best/worst thing about this app experience?

  • If you could change one thing about this mobile app, what would it be?

  • What did you like about the site?

  • Can users find what they’re looking for?

  • Do users love and want to tell their friends about this app?

 

  • Some users do not know what kind of hairstyle they want, and they are pleased to accept the recommendations from the platform.

  • Users want to book an appointment quickly and get automated notifications such as confirmations and reminders. They would like to have an option to change or cancel the booking anytime on the app.​

User-testing results

After user testing, here is part of the results we received.

 

Capture_edited.png
Capture2_edited.png
  • The user wants to add a nearby locations option on the filter page to find the stylist closest to them quickly.​​

  • Users want to add a view more button at the bottom of the discover page to know more pictures are coming.

  • Users hope that the stylist's information is more detailed, such as the city where they live and whether any of their friends have used the services he provides.

  • When the user clicks on the favourite icon on the bottom menu, it returns to the homepage.

  • The user does not understand the meaning of the address icon on the stylist page - (need to replace the icon or add some text to explain the purpose)

  • The tick icon that users see on the success page should be green instead of red.

 

More to consider

  • The hairstyle pictures are not so attractive to the user ( We need to do some research and choose the most popular hairstyle to display on the homepage).

  • Users would like all interaction is active. They want to choose according to their own wishes, rather than just set the scene for them, for example, "you now need to select the mid-length man hair". However, due to time constraints, our app cannot achieve all functions.

  • Users want us to consider adding a payment process for them to choose whether to complete the payment in advance before going to the haircut.

​

Note: We will try our best to complete the above areas that need to be improved, but we may not address all the issues due to time constraints.

 

Final prototype

0_edited.png
1_edited.png
2_edited.png
3_edited.png
4_edited.png
5_edited.png
6_edited.png
7_edited.png
8_edited.png
9_edited.png
10_edited.png

Link

noun_back_3869766_edited.png

Check ONO, my most recent project!

Designed and created by Zhouquan Peng

All rights reserved

297 Oak Walks Dr, Oakville, Ontario, Canada

pengzhouquan@gmail.com

bottom of page