Hairmitage Case Study

Executive Summary

Introduction

Haimitage enables people to find deals on hair and hair products from vendors across the UK.

Initial Vs Final Premise

Initial Premise:
Customers want a website that aggregates bargains from various hair websites.

Concluding Findings (after testing):
Customers do not just want an aggregation of bargains, they want to make informed decisions about the product they are buying. This means including features such as ratings, filters and a profile to save items to the website.

Problem Statement

How might we... help young women find good hair deals online?

Role

Lead Designer
This is a case study of an end to end project in which I was the lead designer and head of product for the startup.

Tools

Adobe Photoshop
Figma
Miro
Userforge

Design State Diagram

Target Audience

People who like a bargain on products or people who actively seek deals on products.

The first target audience was defined as follows:
Young women in universities or young women in the workforce.

Objective Key Results

The baseline key objectives were: 
•   1000 users within the first 100 days of launch
•   100 vendors within the first 100 days of launch

Research and Target Audience

Image credit: Slidesgo

Research

Based on the target audience defined here, we decided to segment the population to the age group of 18-35.

Using that segment, we found the following:
•   Population of 18-35 year olds in the UK (2015) = 15,139,562
•   Percentage of the population in the UK that are women (2015)= 50.7%
•   Number of young women (18-35 year olds) in the UK (approx) = 7,680,803
•   Percentage of black people in the UK (2011) = 3.3%
•   Number of young black women in the UK (approx) = 253,466

This means there are 253,466 women we can initially target with a view to increase this to 7.6million women in the future.

Market Size

According to CEW research, the Beauty and Personal care market size in the UK (2017) is £10.2bn. The research also states that 30% of the total share is Barbershop and Hairdressing.

By taking a rudimentary approach and applying 15% for hairdressing (since about half of the population is women), the total addressable market is about £1.53 billion.

TAM

Though, we did not have specific localised data, but based on a small sample size, we noted that women are more likely to spend more on hair care than men but we still applied 15% due to lack of data.

Taking a conservative cut of 10% of the total addressable market, Hairmitage plans on cornering £153m of the market to carve out its niche.

Personas

The images below show the personas of a direct user and a vendor with their goals, frustrations and motivations.
This personas were used as a point of reference for many of the design decisions.

Workflow Diagrams

The workflow diagrams show a few snapshots (out of 76 in total) presented to stakeholders on what the expected website flow would be and how it would work.

It also enabled me to show to the developers the different states and the expected outcome from each input point.

Low Fidelity Diagrams

As seen below, the design approach was mobile first.

Though the application can be accessed on desktop, the plan to design mobile first was based on research that our target customers are more likely to use the application on their mobile than on their desktop computer.

High Fidelity Designs

Homepage

The homepage shows the visitor the Unique Selling Point (USP) immediately through the hero.
‍
The user is presented with deals above the fold right away. This enables the user to start using the application and get value immediately.

Create Your Account

The images shows a mockup page of creating an account on hairmitage.  

Error states are shown to inform the developer how to build the app when validation is required.

Watch This Item

The feature called "Watch This Item" reminds a user about a specific deal 24 hours before the deal expires.

The screenshot shows a deal that has actually expired which means the user revisited the site too late.

Resetting Your Password

This mockup shows that the copy on each button of the application is intentional.

Here, "Make Changes" is used instead of the generic "Save" as it is more pertinent to the task at hand.

Usability Testing

Testing the MVP with real world users.

It was important for us to have little or no interaction with the participants (except in non-functional situations e.g. no connection to Wi-Fi) as we wanted to understand how easy the web application was to use.

Test Objectives


These are the high level questions we wanted answers to:

  • Are the users using the features as expected?
  • Are they able to complete the tasks given?
  • Clarity at every stage. Do the users understand the microcopy and what is required at every stage?
  • Did we do enough internal testing before presenting to the users?
  • Using real world data, is the product useful to the users?
  • What are the features or aspects of products do they not like?

Sample Questions

Test Methodology

Participants were invited onsite to use the product and were either given laptops or mobile phones.

The participants were given an introduction on what the process entails, what the website and business is about and what would be expected of them. Food and drinks were provided.
‍
Participants
‍Number of participants: 15
Type: Young professional females
Routine: Regularly shop online for products

Next Steps

After collecting user feedback data and analysing them, we decided to make some changes to the web application.
The main changes were:

  • Use a tone-down colour of the hero page as it’s too bright. Applying Jakob’s law
  • Add ratings to the website
  • And many more.
  • Separate vendor profile from direct user profile
  • Use "Remind me" instead of "Watch this Item"

Hero Section Changes

Test participants were taken aback when they visited the homepage and met with a bright pink background as it was unusual.

Participants told us about websites they frequently visited which had toned down background colours.
‍
This evokes the UX law- Jakob’s law which states:
“Users spend most of their time on other sites.
This means that users prefer your site to work the same way as all the other sites they already know.”
‍
Taking that in mind, some changes were made to homepage of the website.

Ratings to the Website

In order to make good purchase decisions, customers generally use ratings on other websites so we decided to add this feature.

The issue presented during implementation was specifying which sort of ratings to use and how to verify legitimate ratings.

After much thought, we decided to include the ratings present on the site of purchase but notify the user explicitly of the source. E.g. Trustpilot or the vendor’s website ratings, so the user can make informed buying decisions

Vendor and User Profiles

Initially, the design had only one type of profile. A user could post a promotion like a vendor or browse like a normal user.

However, we found that this was confusing to some of the test participants, as it allowed them to do things that were not useful to them.

Based on the feedback we decided to create two separate profiles. One for the direct user and one for the vendor and give permissions to the profile based on what was required.

Use "Remind Me" instead of "Watch This Item"

The website initially had a feature called “Watch this item”  to remind users when a promo they are interested in is about to expire.

However, based on feedback, we found that the language was confusing to users as “watching” is often related to price changes like the stock market.

Since the feature was meant as a reminder, we decided to change the language from “Watch this item” to “Remind Me.”

Conclusion

There is a lot more to the story that has been highlighted above but I hope it gives you a view of how the web app was built. There were a lot of findings from the process and I have personally learnt a lot as a designer.

That being said, my favourite insight can be summed up as follows:
‍
Initial Premise:
The original proposition was to build a website that Hairmitage aggregates bargains from various hair websites and presents it on its platform for would-be customers.

Concluding Findings (after testing):
Customers do not just want an aggregation of bargains, they want to make informed decisions about the product they are buying. This means including ratings, filters and a profile to save items to the website.