A Hair Affair: Designing A Mobile App To Improve Salon Vim’s Customer Experience
For this project, my team (comprising of Nate Ng, Cassandra Lai, and myself) chose to focus on bettering the experiences of salon-goers. We narrowed this scope down specifically to Salon Vim — a popular Singaporean salon chain with an active social media presence and large customer base of youth that are relatively adventurous with their hair. This demographic and the company’s current usage of Instagram were significant factors in our decision to work on a mobile app.
Our research was undertaken through:
• Desk Research
• Competitive & Comparative Analysis
• Contextual Inqiury
• Stylist Interviews
• User Interviews
And synthesized through:
• Affinity Mapping
• Construction of Personas
• Mapping of an Experience Journey
Using these findings, we embarked on the Ideation & Design processes of:
• Feature Prioritization
• Constructing User Flows
• Constructing an App Map
• Assessing Technical Feasibility
• Heuristic Analysis
• Prototyping (in low-fidelity, mid-fidelity and high-fidelity)
• Usability Testing
We dispatched a screener survey to filter out users for our interviews; selecting a variety of salon-goers. From the 51 responses we received, we spoke with users that frequent a fixed salon, tend to salon hop, change their hair frequently, always get the same hairstyle and have had good experiences as well as bad experiences.
This range of users was selected as each type of user makes up a significant percentage and we hoped to make our app beneficial for all potential Salon Vim customers by extracting the commonalities and understanding the differences in the experiences of these different types of customers.
Some of our standard interview procedures was asking about the interviewee’s most recent salon experiences, the factors that affected their salon, stylist and hairstyle choices, and for them to tell us about their last bad/regrettable hair service experience.
We picked out the significant quotes from these interviews and wrote them out on stickies according to this key:
Red = Pain Points
Teal = Pleasure Points
Blue = Behaviour
Yellow = Context
These stickies were then organized chronologically to depict a collective Experience Journey:
The findings of this Experience Journey was later consolidated into the following digital map and used throughout the project as a reference point for our design.
Following this, we reorganized the stickies into common points which constituted these core ‘affinities’:
These affinities were analyzed according to the number and types of points in them as well as the users which those points came from and connected to the customer statistics obtained through our Screener Survey and Contextual Inquiry in order to construct our two personas. Kim became our primary persona and Ron became our secondary.
At this point, we were focused on that users:
• tend to do research prior to major hair services.
• are concerned with the price of services & have had negative experiences due to lack of information in this area.
• are concerned about stylists’ skills, consistency & comprehension levels — especially when they do not have a regular stylist.
• dislike the long waiting times — both waiting for the appointment & waiting while the service is taking place.
To confirm these findings, understand them better and find out the salon perspective, we embarked on interviews with two stylists, Contextual Inquiry and Auto-ethnography.
During the two stylist interviews, we found that it would be difficult to provide users with the pricing and timing information they desired beforehand as it varies greatly between people and even pictures would not help stylists accurately determine the texture and quality of a customer’s hair.
We were also told that the stylist (with over 10 years of experience) had never encountered a dissatisfied customer. This was interesting because our interviews had indicated that unsatisfactory hair services were not uncommon. We speculated that customers perhaps simply did not voice their negative opinions to directly to the stylists and later confirmed this with other salon-goers.
Additionally, it was interesting to note that in-line with some of our interview findings, the stylists interviewed were not comfortable speaking in English so the interviews were conducted in Mandarin.
For the Auto-ethnographic research, Nate and I had hair services done at Salon Vim while Cassandra conducted a Contextual Inquiry.
This Auto-ethnography/Contextual Inquiry gave us a much better understanding of the workings of Salon Vim specifically, therefore helping us to tailor our design more to suit their needs.
We confirmed the tendency to stay silent when dissatisfied as Nate did not voice his issues with the hair washing service.
One of the design ideas we had been contemplating was also parially validated through this Auto-Ethnography. It is a Hair Journal feature which helps users track their hairstyles through photos in order to be able to reference past looks both for their own decision making and to assist the stylist’s visualization. After Nate’s haircut, his stylist suggested he take a photo so that he (the stylist) would be able to replicate it.
Another thing we noted was the lack of clarity and information provided to customers. I enquired over the phone about a certain service but was not given much information even when I probed for it and this led to some confusion when at the salon. I ended up doing a completely different treatment from the one I had called and enquired about as I had misunderstood or been misinformed of the procedure.
This miscommunication began with the receptionist but I had assumed that the stylist would be more knowledgable and therefore able to give me a clearer indication of the various treatments and their benefits but he also could not articulate this.
Finally, the price was something especially important to me as I was only carrying $100 with me because I was told over the phone that the treatment I had wanted was $80. It took a great deal of insistence before the stylist gave me a definite cost and I had to explicitly ask for the total inclusive of all taxes as he initially quoted the price excluding the extra charges.
During the Research phase, we had also conducted some Competitive & Comparative analysis to understand what is currently available to our users, what is doing well and what can be improved on. This influenced some of our essential features (such as booking and service listings).
Combining the findings of this analysis with those of our other research methods, we came up with a list of 13 features which needed to be prioritized. We therefore evaluated these features in relation to our personas and placed them on an X/Y axis of Importance and Effort (in regards to development).
The outlines stickies in the second picture show the features which we had initially decided to follow through on incorporating, however we later added the Time Estimate feature. We also decided to continue to work on the 360 Photo feature as it would be exceptionally useful for both users and stylists to be able to see a full visual of a customer’s hairstyle although the developers we consulted with informed us that it is not currently feasible within a budget or time constraint as it is very technically advanced and there is no available API.
To determine the contents of the bottom navigation bar, we sorted the features again into an axis of Importance/Frequency.
From this we selected the Service Listing (which would incorporate the Time Estimate and Price Quote), Stylist Listing (which would incorporate Stylist Ratings & Reviews), the Personal Hair Journal (later changed to “Profile” which incorporated a “Hair Journal” section), and Lookbook.
The Lookbook, however, was later changed to to “Saved Looks” and eventually taken out due to confusion and the realization that while users do frequently look through hairstyles, they do so on various other platforms and this app is unlikely to take over those. It is not currently a problem for our users and not an aim of ours. The fourth tab of the bottom navigation bar therefore went to a “Home” screen which displays trending looks (therefore incorporating some elements of the Lookbook without taking away from the primary purpose of the app), promotions and contact information.
In addition to constructing the bottom navigation bar, this axis influenced the decision to place a “Book” button in the header on each page as although it is not used very frequently, it is the most important function and one which users are likely to wish to access on any page.
For our initial sketching process, we took another look at some features in other apps and combined this analysis with our other research findings to design the interfaces of our three primary features. Below is an example from the Services page:
These sketches were refined to form our first prototype — a low-fidelity paper prototype — which we used for two Usability Tests.
Some of the key findings of these tests were that:
• users were unclear of the Hair Journal feature due to the “+” as the first image
• users got confused between Hair Journal & Saved Looks
• users did not understand what “time” meant (estimated time)
After altering our design according to the results of the Usability Tests and some Heuristic evaluation, we tested out a mid-fidelity digital prototype that was designed on Sketch and built on InVision.
This time we tested on only one user but he could complete all tasks, although with some minor difficulties.
We had previously discussed the booking flow and had decided to make it flexible for different users as our research showed varying priorities. Therefore, we chose to display the options of booking by calendar, service or stylist to ensure that users get the aspect most important to them as the options would filter down through the flow according to availability based on their selections.
This Usability Test validated that design choice as our user attempted to book by a different means. Unfortunately, our prototype was not fully functional and he was unable to continue with his desired flow but we obtained the necessary information nonetheless.
After implementing some minor changes, we proceeded to construct our high-fidelity prototype on Principle. This was tested on 4 users and worked very smoothly; we only made minor adjustments to language and the smoothness and functionality of the prototype after the first test, following which the next three all went very smoothly.
Throughout the Design and Usability Testing process, we kept Jakob Nielsen’s Usability Heuristics in mind in order to ensure an intuitive user experience. This table depicts the Heuristic Evaluation of our final design:
Here are screen recordings of the final versions of the three flows tested with our users: