HAIRCODE EUROPE
Role : UX Design & Responsive Web Design
Quick summary
HairCode is a P&G site that allows users to get to know their hair and more specifically which products work well for them. At the heart of the experience is a quiz which at the end provides their Haircode and product recommendations.
​
The present Haircode.com is for the North American market and the project was to Design the Haircode Europe site.
The Approach
Initially a point of view had to be put forward to the Haircode team about how a user centric approach will shape up the new site providing their users with a great experience. I did some quick research and presented the vision through mockups.
​
Then planned for a design workshop for the discovery and definition. Understood the user needs and the business goals in the discovery and laid out the experience plan and structure in the definition.
​
Then created the designs inline with the vision and direction.
Analysing the present
I did a heuristic study along with some designers in team by which shortcomings in visibility, clarity, flexibility, guidance and efficiency were observed.
Point Of View
I presented a vision addressing the above heuristic issues, more specific to the number of questions…non clear content… rigid navigation…
​
Did this by putting forward some quick mockups marking the envisioned design highlights.
Planning the workshop
Now the primary research was needed for chalking out the requirements in detail. So I planned workshops with the stakeholders into two phases of : discovery and definition with laid out activities and goals.​
Whys, Whats & the Business Goals
I placed some open questions for the business to check their vision and goals : approach till now ? what has worked and what hasn’t ? What do they want to provide and gain ? Motto or belief ?
​
So the business wanted to provide more value to the users through a seamless and delightful experience leading to more conversions and brand enhancement.
User identification and empathy mapping
In the workshop we identified the targeted users of HairCode Europe and did empathy exercises.
​
Modified the 'say' 'think' 'feel' 'do' to 'needs' 'think & feel' 'observations' and 'influences' related to hair advice. Marked out the user goals through the tasks which needed to be done and the identified the blockers.​
Competitor
The main competitor for Haircode is Olaplex, analysing it I had the obseravtions that it was a faster, seamless and clean experience for recommendation.
​
Haircode additionally provides a code along with the recommendation and hence the number of questions had to be reduced to get the same fast outcome.
Vision, Direction and Ideas
Based on the goals and expectations we chalked out the vision and direction for Haircode Europe. Keeping those keywords as anchors we did some brainstroming sessions to create the ideas board.​
The journey : present and future
Creating the journey was the key part here and an important element for the new site.
To make it flexible I planned multiple entry points into the journey so repeat users need not go through the whole quiz if they know their code, check recommendations and other info directly. Also reduced the number of questions that need to be asked in journey by chunking the questions into analysis and needs.
​
Planned out which sections of the journey which need to have more engagement time for brand enhancement.
Information layout
Creating the journey was the key part here and an important element for the new site.
To make it flexible I planned multiple entry points into the journey so repeat users need not go through the whole quiz if they know their code, check recommendations and other info directly. Also reduced the number of questions that need to be asked in journey by chunking the questions into analysis and needs.
​
Planned out which sections of the journey which need to have more engagement time for brand enhancement.
Design
Home
Provides different entry points for a user to start the journey.
Clean interface and progress tabs to
quickly jump between questions providing flexibility.
Questions
Provides the basic explanation of the code so user can avoid the detailed page if not required.
Results
Micro interactions to guide user if the options are not clear.
Profile
The code details of the user is saved so a user need not take the quiz each time and also access other features available for her/her code.
Code info and contact
The Haircode UK is all geared up for launch and has already received good reviews from the internal and business teams.
