Lakmē Rouge Bloom
Lakmē Rouge Bloom
Lakmē Rouge Bloom
UI design for Lakme's new collection launch, a two-phase mobile-first experience balancing editorial storytelling with conversion.
UI design for Lakme's new collection launch, a two-phase mobile-first experience balancing editorial storytelling with conversion.
Project Overview
Project Overview
Rouge Bloom was Lakme's bid to reframe the makeup routine as a moment of indulgence rather than a task. The collection was built around that idea, soft textures, rich pigments, floral references, and the digital touchpoint needed to carry the same experience through. I worked across both UX and UI on this project, from wireframing the structure and flow with a UX strategist through to leading the final visual design. Three weeks, two phases.
Rouge Bloom was Lakme's bid to reframe the makeup routine as a moment of indulgence rather than a task. The collection was built around that idea, soft textures, rich pigments, floral references, and the digital touchpoint needed to carry the same experience through. I worked across both UX and UI on this project, from wireframing the structure and flow with a UX strategist through to leading the final visual design. Three weeks, two phases.
Rouge Bloom was Lakme's bid to reframe the makeup routine as a moment of indulgence rather than a task. The collection was built around that idea, soft textures, rich pigments, floral references, and the digital touchpoint needed to carry the same experience through. I worked across both UX and UI on this project, from wireframing the structure and flow with a UX strategist through to leading the final visual design. Three weeks, two phases.
Project Type
Project Type
UI/UX Design
UI/UX Design
UI/UX Design
Year
Year
2024
2024
2024
My Role
My Role
UI/UX Designer
UI/UX Designer
UI/UX Designer
Client
Client
Lakmē
Lakmē
Lakmē
The Brief
The Brief
The Brief
The Rouge Bloom page needed to feel editorial and convert. Those two things don't always sit comfortably together in a beauty launch, and finding where they meet was the core design challenge here. The collection's positioning, slow, sensory, indulgent, shaped every visual decision. But the page still needed clear product surfaces, strong CTAs, and a path to purchase that didn't require the user to work for it.
The Rouge Bloom page needed to feel editorial and convert. Those two things don't always sit comfortably together in a beauty launch, and finding where they meet was the core design challenge here. The collection's positioning, slow, sensory, indulgent, shaped every visual decision. But the page still needed clear product surfaces, strong CTAs, and a path to purchase that didn't require the user to work for it.
The Rouge Bloom page needed to feel editorial and convert. Those two things don't always sit comfortably together in a beauty launch, and finding where they meet was the core design challenge here. The collection's positioning, slow, sensory, indulgent, shaped every visual decision. But the page still needed clear product surfaces, strong CTAs, and a path to purchase that didn't require the user to work for it.
Visual Direction
Visual Direction
Visual Direction
The palette started with the products themselves. Deep reds, dusty pinks, warm golds pulled directly from the Rouge Bloom range became accent colours across interactive elements and hover states, keeping the UI and the collection visually connected. A black, white, and gold base gave the page structure and a luxe feel without competing with the product photography. For type, Roc Grotesk was used for the headings. It's a bold, modern sans-serif with enough personality to hold its own against rich imagery without feeling cold. Gotham ran beneath it for subheadings and body copy, clean and steady. Large animated floral imagery and a parallax scroll effect gave the page its sensory quality. The motion was deliberate and slow, mirroring the pace the collection wanted users to move at.
The palette started with the products themselves. Deep reds, dusty pinks, warm golds pulled directly from the Rouge Bloom range became accent colours across interactive elements and hover states, keeping the UI and the collection visually connected. A black, white, and gold base gave the page structure and a luxe feel without competing with the product photography. For type, Roc Grotesk was used for the headings. It's a bold, modern sans-serif with enough personality to hold its own against rich imagery without feeling cold. Gotham ran beneath it for subheadings and body copy, clean and steady. Large animated floral imagery and a parallax scroll effect gave the page its sensory quality. The motion was deliberate and slow, mirroring the pace the collection wanted users to move at.
The palette started with the products themselves. Deep reds, dusty pinks, warm golds pulled directly from the Rouge Bloom range became accent colours across interactive elements and hover states, keeping the UI and the collection visually connected. A black, white, and gold base gave the page structure and a luxe feel without competing with the product photography. For type, Roc Grotesk was used for the headings. It's a bold, modern sans-serif with enough personality to hold its own against rich imagery without feeling cold. Gotham ran beneath it for subheadings and body copy, clean and steady. Large animated floral imagery and a parallax scroll effect gave the page its sensory quality. The motion was deliberate and slow, mirroring the pace the collection wanted users to move at.
The Teaser Phase
The Teaser Phase
The Teaser Phase
The teaser's job was to introduce the collection and build anticipation amongst the audience. A bold hero section opened with the Rouge Bloom name, and scroll-triggered reveals unfolded the narrative gradually rather than presenting it all upfront. A save-the-date prompt appeared toward the end of the scroll, creating a moment of exclusivity without manufacturing urgency. We introduced a play-while-you-wait concept to make the wait worth their while, where users could play a simple game to collect rewards and have it ready for when the collection launches.
The teaser's job was to introduce the collection and build anticipation amongst the audience. A bold hero section opened with the Rouge Bloom name, and scroll-triggered reveals unfolded the narrative gradually rather than presenting it all upfront. A save-the-date prompt appeared toward the end of the scroll, creating a moment of exclusivity without manufacturing urgency. We introduced a play-while-you-wait concept to make the wait worth their while, where users could play a simple game to collect rewards and have it ready for when the collection launches.
The teaser's job was to introduce the collection and build anticipation amongst the audience. A bold hero section opened with the Rouge Bloom name, and scroll-triggered reveals unfolded the narrative gradually rather than presenting it all upfront. A save-the-date prompt appeared toward the end of the scroll, creating a moment of exclusivity without manufacturing urgency. We introduced a play-while-you-wait concept to make the wait worth their while, where users could play a simple game to collect rewards and have it ready for when the collection launches.
The Launch Phase
The Launch Phase
The Launch Phase
The launch page covered the full collection: individual products, the brand story behind Rouge Bloom, and multiple routes to purchase. A few specific decisions shaped how it came together. 1. Contextual nudges rather than hard sells: Purchase prompts were placed where users naturally paused in the content flow, not interrupting the experience but appearing within it. A gamified offer added an element of reward for engagement. 2. Multiple entry points into the product range: An interactive lookbook, gifting prompts, and shoppable content gave different users different paths, someone browsing for inspiration and someone ready to buy could both move through the page without friction. 3. Mobile first throughout: The majority of Lakme's traffic comes through mobile. Fixed navigation, bold CTAs, and touch-optimised interactions were built for smaller screens from the start.
The launch page covered the full collection: individual products, the brand story behind Rouge Bloom, and multiple routes to purchase. A few specific decisions shaped how it came together. 1. Contextual nudges rather than hard sells: Purchase prompts were placed where users naturally paused in the content flow, not interrupting the experience but appearing within it. A gamified offer added an element of reward for engagement. 2. Multiple entry points into the product range: An interactive lookbook, gifting prompts, and shoppable content gave different users different paths, someone browsing for inspiration and someone ready to buy could both move through the page without friction. 3. Mobile first throughout: The majority of Lakme's traffic comes through mobile. Fixed navigation, bold CTAs, and touch-optimised interactions were built for smaller screens from the start.
The launch page covered the full collection: individual products, the brand story behind Rouge Bloom, and multiple routes to purchase. A few specific decisions shaped how it came together. 1. Contextual nudges rather than hard sells: Purchase prompts were placed where users naturally paused in the content flow, not interrupting the experience but appearing within it. A gamified offer added an element of reward for engagement. 2. Multiple entry points into the product range: An interactive lookbook, gifting prompts, and shoppable content gave different users different paths, someone browsing for inspiration and someone ready to buy could both move through the page without friction. 3. Mobile first throughout: The majority of Lakme's traffic comes through mobile. Fixed navigation, bold CTAs, and touch-optimised interactions were built for smaller screens from the start.
Wireframing
Wireframing
Wireframing
Given the three-week timeline, there wasn't room for a formal research phase. The wireframing process started from the brief, the collection's positioning, and a quick audit of how comparable beauty brands had approached collection launches digitally. The teaser and launch pages were wireframed together, working through the structure collaboratively with the UX strategist. The teaser needed a scroll logic that revealed information gradually without losing the user before the save-the-date moment. The launch page needed a clearer hierarchy: brand story first, then product surfaces, then purchase. The wireframes resolved both before any visual decisions were made. Navigation was a joint call: a fixed menu for accessibility, bold CTAs placed at natural pause points in the scroll, and a mobile-first layout from the start given where Lakme's traffic was coming from.
Given the three-week timeline, there wasn't room for a formal research phase. The wireframing process started from the brief, the collection's positioning, and a quick audit of how comparable beauty brands had approached collection launches digitally. The teaser and launch pages were wireframed together, working through the structure collaboratively with the UX strategist. The teaser needed a scroll logic that revealed information gradually without losing the user before the save-the-date moment. The launch page needed a clearer hierarchy: brand story first, then product surfaces, then purchase. The wireframes resolved both before any visual decisions were made. Navigation was a joint call: a fixed menu for accessibility, bold CTAs placed at natural pause points in the scroll, and a mobile-first layout from the start given where Lakme's traffic was coming from.
Given the three-week timeline, there wasn't room for a formal research phase. The wireframing process started from the brief, the collection's positioning, and a quick audit of how comparable beauty brands had approached collection launches digitally. The teaser and launch pages were wireframed together, working through the structure collaboratively with the UX strategist. The teaser needed a scroll logic that revealed information gradually without losing the user before the save-the-date moment. The launch page needed a clearer hierarchy: brand story first, then product surfaces, then purchase. The wireframes resolved both before any visual decisions were made. Navigation was a joint call: a fixed menu for accessibility, bold CTAs placed at natural pause points in the scroll, and a mobile-first layout from the start given where Lakme's traffic was coming from.
Rights owned by VML India
Rights owned by VML India
Rights owned by VML India
