Consolidating What We’ve Learnt

My approach to this project was to use it as an avenue to consolidate and build upon all that I have learnt in the last three projects. We followed the tried-and-tested Double Diamond method of Research / Synthesis / Conceptualising / Prototyping and produced a research report and a high fidelity prototype using Principle.

The Company

We chose to design a mobile app for Salon Vim*, one of Singapore’s leading salons with a large client base of tech-savvy influencers. With 14.7k followers on Instagram, I was quite surprised that they do not already have a dedicated mobile app to tap into this market.

*Due to the constraints of the project, the app is salon-specific. However our research and design can apply to any salon.

What’s the Mobile App for?

Although it is instinctive to gravitate towards using the app for online booking, we set out to find out what salon-goers really think of the whole salon experience before deciding on what features to include in the app. Our goal was not only to benefit the user, but also to benefit the business by enhancing customer engagement, provide a direct marketing channel and cultivate strong customer loyalty.

We spent the first four days on user research and did it using a number of methods to explore various angles.

User Interviews

A screener survey helped us shortlist six interviewees from a total of 51 respondents, including two who had recently gone to Salon Vim. They were chosen to represent various types of users, such as the user who hops between different salons, the user who just had a color job, and the user who was not satisfied with her previous haircut. We asked them to describe their last salon experience and what affected their choice of salon, stylist and hairstyle. Some patterns emerged immediately; for example, there is usually limited access to information before going to the salon, which can lead to hard selling of additional services at the salon and a rude shock at the end of the haircut.

“The information over the phone was not very detailed and it ended up costing twice as much as my budget.” — J.

Design Idea. The app can list prices according to parameters such as hair length/hair colour to manage the customer’s expectations.

Also, most of the interviewees said that there is nothing they can do about a bad haircut except to wait for it to grow out.

“If the haircut turned out bad I’d curse to myself and never go back.” — V.

Design Idea. To help mitigate this feeling of helplessness, we could allow users to leave honest, anonymous feedback on the stylist.

We used an affinity map to put all the interview findings together to look for more common themes. They are:

• I Care A Lot About My Hair.
  There are customers who put in effort into researching on their next hairstyles and who know what is suitable for their face shape.
• My Hair Does Not Define Who I Am.
  On the other end of the spectrum, there are those are less fussy about their hair and rely more on the expertise of the hairstylist.
• Price Matters!
  There is no transparency on the costs involved.
• Can I Trust You With My Hair?
  Customers don’t know what different stylists are good at — some may be better at perming and others at colouring. They rely on reviews on word-of-mouth recommendations. They also feel like they are at the mercy of stylists once they are in the hot seat.
• Why Am I Waiting?
  Customers dislike waiting for their haircut, especially after making an appointment.
• Can You Please Speak English?
  A small group of customers face communication issues with hairstylists who do not speak English.
• What’s Done is Done.
  One of the biggest pain points for customers is being unable to do anything about their dissatisfaction after a terrible hair service. Their only solution is to wait it out and simply stop patronizing that particular salon. This highlights the importance of credible reviews of the skills of hair stylists.

More Design Ideas. The trust issue was a particularly big source of pain points, especially for new customers going to a salon for the first time. Features which could help relieve the source of anxiety include telling the user which stylists are recommended for a particular service, and allowing users to endorse the stylist skills, like in Linkedin. Also, a gallery of the stylist’s best works can help to allay the customer’s fears.

Autoethnography

I also tried out Salon Vim for myself and got a haircut! Despite not making an appointment, I was attended to immediately and my stylist gave me his recommendation after studying my hair and head shape. He showed me a reference photo to get my agreement before making the first cut. I was not very satisfied with the hair wash, however; but did not make a fuss about it. At the end of the haircut, my stylist encouraged me to take a photo of my hair so that I can show it to him on my next visit.

Design Idea. Such photos could be uploaded to the app and saved in a hair journal. The user could make notes on whether he/she liked it or not. In fact, many customers already do this on their own social media accounts— there are 9,800+ photos on Instagram with the hashtag #salonvim.

Contextual Inquiry

We also visited another salon to interview more stylists. It was a challenge because the stylists there do not speak English. We learnt that stylists do care about what treatment the customer has done recently and will reject the customer if he/she requested for an incompatible treatment. One of the stylists also mentioned that she has not encountered a dissatisfied customer, which was at odds with what we heard from our users. This reinforced our idea that customers would rather walk away from a salon to find a new one than give feedback to the salon.

We had earlier discovered in our interviews that a few users are quite put off by the language barrier as they cannot clearly describe what they want to the stylist in Mandarin.

Design Idea. During booking, we would allow the user to state his/her preference. Even if the stylist cannot speak English well, an intermediary could help out during the consultation.

Where did these features show up in the end?

Some of these initial ideas were validated through further research and testing and made it to the final design of the app, as shown in the screenshots below.

Desk Research

Besides studying users, we also looked at competitive/comparative apps and ongoing trends in technology.

Beauty Apps and Aggregators

Apps which allow users to book appointments with multiple beauty and wellness services are rising in popularity. Some examples are StyleSeat, Vaniday and Vanitee. While not a direct competitor, they do encourage salon-jumping behaviour and our service and app would have to work extra hard to create customer loyalty. For example, we could offer exclusive promotions and discounts to the mobile app users. This is one of the reasons why promotions are displayed prominently on the home page of the app.

We also studied these apps to see what sort of features they have and how they are presented to the user. For example, most of their stylist profiles have a fairly consistent layout of a gallery followed by tabs on services, biography and reviews. We adapted the design for our own Stylist Profile pages.

Haircut Visualisation

In our initial brainstorming, we thought it would be a good idea to have a visualisation feature, such as the one found in L’Oreal Style My Hair app. It superimposes a hairstyle on a selfie and provides options for shading the hair with different colours. Although it is a fun feature, we found that it has many limitations (the number of hairstyles would be limited to a few) and it would seem gimmicky after a while. We decided that it is of low priority to the user and removed it as a feature idea.

Spatial Photography

For the hair journal, we thought that besides uploading a regular selfie, adding a 3D selfie would capture all the facets and subtleties of a new haircut. The technology to do this already exists (see Fyuse), but there is currently no API available to integrate this with our app. This feature could be explored in the future.

Ideation

Persona

After generating a list of features, we needed a persona that can help to validate those features. We used the affinity map to create two personas — Kim, the newbie and Ron, the regular.

Experience Journey

Kim is our primary persona and we mapped out what she would typically experience when going to the salon. She would be doing some research before going and depending on the stylist she gets, she might regret her haircut afterwards. There are two dips in the emotion curve — when she is nervous about whether her stylist can do what she requests for, and at the end when she thinks that the haircut is not worth what she paid for. These are areas of opportunities for the app to enhance the experience, by giving her the knowledge that the stylist is credible, and by stating the estimated price of the service when she books an appointment.

Feature Prioritisation

For the prototype, we prioritized features which would be important to Kim, which includes appointment booking, service/stylist listing, stylist reviews, price/time estimates and a hair journal.

Design and Testing

We designed a paper prototype followed by a digital prototype and subjected them to usability tests. The key design elements are:

• A persistent bottom navigation bar with the most frequently accessed features, which are Home, Services, Stylists and Profile.
• A persistent book button at the top menu so that users can book from any point in the app.
• On the booking page, the user can choose to book by calendar, service, or stylist as we found that different people have different selection criteria and priority. Some may want to choose by time as they have a free time slot while some have a fixed regular stylist to go to.

We followed Jakob Nielsen’s Usability Heuristics and iOS Human Interface Guidelines for the design. For example, we gave users Flexibility by allowing users to search for a stylist either through the Services tab, or a search refine menu on the Stylists tab. We also designed for Recognition rather than Recall by pre-populating text fields during booking (if a user taps on ‘Book’ on a Stylist Profile page, the stylist’s name will be filled in, but if a user taps on ‘Book’ on a Service Detail page, the service will be filled in.)

Usability Test Participants

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

Scenarios

Two scenarios were tested.

• Before the visit. We asked the user to check for how much a root colour touch-up (Kim’s roots are showing) and which stylist other customers recommended. The user will then book an appointment.
• After the visit. One hour after the visit, the user receives a notification on his/her phone. The user decides to leave a feedback for the stylist and add a photo of his/her current hair for future reference.

Metrics

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;
4. If there was any point of confusion in the user flow;
5. Users’ subjective satisfaction in the form of qualitative feedback.

Findings

We made notes on how the users went about the tasks as they did it, and made changes to the design iteratively. The key changes were:

• In one of the menus for refining search selection, users did not know where to tap to apply the changes. We added an ‘Apply’ to the menu.
• Initially there were three ways to give feedback to a stylist, through star ratings, expertise endorsements and text reviews. That was a bit confusing to users and we found star ratings more relevant to aggregator apps, so we removed the stars. We did not want to pit stylists against each other as it might be detrimental to their morale. Instead we would promote them by having users endorse their skills and elaborating on text reviews.
• Our original intent for the feedback function was to tag it to the Appointment Detail page. However, most users tried to leave feedback on the Stylist Profile page rather than on the Appointment Detail page. We added the option on the Stylist Page subsequently.

The App

The app map below provides a quick overview of the various screens in the final prototype.

These demo videos show a user performing three different flows — searching for service and stylist, making an appointment, and leaving a review and adding a photo.

Next Steps

If we had more time, we would have liked to explore a feature which can further set the salon apart from its competitor — B2C text consultation and messaging. This would enable customers to ask questions without calling in and presents an opportunity for Salon Vim to provide personalised content.