MOTHER ROOT • UX/UI
Redesigning a landing page for a limited-edition product launch
I was tasked by Mother Root with redesigning their limited-edition product landing page template for the launch of their Marmalade drink.
Project brief analysis
Current page analysis
Quantitative data analysis
Scroll map analysis
Heatmap analysis
Problem space analysis
Opportunities definition
Component ideation
Content ideation
Information architecture
User interface design
User experience design
PERSONAL CONTRIBUTIONS
THE PROBLEM
Existing page fails to convert an already-warm audience
Despite serving visitors who should be primed to buy, the page underperforms relative to that advantage - most users engage early on, but the majority drop off before ever reaching the point of purchase.
Persuasive content is present but poorly deployed
Key sections of the page focus on describing the product rather than selling it, and the content meant to build desire is buried too far down for most visitors - including the most valuable customers - to ever see.
Interactive and urgency cues are missing or broken
Visitors show clear intent to engage, but the page doesn't respond to it, and nothing on the page creates a reason to act now rather than later.
A snippet of the first-pass analysis - current Limited Editions page template
Scroll map and heat map analysis (key insights) - current Limited Editions page template
Problem statements identified from scroll map and heat map analysis of the current page
The landing page hero was redesigned to have a more mobile-friendly and accessible layout. The hero headline and bodycopy were written to introduce the flavour inside the bottle. The "limited edition" badge was repositioned and made clickable, anchor-linking to the buy box section of the page. A Marmalade-specific colour scheme was applied throughout the page, including the CTA styling.
A section explaining why Marmalade was created was introduced, to help set the scene and tell the story of the product. A new section was introduced to list the tasting notes of the bottle, so users can get the flavour spectrum at a glance while scrolling through.
A sticky "add to cart" CTA was introduced to anchor-link users back to the buy box, no matter where they are on the page.
A low-stock indicator badge was added to the buy box section. The nutritional info and ingredients accordion was given more prominence to provide easier access to important information. Review stars were made clickable, anchor-linking to the reviews section lower down the page. Product upselling recommendations were added to encourage add-ons of Mother Root's signature Ginger drink and accessories.
A new benefits section was added to highlight the product's key benefits.
A brand new section was introduced to explain why this is a limited edition and emphasise its scarcity, encouraging customers to buy now.