Personal UX concept project | 2 Weeks | Individual

I created a new app concept for a hair salon in order to improve customer satisfaction and trust — Virtual Hairality!

This was a solo project I took upon myself, after having a few unpleasant experiences at the hair salon I was keen to understand if others were going through a similar situation and what could be done about it. This project was purely a concept project.

Software used: Sketch, Balsamiq, Marvel & Adobe Illustrator.

The problem we face

“I didn’t want that style of haircut; I want my money back!”

Having your hair cut by a new hairdresser and/or visiting a new hair salon can cause some degree of anxiety, it’s not like you can always press the undo button. Although there are more worrying things in life, having a potentially unsatisfying haircut shouldn’t be one of them. How many times have you had your hair cut at a salon, haven’t complained, but walked out knowing you’ll never go there again?

Hair salons, like other companies offering such services, face the struggle of customers getting a haircut but never coming back due to dissatisfaction. Reports indicate that 96% of unhappy clients don’t complain when they are dissatisfied with a haircut, and 91% of these customers leave and never return. Although research shows that high prices are a strong factor for dissatisfaction, it’s an element beyond my control, so therefore this project will focus on other factors.

The objective of the project

To create a digital solution that will minimise customer dissatisfaction at hair salons over the course of 6 months initially, and help salons increase customer retention rate over a year period.

Discovering existing services and what frustrations the public had

I must note that I conducted independent research into studies about customer dissatisfaction with hair salons before starting this project, so I believe conducting interviews to dig into the ‘whys’ was more useful than quantitative research at this point.

In order to investigate what apps were already out there in the market being used by customers and what their main frustrations were when visiting salons, I conducted my research in three phases:

• Competitor research

• Four interviews with two males (aged 29 and 32) and two females (aged 29 and 50)

• One interview with a hairdresser

Competitor research

I found more than 15 hair styling apps and only 3 which were targeted to men. There was also a similar app to Schwarzkopf by L’Oréal focusing on hair colour change only.

Style My Hair: Try on Hair Colours — Focuses on colour change and not the haircut itself. It is mainly for inspiration where customers can create a mood board. It allows the user to take a picture of their face and try on different colours.

Hair Styler App — Enables the user to visualise different hairstyles for inspiration. The templates shown are only examples and do not replicate the individual attributes of the user’s hair.

Hair Expert by Schwarzkopf — Creates a hair profile for the user and recommends Schwarzkopf products to them based on the characteristics of their hair.

Qualitative Interviews: Core findings from understanding users

The general consensus of the interviewees was that they were comfortable getting their haircut at their regular salon, but females would welcome assistance if they were going to a new salon and/or getting a new style.

Key Quotes

Male interviewees:

“I go to the same barber all the time and he knows what style I like.”

“[I] hardly [encounter problems], only once when I first started going to my barbers and the guy was different to the one I have now. It was very minor though.”

“I got a new hairstyle a few years back just to experiment. I saw a style I liked that my mate had and showed a picture to my barber. It was more or less the same.”

Female interviewees:

“I had a terrible experience when I went to a salon while travelling. The haircut I received was not what I had explained to the hairdresser (or so I thought). An online translator would have helped.”

“I usually go to the same hairdresser so I know I will be looked after and also the quality of the haircut I’ll be receiving.”

“I use google images of celebrity haircuts to get inspiration.”

“I wouldn’t go back if I felt misunderstood and the cut wasn’t what I wanted.”

Hairdresser:

“I personally got a complaint because I cut the woman’s hair too short from the back. Our wires crossed when she was explaining what she wanted. In hindsight I should have double checked with her before I cut it.”

Main takeaways

1) People often search for images of a hairstyle they want, but they don’t know if it would suit them specifically. Additionally, there is difficulty in mentally visualising how the haircut would look on them with alterations.

2) There is an element of uneasiness in having a haircut by someone unfamiliar or visiting a new salon.

3) There might be a language barrier between the hairstylist and the customer and different hairdressing terms might mean different things to each of them.

4) Sometimes people don’t know what hairstyle they want and need help deciding visually.

Defining a vision from the research in order to create a persona

Now that the research uncovered some more insight into the problem, I identified the key participant in the journey — Kayleigh Pieters, for whom I focused on to outline her main challenges and goals. The creation of the persona humanised the user research and served as a reference point for the next phases.

The problem statement I focused on was therefore…

Kayleigh needs a way to know that she will get the haircut she’s requested, because she wants to be satisfied with the result and avoid any ambiguity.

Ideating for a path forward: how might we design a solution that…?

• Minimises misunderstanding between the customer and hairdresser?

• Is a single source of truth for both parties?

• Translates the customer’s needs seamlessly to the hairdresser?

• Requires little to no effort/mobility for the customer?

Ideas

After spending hours deliberating on different ideas and sketching concepts, it came down to three potential solutions:

1) An app where the customer can create their own style on a mannequin’s head by adding and removing hair, changing colours and other functions. They can use any sort of inspiration to create the exact look they want according to their specific hair characteristics e.g. their thickness and colour.

2) An app that does all the above, but instead of using a mannequin/dummy head, mapping their exact face and head so they can visualise how the hairstyle looks on them specifically.

While these ideas were viable, they didn’t incorporate advice from the hairdresser or the ability to bridge the link between both parties. It felt just the same as giving the hairdresser a picture and asking them to copy the style. The customer would still want to feel understood and satisfied that they were receiving the right haircut.

3) A tablet app which creates a 3D visual of the customer’s head and current hairstyle to see the haircut from all angles. It will be used primarily by the hairdresser to create the style using in-app tools, based on their initial understanding of what the customer wants. It will be shown to the customer, at which point the customer can alter the haircut and customise it to their liking, should they wish to. It will be intuitive enough for both parties to understand and use. The tablet will be integrated into the wall of hairdressing salons and attached by a cable so the hairdresser can map their customer’s head while the customer is sitting on the chair. This takes inclusive design into account for those customers who are less able to move.

What makes the app unique?

It will be used by the hairdresser and not the customer, with advanced hair cutting functions for the customer to visualise what their haircut will look like before it’s cut. It supports the ability for the customer to converse with the hairdresser through the use of the app to create a satisfying experience.

Assumptions

• We assume that there is technology available which can map the customer’s head.

• We assume that the technology will support the in-app functions.

Developing the idea through a storyboard

By creating a storyboard, I was able to identify the main events that would take place when the user visited the hair salon. It facilitated my understanding of the user’s thought process and how the app would play a part in their journey of getting a successful haircut.

Rough design in-situ

Below is a rough sketch of how the tablet will sit within the cavity wall of the salon, attached by an extendable cable:

Building the app: specific functions

• The ability for the customer to create a personal account and save previous haircuts.

• The hairdresser can take a screenshot of the haircut to send directly to the user.

• 3D mapping of the user’s head

• Hair cutting/styling functions

Creating the Information architecture (IA)

This app map has been designed with the user’s motivations and needs in mind to get a quick and efficient haircut if needed, but with the option to save their new hairstyle at the end of their appointment if they intended to revisit the salon and view a saved haircut. Creating the IA uncovered several obstacles -

1) There could be 50+ tools needed within the app to cover all hair style bases from trimming to colouring and perming - how can they all be incorporated?

2) Some customers might not want their whole head mapped. In an instance where they only want a fringe, they should be given an option to only map the front of their head. - Will there be an option to do so?

3) There could potentially be an issue with data privacy, so there should be an option for the customer to delete all their data if they want to. - Can they delete all their data?

…and more! This process threw up more questions than answers while I sketched out multiple app maps. In the end, I weaved in all the considerations I could think of from my user research and thinking. It would be important to launch a minimum viable product (MVP) with the most basic functions and requirements first and then iterate once there is uptake.

The low-fidelity wireflows

After creating the IA and two rough app build sketches, I understood what the wireflow would look like and created them using Balsamiq. This process enabled me to visualise how the functions would be placed within the app and how intuitive they would be. As hairdressers would be using it during exceptionally busy periods, the functions needed to be as clear as possible for both the customer and hairdresser.

The next step would have been to conduct usability tests with the above wireflows. I initially planned to create paper prototypes of the screens and conduct tests with my all my interview participants. However, due the the outbreak of COVID-19, it was impossible to conduct the usability tests in person due to social distancing rules. I then planned to conduct usability tests online, but it was difficult to secure the interviews given the situation and the cost of recruiting external interviewees was a major factor for me.

I decided the best route at this stage was to create the mid-fidelity prototype and conduct the usability tests online after this, with the aim of testing out the interactions, user flow and terminology.

Mid-fidelity prototype + usability tests

Below is the mid-fidelity prototype I created using Sketch and Marvel. I carried out the test virtually with three of the original interviewees, including the hairdresser. It was important for me to watch them talk through their process through a video call while they conducted each task, and to speak out loud. This gave me the opportunity to see their facial reactions while navigating through the app to spot any difficulties. I made it clear in the usability tests to focus on the functionality and not the colours.

The usability tests highlighted that:

• Overall it was easy to navigate around the app and the labelling was clear.

• That it wasn’t immediately evident who the app was built for.

• The mapping functions were confusing and it was easy to lose track of what you have taken a picture of.

• There were too many tools to choose from, which was overwhelming.

This was extremely useful to know for future iterations. It should be noted that the prototype is still very much in its infancy and extensive time and development is still needed to build the full app functionalities. In the next build, a few things to consider would be:

1) Creating a more intuitive mapping system with less steps and more of a focus on the hair tooling functions.

2) Implementing a filtering system for the hair tools to avoid overwhelming the user.

3) Creating an onboarding flow for new hairdressers, who haven’t been trained to use the app yet.

Visual design — colour palette

The colour palette below was chosen for its playful yet calming nature, with the intention of eliciting a warm and welcoming vibe. Please note that this was not a focus for the mid-fidelity prototype.

7. Conclusion

This solo concept project was incredibly rewarding. The Interaction Design Foundation’s online user experience course provided me with strong fundamentals and concepts to propel my thinking and help me critically analyse my design decisions with the user in mind.

The next phase of the build would be to develop this app further by conducting more usability tests with hairdressers and customers, eventually building the hi-fidelity app and launching it! After this, the success would primarily be measured by customer retention rate over several months and satisfaction surveys.

Learnings & Roadblocks

I faced a lot of challenges during the process - one of which was securing time from interviewees (who have very busy schedules and are sometimes impossible to get hold of!) and improvising with the time and tools I had available. Secondly, the actual app build lead to a few roadblocks - creating an app that was as intuitive to use as possible but still including crucial features, of which there were many. This became evident while creating the app map, however I managed to add most of the considerations by the final version.

As I started building the mid-fidelity prototype in Sketch, I discovered a large handful of missing functions which were fundamental to the usability. I started incorporating them in as I went along, but in hindsight it was paramount to test low fidelity versions with users to save time and money. I also had difficulty in visually representing the camera functions while creating the prototype as I needed to show the different head angles. I overcame this by discovering a 3D model head which I used as a placeholder in the app instead of a blurry grey screen.