Mothercare Sleep Tight

Landing Page UI Design
Project Overview
Mothercare has many brands for every stage of your child’s growth. With so many products to choose from, sometimes it can be difficult to choose the right one for you. We were challenged with the task of creating a landing page offering a range of products and advice for parents. The goal was to present the products using a 3-tier system.
We decided to go for a Gold, Silver and Bronze approach.Each stakeholder had the opportunity to have more prominence on the page. The more investment, the bigger the space. The modular grid allowed us to represent each product based on their level. The design was also very different to the other landing pages on the mothercare website.

With the nature of the design, we realised that having a bunch of buttons saying “shop now” all over the page would be very unattractive on desktop. There are different ways to show that an object is clickable.Therefore, we used subtle hover effects to indicate this.However, this approach wouldn’t work on mobile (you can’t hover!), so the compromise was to include ghost buttons, so they weren’t as intrusive. We found that this design change didn’t have a negative effect on sales.

The team worked with developers to bring our vision to reality. The landing page included the following functions; Accordions containing information for parents, Filter to sort cells by category, and Pop-up advice videos.
My Approach