Hair Food
Making hair care effortless to buy.
Enhancing the Hair Food website with e-commerce functionality to improve user experience and drive business growth.
Making hair care
effortless to buy.
Enhancing the Hair Food website with e-commerce functionality to improve user experience and drive business growth.
The goal: give Hair Food
a real place to sell.
The Hair Food website lacked a functioning e-commerce layer. Users could browse products but had no seamless path to purchase — a critical gap for a brand competing in a crowded beauty market.
The brief was to add e-commerce functionality and improve the overall shopping experience to increase conversion and brand loyalty.
How can we offer Hair Food customers a convenient and secure online shopping experience while also encouraging increased shopping frequency?
What users told us
before we touched Figma.
User interviews and usability tests surfaced three recurring pain points — each one a direct obstacle to purchase.
Four phases.
No guesswork.
A double-diamond approach: understand the problem deeply before designing the solution.
- Primary Research
- Prepare project plans
- Secondary Research
- User Interviews
- Google Survey
- Customer Journey Map
- Empathy Map
- Sitemap
- User Flow
- Wireframes
- Prototyping
- Usability Testing
- Design System Documentation
Understanding the thought process
behind a hair care purchase.
To understand how people buy hair care products online we ran a series of primary research activities followed by a competitive analysis of direct and indirect players.
Primary Research
Users often had strong personal interest in trying new products to improve hair health. However competing with in-store discovery — being able to smell and feel textures — proved to be the main barrier to online conversion.
Comparing prices across popular online platforms was a habitual behaviour. Users would not purchase without first confirming a product was well reviewed and reasonably priced relative to the ingredients offered.
Secondary Research
During an ingredient-first scroll test to figure out what triggers new users to begin their purchase flow, participants consistently paused on product detail pages only when ingredient lists were prominently displayed above the fold.
Analysing competitor conditions and ingredient combinations also affirmed that Hair Food's natural ingredient story is a genuine differentiator — but one that was buried deep in the existing product pages, limiting its conversion potential.
Two problems.
One cohesive experience.
Ingredient Finder
A guided quiz helps users identify their preferred fragrance families and ingredient combinations, then surfaces the right products — reducing decision fatigue at the top of the funnel.
Streamlined Checkout
A redesigned cart and checkout flow removes unnecessary friction steps, surfaces bundle savings, and adds a persistent "your routine" shelf to encourage repeat purchase.
A fragrance customisation system that lets users blend two scents at a chosen ratio and see exactly what product they're creating — before they buy. It turns passive browsing into a personalised ritual.
Pick. Blend.
Make it yours.
A four-step fragrance customisation system. Every step is skippable and reversible — users stay in control without ever feeling committed too early.
What the redesign
actually delivers.
From wireframe
to final design.
Every key flow went through at least two rounds of iteration before high-fidelity work began. Click any screen to expand.
What we broke.
What we fixed.
Results from
usability testing.
After two rounds of moderated testing with target users, the redesigned flows showed measurable improvement across every key metric.