Designing a Mobile App — A Hair Affair

Have you ever had a bad experience at a hair salon? Together with my team mates Nate and Heleena, we embarked on a two-week project to explore the potential ways to improve the user experience of hair salon customers via a dedicated mobile app, to enhance customer engagement, increase customer retention rate and cultivate strong customer loyalty.

Salon Vim Website

We decided to focus on Salon Vim, one of Singapore’s leading salons with a large clientele base of tech-savvy social media influencers, showing promise in terms of a strong user adoption potential in the mobile app market.

Platform Selection

The Salon Vim website does not have detailed information on its stylists and services, nor does it have a booking feature. We chose not to build upon the website, centering our design on a mobile app platform as it would allow more flexibility in terms of interacting with other phone capabilities such as the camera and push notifications.

In addition, the prototype app in this project was developed for iOS and we used UI elements which follow best practices found in Apple’s iOS Human Interface Guidelines.


We identified a number of potential pain points of customers at the onset of this project, which include:

  • Not being able to communicate your preference to the stylist clearly
  • Not being able to visualise the eventual haircut and hair colour, and not getting what was desired
  • Not knowing the track record of the stylist assigned to him/her when going to a hair salon for the first time
  • Not having a record of past haircuts or treatments to show the new stylist
  • Not knowing the potential damage the treatment will do to your hair and your wallet

We will be designing a mobile app to remove these pain points. In addition, we will streamline the process of appointment booking and scheduling slots for both customers and the business, to increase operational efficiency by minimizing the number of missed customer calls due to engaged lines and wait times.

According to Phorest, beauty salons who provide the ability to book online have on average, a 29% higher turnover. Thus, enabling online appointment booking could maximize Salon Vim’s potential revenue.

Research Methodology

Our team studied the habits and behaviours of hair salon customers to understand the features they would need on a mobile app. Our research methodology ranged from user research interviews with customers, contextual inquiry with observations made at salons and interviews with stylists, autoethnography (putting ourselves in the shoes of a user) to desk research on other apps and the state of technology.

To understand our potential users, we sent out a screener survey to find out about their haircut habits and their last salon experience. We selected 6 out of the 51 respondents for in-depth user interview.

User Research Interviews

They were chosen to represent various types of customers, such as one who always chooses a different salon, one who just had a color job, one who was satisfied with the previous haircut and one who was not satisfied with the previous haircut (a rating of 3 out of 5 was considered unsatisfactory).

During the interviews, we asked them about their last experience at the hair salon, what affected their choice of salon, stylist, and hairstyle, and about the last time they regretted a hair service, among other questions. Here are some of their responses:

Quotes from the Interviews

Next, we went to a hair salon to interview some stylists. We learnt that stylists do place importance on the hair treatment history of a new customer. They would reject a customer if they think that the customer has had an incompatible treatment done recently.

Contextual Inquiry at a Hair Salon

Interestingly, one stylist with over 10 years of experience told us that she has not encountered a dissatisfied customer. This was at odds with what we heard from customers who sometimes got so upset that they never return to the same salon. We inferred that some customers were not giving honest feedback to stylists and would rather walk away than to confront them.

Autoethnography at Salon Vim

Following that, we headed to Salon Vim at 313@Somerset where Nate and Heleena got a haircut and treatment done respectively. Nate asked his stylist for a haircut recommendation as he did not do any research. To give us a visual of his recommended cut, the stylist showed us a reference photo on his mobile photo before cutting his hair. At the end of Nate’s haircut, his stylist suggested taking a photo so that he can refer to it during future visits. This validated our idea of having a photo record of past haircuts.

As an observer, I noted that there was a lot of hard-selling by the stylist during the initial consultation and it left the customer visibly distressed. In general, customers seemed to trust the skills of the hair stylists and did not comment too much on what they were doing. However, they mostly kept an eye on the hairstylist through the mirror instead of flipping through magazines or using their phones. I drew a conclusion that constant open communication between customers and stylists was an indicator of a good customer experience.

Our research findings also aided us in creating an experience journey for a customer visiting a hair salon.

Affinity Mapping

Affinity Mapping from User Research Interview

We consolidated our research findings and several essences emerged:

From knowing what customers wanted and their pain points, we were able to begin our feature ideation.

360° Photo/ Services Listing/ Personal Hair Journal/ Stylist Listing/ Stylist Ratings/ Leave Private Reviews/ Appointment Booking/ Time Estimate/ Reminder For Next Visit/ Price Quotes/ Promotions/ Lookbook/ Text Consultation


Based on the patterns that emerged from the interviews, we created two personas to represent our users. Kim is our primary persona because she embodies most of the pain points which customers encounter.

Primary and Secondary Personas

Comparative Analysis

We looked at other hair salon apps and service aggregator apps for inspiration and to validate some of our feature ideas.

Feature Comparison — Hair Salon Apps

Some of the must-have features for a beauty app included a service listing, stylists listing, contact information and an appointment booking system. For these crucial features, it was imperative to ensure that they were highly visible and easy to navigate to from all screens. Thus, this formed our initial basis for the bottom navigation tab. To include elements of customization and personal touch points, we decided to design a hair journal for customers to keep a personal record of their hairstyles.

With a large content inventory, the ability to sort or filter services or stylists shortens the search flow for users. This is a feature that we aim to incorporate into our final design as well.

Feature Prioritisation

Due to the number of features generated and the limited time for the project, it was important to prioritize the features to be prototyped.

To narrow down the features further, we compared their relevance to each persona, as well as importance and developmental effort. We would focus on the features which are more important, such as appointment booking and getting a price quotation. The lookbook was deemed not important as users have many other ways of researching and saving reference photos. As for text consultation, it falls within the realm of conversational UI and would require high developmental effort.

Technical Feasibility

We consulted two developers in order to confirm that the mobile app is technically viable. To improve the flow of booking an appointment, we will use mobile AJAX (Asynchronous JavaScript and XML) to selectively refresh a module (calendar, service, stylist) of the mobile app. We also confirmed that it was possible to capture information from the last visited screen to pre-populate forms.

Developmental Sketches

As we only had a timeline of two weeks, we ran a design sprint of brainstorming, sketching and paper prototyping.

Our initial idea for the app was to use a four-tab bottom bar for navigation. The main tabs are Services, Stylists, Profile and Lookbook. These are tabs because they are important features which are accessed frequently, based on our feature prioritization. The splash page will highlight trending looks and promotions. The Book button will be found at the top so that the user can access it from any page in the app.

We drew our design ideas from both competitors and apps with similar features. The diagrams below show how the initial sketches came about.

Examples of Design Studio
Wireframes for Mobile App

Prototyping — Sketch & Principle

Principle Prototype

It was the first time we used Principle for prototyping and we faced some frustrating challenges including creating animations for the transitions between screens due to the numerous screens and the naming of our asset files in each screen. Ultimately, we were able to finish it in two days with a lot of hard work and perseverance!

Usability Testing

There were a total of seven participants in our usability tests, including one Salon Vim regular. They were briefed on the following scenarios and asked to complete the task with minimal guidance.

Before the visit:

You would like to visit Salon Vim after finding out about it on social media. As your dyed hair is growing out, you think that it is a good time for a root colour touch-up.
Please find out how much a root colour touch-up costs, which stylist other customers are recommending for a root colour touch-up, and book an appointment on 20th April.

After the visit:

You receive a prompt one hour after the salon visit. Please leave a private feedback for the stylist who served you and add a photo of your current hairstyle for future reference.

To determine the usability of the prototype, we looked at the following criteria:

(1) if the user was able to complete the tasks
(2) how discoverable the content was
(3) the types of errors made (deviation from the optimal flow / backtracking)
(4) if there was any point of confusion in the user flow
(5) users’ subjective satisfaction in the form of qualitative feedback

We also analysed the test outcomes and design of the app using Jakob Nielsen’s 10 Usability Heuristics for User Interface Design.

The Next Steps

Moving forward, we will be exploring the possibilities of incorporating a 360° photo-taking feature for the hair journal, as well as the B2C text messaging function for hair consultations.

I really enjoyed working with my team and I would like to thank my group mates for the wonderful experience!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.