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.
Design Tools: Adobe Photoshop, Adobe XD
Haimitage enables people to find deals on hair and hair products from vendors across the UK.
Hairmitage aggregates sales and bargains from various hair websites and presents it on its platform for would-be customers to make good purchase decisions.
Lead Product Designer
In essence, the primary audience for this product is people who like a bargain on products or people who actively seek deals on products. On the outset, this is hard to ascertain or to find a pre-set community that exists and would require casting a wide net approach. However, based on research, we found out that students and young people in the workforce are a good target audience as they are generally predisposed to looking for deals on products due to their low-income status.
Based on the above, the target audience was defined as follows: young women in universities or young women in the workforce.
In setting the business objectives, we came up with a baseline that there should be a significant ratio disproportion of direct users (people who want to buy hair products) to vendors on the website (people who want to sell hair products at a discount). In starting out, for the first 100 days there should be at least 1 vendor for every 10 users. As we ramp up, the ratio will increase to 1 to 100 and eventually 1 vendor to every 1000 direct users.
The baseline key objectives were:
The image below shows the general flow of the project from the Define stage to the Research stage to the Architecture Stage to the Wireframe stage to the Mockups to the Feedback stage.
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:
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. Though, we did not have concrete 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.
How might we help young women find good hair deals online?
The table below shows some of the factors the team considered for the creation of the business. As seen in the image below, for some of the factors, the business model is strong enough to withstand potential incumbents and for others, they are in the weak category. This means that for weak factors, a plan has to be put into place to mitigate the "risk" posed to the business.
Important to note that the table below does not show an exhaustive list and this is a cropped version.
The image below shows the persona of a direct user with their goals, frustrations and motivations. This persona was used as a point of reference for many of the design decisions when designing the web application. One goal that stands for Mary is she wants to find deals across the web for hair in order to make smart purchase decisions.
The image below shows the persona of a vendor with their goals, frustrations and motivations. This persona was used as a point of reference when designing the tools would-be vendors will use. One Frustration that stands for Hannah is she finds it generally hard to acquire new customers.
There are 76 pages of the Hairmitage workflow in general. The following shows a few snapshots pulled out of the main workflow document below and it is by no means exhaustive. This workflow diagrams enabled me to confirm with the stakeholders what the expected flow of the website should be and how it will work. It also enabled me to show to the developers the different states and the expected outcome from each input point. You will notice the flow diagram is not in the traditional flow diagram template as it proved more of a hindrance for the job to be done so a modified version was used.
The set of images below show the initial ideas for the website design. As seen below, the approach was mobile first. Though the application is web based application (which means it can be desktop or mobile), the plan to be mobile first was based on the target audience. This means we believe the customers are more likely to use the application on their mobile than on their desktop computer.
Initial Homepage Design
Updated Homepage Design
Post a Promo Form Design page 1
Post a Promo Form Design page 2
Post a Promo Form Design page 3
My Account
The series of images below show the evolution of the logo for the product. It also shows the colour pallets and the different variations taken.
Once the colour scheme and low fidelity screens were fleshed out, we decided to make high fidelity screens as it made the process faster. Naturally, the progression would have been to do wireframe mockups first, but due to our agile nature, it was more important to get the designs in front of customers as quickly as possible.
The following images show a selection of screens that were designed for the web app.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg){kind=spacer}
Images blurred to protect users identity
After producing High fidelity mockups and an MVP, we decided to test the product with real world users. This enabled us to give tasks to the users to complete with little or no help. It was important for us to have little or no interaction (except in non-functional situations) as we wanted to understand how easy the web application was to use.
Test Objectives or the questions we wanted answers to are as follows:
Test Methodology
Participants were invited onsite to use the product.
Some were given laptops and others used their 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 to the participants.
Participants
Number of participants: 15
Type: Young professional females
Routine: Regularly shop online for products
Sample questions from the usability testing
After collecting user feedback data and analysing them, we decided to make some changes to the web application.
The main changes were:
And many more.
Hero Section Changes
When a user visits the website they are immediately met with a bright pink background of what the value proposition is.
Users were taken aback by this as it was not welcoming and too bright. Users were asked what websites they visited in which they liked the background. All the backgrounds mentioned had toned down background colours and they looked similar.
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
One of the features generally requested was the implementation of ratings on the hairmitage website in order to make good purchase decisions as users generally used ratings on other websites.
The issue presented during implementation was specifying which ratings to use and how to verify legitimate ratings. After much thought, we decided to include the ratings present on site of purchase but notify the user of the kind of rating the product we had imported and from where. E.g. Trustpilot or Vendor’s website ratings, so the user can make informed buying decisions
In the future we will have a view for users to sort products by rating in the future.
Vendor and User Profiles
Initially, the design had only one type of profile even though the business has two types of customers- a direct user and a vendor. When a user signed up for the website, they were given a profile that could post a promotion as well act as a normal user depending on the usage of the customer. However, we found that this was confusing to some of the users, as it allowed them to do things that were not useful to them. Based on the feedback we decided to create two 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” where users could “watch” a promo before it expires. The feature was built to remind users when a promo they are interested in is about to expire so they can make a decision on whether to make the purchase or not.
However, based on feedback, we found that the language was confusing to users as “watching” is often related to stock price watching or similar. That is, it means the user is watching for the price to go up or down.
As the feature built was more of a reminder than a price watcher, we decided to change the language from “Watch this item” to “Remind Me.”
