Personal UX concept project | 2 Weeks | Individual

The below case study showcases my full UX process. For a summary of the project please click here.

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.

The problem hair salons currently face

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.

I conducted research in 3 phases to discover existing services and user frustrations

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

Through competitor research, I found more than 15 hair styling apps but 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.

The interviews allowed me to gather qualitative data from understanding users’ past experiences and habits

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

The main takeaways from the research highlighted how uncertainty of a new haircut could lead to a decline in customers

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.

I summarised my research into a persona to serve as a reference point for the next phases and identify with the user I was designing for

I identified the key participant as Kayleigh Pieters and outlined her main challenges and goals. As well as wanting a haircut she’s satisfied with, she has limited mobility as a wheelchair user and would therefore want to be accommodated for.

The problem statement I focused on captured what I wanted to achieve with the design

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.

I ideated potential solutions through “how might we” questions which served as a good basis for brainstorming

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?

Ideation

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) The solution: 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 can also be used by the customer should they wish to. 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 primarily 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

I assume that there is technology available which can map the customer’s head and will support the in-app functions.

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:

I outlined the most crucial app functions that the user would benefit from and the hairdresser would need to operate it successfully

• 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 app map through understanding the Information architecture (IA) threw up more questions than answers

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. 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 helped me visualise how the functions would be placed within the app and how intuitive they would be

After creating the IA and two rough app build sketches, I understood what the wireflow would look like and created them using Balsamiq. 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.

Building the mid-fidelity prototype and conducting usability tests enabled me to understand the complexity for a new user

I created the mid-fidelity prototype 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 to create a more intuitive mapping system, implement a filtering system for the hair tools and an onboarding flow.

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.

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.