Tommee Tippee
Global Website Redesign case study
Awards
DMA Gold - Best Writing
DMA Silver - Healthcare
DMA Bronze - Design or Art Direction
DMA Shortlist - Best Brand Building Campaign
DMA Shortlist - Retail
The global website for Tommee Tippee, an award-winning baby brand, was redesigned using their brand strategy and a message to parents everywhere, “Parent On.” I was the visual and UI designer within a cross-functional team, including stakeholders from the client and agency.
The website was built entirely around the audience designed mobile-first with easy one-handed navigation - essential for new parents multitasking (obvs). It included a bespoke design system aligned with their brand guidelines, product support and real parent stories.
Case study video
Pain points
First-time parents - feel overwhelmed by the responsibility and lack of knowledge about caring for a newborn.
Working parents - worry about balancing time between work and family responsibilities and fear feeling left out.
Experienced parents - struggle with managing multiple children and finding the time for self-care.
Grandparents - adapting to changes in parenting practices and managing expectations and boundaries.
Health Professionals - staying up-to-date on the latest research and best practices.
Childcare Providers - ensuring the safety and well-being of children in their care.
Goals
Unlike other brands in this space, Tommee Tippee doesn’t lecture parents on the right or the wrong ways to care for their baby; they want to support them by building an experience that educates and helps them to make their parenting journey that little bit smoother.
We wanted to create a different customer experience by not just selling baby products or giving patronising advice. Instead, we wanted this to be somewhere new parents felt comfortable and supported.
Design principles
Support and Educate ✅
Relatable and Empathetic ✅
Accessible and Inclusive ✅
Solution
The project was into five phases and used a process that included customer research, strategy, ideation and user-centred design principles to develop a clear proposition and user experience for the project.
Phase 1 - MVP Brand Catalogue
New parents suffered information overload and confusion due to the vast offering of products and advice thrown at them. To address this, we prioritised clear visual hierarchies and usability, which we applied in the following ways:
To address their needs, we...
... kept it simple - I aim to keep UI design as simple as possible, which was essential here as new parents are susceptible to cognitive overload due to fatigue. We applied this by minimising UI and sticking to conventional UI patterns that didn’t require learning.
... used just enough content - we wanted to educate the customer without overwhelming them, so the team spent a lot of time sorting and prioritising content and trimming anything non-essential. The resulting designs had clear hierarchies, making them easy to scan but informative enough to explain and sell the products.
... used authentic photography - many baby product sites lack an ‘authentic human element’, so we used contextual imagery of real parents using products in relatable settings.
Design System
I designed a modular system for our website, utilising atomic design principles. This approach allowed us to scale the project more efficiently throughout all stages of development. We broke down the interface into smaller, reusable components, which ensured the consistency of the site design while streamlining the overall design process. The modular design system facilitated iteration and development, resulting in a cohesive and user-friendly website experience.
Phase 2 - Post-launch enhancements
Some features fell out of the initial P1 scope, and there were some post-launch learnings. The results were minor tweaks and an empathetic homepage carousel we called 24-Hour Mum. It featured micro anecdotal videos and words of support relevant to the time of day and experiences parents could relate to. It was an excellent way for the brand to tell its customers they really do get it.
24 Hour Mum prototype
Phase 3 - Product support
Up to this point, Tommee Tippee’s product support relied on its call centre, which was costly to the business and inconvenient for the customer.
The resulting design was a linear visual flow that filtered products by category and model, directing the customer to their desired support page.
Then we hit a hurdle; the client had a wealth of support content, but the consistency and structure could have been better. With a limited budget, time and resources, we had to find a solution that was achievable within the scope.
Making the best of what we had, we developed content hierarchy guidelines to supplement a modular set of components that could display all the content types available, e.g. video, PDF, photography, etc. This enabled the client to offer its customers the best experience possible with the available resources.
Phase 4 - Social proof
Not undervaluing, but looking beyond user ratings, we wanted to develop something that tied back into our principles of being ‘relatable and empathetic’. So we created the ‘Parent Room’, a section featuring real parent stories, hints and tips.
Phase 5 - eCommerce
Our final task was to implement eCommerce site-wide.
Our goals
- Sell products whilst maintaining fundamental principles.
- Discoverability of SKUs (colours, sizes and designs) and offers.
- Cross-sell relevant products.
- Minimise friction, e.g. registration, cart and checkout.
- Apply e-commerce best practices, e.g. Abandoned cart, related products, transparent pricing, easy-to-use filters, and search.
Results
10%
increase in traffic in the first six months
25,000
active engagements with featured content
25%
increase in dwell time
Want to talk?
©2023 Eye Design Things LTD | Portfolio of Martyn Stivala | Privacy Policy | Term and Conditions