Case Study: Stylio

Timeline: 8 weeks

Role: UX Researcher, UX/UI Designer

Purpose: Academic

Tools: Sketch, InVision, Pop by Marvel

stylio app phone mockup

Overview

Stylio is a mobile app that helps people find hairdressers in their area with the desired specializations and to browse hairdresser information and portfolios.

Research

Problem Space

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.

Secondary Research

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?

Assumptions

Salon goers...

  • are having difficulty finding a suitable hairdresser.
  • are spending extended amount of time to do research on hairdressers because of the lack of information provided online.
  • would like to learn more about hairdressers such as their specialization in hairstyles, hair types, availability, location, client reviews, and pictures of past works, etc.
  • like hairdressers that are experienced in their hair types.

Preliminary Research

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:

Preliminary research insights

Synthesis

Persona

Primary persona was created based on the preliminary research findings.

Primary persona

Experience Map

To visualize persona’s touchpoints, pain points, feelings, and potential solutions, I created an experience map.

Experience map

User Stories & Epics

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.

User stories and epics User stories and epics User stories and epics User stories and epics

Task Flow Diagram

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.

User Story:

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.

Task:

Filter hairdressers.

Task flow diagram

Ideation

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.

Concept Sketches

Concept sketches

Wireframes, Prototype & Testing

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.

Tasks:

  1. Search and filter hairdressers.
  2. See hairdresser’s past works.
  3. Contact hairdressers in app.
  4. Check for hairdresser’s availability.
  5. Book hair appointment.
  6. Leave client review after visits.
  7. See appointment history.

Test 1 Results

Test 1 results

Test 2 Results

Test 2 results

The followings are some of the changes that have high impact on the usability.

Before and after versions of wireframes - Home Screen. Before and after versions of wireframes - Hairdresser Profile Screen.

Final version of the mid-fidelity wireframes.

wireframes

Visual Design

Moodboard

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.

moodboard

Colour Exploration

Colour exploration

Logo

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”.

app name

I created the logo by sketching down ideas and exploring different typefaces for the wordmark.

Logo sketches Brand logo

Final Screens

Click here to see the prototype.

mobile mockups

Responsive Marketing Website

In order to attract people to download the app, desktop and mobile versions of promotional website are crucial.

marketing website mockups

Next Steps & Key Learnings

Next Steps

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.

Key Learnings

Embrace the ambiguity

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.

Test, Test, and Test!

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.

Try the design on the actual device!

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.