BeBeautiful
Designing a personalised shopping experience for BeBeautiful that put 10 years of organic audience trust to commercial use for Hindustan Unilever
Designing a personalised shopping experience for BeBeautiful that put 10 years of organic audience trust to commercial use for Hindustan Unilever
Designing a personalised shopping experience for BeBeautiful that put 10 years of organic audience trust to commercial use for Hindustan Unilever
Project Overview
BeBeautiful is Hindustan Unilever's owned beauty and lifestyle editorial platform. 10+ years of audience growth, built entirely on content. Millions of high-intent readers arriving every month with specific beauty questions and a genuine willingness to engage.
The problem was simple: all that attention had nowhere to go. No personalisation, no commerce pathway, purchases leaking to aggregators. The content was working. The platform wasn't.
The opportunity was to change that. How might we build an experience that could turn a reader into a shopper, without ever making them feel like one?
BeBeautiful is Hindustan Unilever's owned beauty and lifestyle editorial platform. 10+ years of audience growth, built entirely on content. Millions of high-intent readers arriving every month with specific beauty questions and a genuine willingness to engage.
The problem was simple: all that attention had nowhere to go. No personalisation, no commerce pathway, purchases leaking to aggregators. The content was working. The platform wasn't.
The opportunity was to change that. How might we build an experience that could turn a reader into a shopper, without ever making them feel like one?
Project Type
UX/UI Design
Year
2025
My Role
Experience Designer
Client
Unilever - HUL
The North Star
The North Star
The challenge wasn't simply to add commerce. It was to introduce a new behaviour without compromising what made BeBeautiful valuable in the first place: its content.
Content is always the hero.
Editorial content remains the primary experience.
Commerce is always contextual.
Products appear only when the content creates a reason for them.
The user never feels sold to.
Personalisation and product recommendations should feel useful, not intrusive.
These principles became practical design constraints, shaping decisions across the IA, component behaviour and product placement.
The challenge wasn't simply to add commerce. It was to introduce a new behaviour without compromising what made BeBeautiful valuable in the first place: its content.
Content is always the hero.
Editorial content remains the primary experience.
Commerce is always contextual.
Products appear only when the content creates a reason for them.
The user never feels sold to.
Personalisation and product recommendations should feel useful, not intrusive.
These principles became practical design constraints, shaping decisions across the IA, component behaviour and product placement.
Designing Around Intent
Designing Around Intent
The starting point was recognising that not every visitor arrived with the same level of intent, but everyone was being served the same experience.
There were signals available but unused, such as browsing history, category affinity, prior reads and declared preferences. These could be used to make the experience progressively more relevant.
We designed around three broad behaviours:
The starting point was recognising that not every visitor arrived with the same level of intent, but everyone was being served the same experience.
There were signals available but unused, such as browsing history, category affinity, prior reads and declared preferences. These could be used to make the experience progressively more relevant.
We designed around three broad behaviours:
The Experience Model
The Experience Model
Rather than create a separate shopping journey, we designed commerce as an extension of the content journey. Six stages from search to purchase, with personalisation built in to make it a more relevant experience.
Rather than create a separate shopping journey, we designed commerce as an extension of the content journey. Six stages from search to purchase, with personalisation built in to make it a more relevant experience.
The model meant a user could arrive looking for a skincare tip and leave having bought the product mentioned in the article, without ever feeling like they'd been redirected to a shop.
The model meant a user could arrive looking for a skincare tip and leave having bought the product mentioned in the article, without ever feeling like they'd been redirected to a shop.
The Personalization System
The Personalization System
The existing experience gave every visitor the same content. We needed a way to capture enough information to make the experience relevant without asking too much upfront.
The solution was a quick-tap preference questionnaire: interests, skin type, hair type, lifestyle goals. Under a minute to complete, low effort for the user, high value for the system. The goal was for the platform to feel like it already knew you by your second visit. Logged-in users could edit preferences at any time from their profile dashboard.
The existing experience gave every visitor the same content. We needed a way to capture enough information to make the experience relevant without asking too much upfront.
The solution was a quick-tap preference questionnaire: interests, skin type, hair type, lifestyle goals. Under a minute to complete, low effort for the user, high value for the system. The goal was for the platform to feel like it already knew you by your second visit. Logged-in users could edit preferences at any time from their profile dashboard.
Key Design Decisions
Key Design Decisions
Home Page + IA
Home Page + IA
Personalisation starts before the user logs in. The IA surfaces content by hair type, length, concern and treatment — and skin by type, tone and concern — so a visitor can find exactly what's relevant to them without ever touching a preference. BePicks earns navigation-level visibility, branded as a curated edit rather than a storefront.
Personalisation starts before the user logs in. The IA surfaces content by hair type, length, concern and treatment — and skin by type, tone and concern — so a visitor can find exactly what's relevant to them without ever touching a preference. BePicks earns navigation-level visibility, branded as a curated edit rather than a storefront.
Introducing Products
Introducing Products
The critical moment was when editorial content became commerce. We used a single, subtle signal i.e. a shopping bag icon on article cards, as the only commerce indicator at browse level. Scannable without being loud. The product never announced itself before the content had earned the introduction.
The critical moment was when editorial content became commerce. We used a single, subtle signal i.e. a shopping bag icon on article cards, as the only commerce indicator at browse level. Scannable without being loud. The product never announced itself before the content had earned the introduction.
Content to Commerce
Content to Commerce
Products appear within articles only where the content creates a contextual reason for them. The BePicks panel sits within the article flow so the product feels like a natural continuation of what the reader was already doing. From there, users can explore the product, move to its detail page and add it to their cart without losing their place in the article.
Products appear within articles only where the content creates a contextual reason for them. The BePicks panel sits within the article flow so the product feels like a natural continuation of what the reader was already doing. From there, users can explore the product, move to its detail page and add it to their cart without losing their place in the article.
The Purchase Handoff
The Purchase Handoff
Instead of redirecting to an external aggregator, checkout stays native to BeBeautiful. The user never leaves the platform. This was a deliberate decision to keep the experience continuous from first read to final purchase, and to keep that commercial relationship owned by Unilever and not an aggregator.
Instead of redirecting to an external aggregator, checkout stays native to BeBeautiful. The user never leaves the platform. This was a deliberate decision to keep the experience continuous from first read to final purchase, and to keep that commercial relationship owned by Unilever and not an aggregator.
Impact
Impact
60% increase in users
50% increase in engaged sessions
1st Unilever content-to-commerce model across beauty and personal care
The work demonstrated how an existing content audience could become the foundation for a more personalised, commercially sustainable platform that could fund its own growth.
Reach out if you're interested in the full case study! :)
60% increase in users
50% increase in engaged sessions
1st Unilever content-to-commerce model across beauty and personal care
The work demonstrated how an existing content audience could become the foundation for a more personalised, commercially sustainable platform that could fund its own growth.
Reach out if you're interested in the full case study! :)
Rights owned by VML
