Timeline: 8 weeks
Role: UX Researcher, UX/UI Designer
Tools: Sketch, InVision, Pop by Marvel
Stylio is a mobile app that helps people find hairdressers in their area with the desired specializations and to browse hairdresser information and portfolios.
79% of salon goers don’t think it’s an easy task to find a hairdresser that they’re satisfied with according to Salon Today. It’s daunting having to parse through a large amount of information using multiple platforms and may not even acquire relevant data needed. Because of the limited access to hairdresser information available online, salon goers are having a hard time to find a match that meets criteria such as specialization in certain hair type, hairstyles, good client reviews, availability, and location, etc.
37% of salon goers would switch to a different stylist when dissatisfied with the way their hair turned out after the last visit to their usual stylist.
50% of salon goers return to the same hair salon after their first visit because the stylist knows how to take care of their hair type; 60% for the quality of service, 53% for the affordability, and 42% for the convenience of location.
56% of salon goers schedule a hair appointment when in need of a trim, treatment, or when don’t like the way their hair look.
79% of salon goers don’t think it’s an easy task to find a hairdresser that they’re satisfied with.
How might we provide salon goers relevant information on hairdressers in order to help them find a match that best suits their needs?
Preliminary research was conducted to test and validate the truthfulness of the assumptions made. Testing to see if salon goers are really undergoing difficulties acquiring relevant information on hairdressers. I created an interview script and selected 5 people that fit the participant criteria for user interviews through text message and video calls. After the interviews, I sorted and analyzed the notes, then categorized the insights under Motivations, Pain Points, and Behaviours:
Primary persona was created based on the preliminary research findings.
To visualize persona’s touchpoints, pain points, feelings, and potential solutions, I created an experience map.
From the user persona and experience map, I developed user stories and epics to be in the shoes of the target users to empathize with their experience.
The core task “filter hairdressers” is selected to create the task flow diagram because being able to narrow down hairdressers in a timely and efficient manner is one of the top concerns of our users in the preliminary research.
As a salon goer, I want to filter hairdressers through categories like location, availability, price range, hair salon, and specialization, etc. so that I can narrow down the search in a more efficient manner.
To think of the screens to create for low-fidelity wireframes, I look at other user stories that are crucial to salon goers aside from the core task “filter hairdressers”. With the selected tasks and screens in mind, I start to explore UI inspiration online, then create concept sketches from them.
The sketches are transformed into initial wireframes, then an interactive prototype in InVision. Two rounds user testing were conducted after the testing script was written and 9 people that fit the participant criteria were selected to do the test. The two iterations of user testing helped to improve the usability of the app.
The followings are some of the changes that have high impact on the usability.
Final version of the mid-fidelity wireframes.
Some key words that associate with the app are Chic, Clean, Sleek and Enthusiastic. With the key words in mind, I compiled a moodboard to help me further develop the visual identity of the app.
Words related to the app have been listed down to brainstorm ideas for the app name. The name “Stylio” is a combination of the words “style” and “portfolio”.
I created the logo by sketching down ideas and exploring different typefaces for the wordmark.
Click here to see the prototype.
In order to attract people to download the app, desktop and mobile versions of promotional website are crucial.
The project was created within 8 weeks and there are many improvements to make such as creating more screens to make a stronger prototype, especially transforming the mid-fidelity wireframe of confirm booking modal to high fidelity design, and to perform user testing on the high fidelity prototype to make sure the visual design is delivering its purpose.
I’ve lost count of the times that I’ve heard this phrase and it’s absolutely true that we as designers should trust the UX process without jumping to the solution right away; although it might feel like a shot in the dark at times, but the solution will gradually come up to the surface as we go through each step with faith.
There are always unexpected findings from user testing! When we work on something for too long, we can easily get caught up in our own assumptions; performing user testing can help us break that mentality to broaden our views and gain insightful feedbacks from fresh new perspectives to improve the products significantly.
Things definitely look different when designing on a white board with nothing around to get a feel of the size and spacing of elements, and seeing the design on the actual device will help to create a better idea of the correct size and placement of things.