Night Night Sleep Tight, Landing Page design

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.

ecommerce landing pageThe Approach

Modular Grid

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.

No more buttons

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.

Various devices

Over 80% of mothercare’s customers browse on mobile devices. The modular grid design works great because it’s easily adaptable for mobiles and tablets. The 3-tier system was adjusted to fit the viewfinder differently to desktop.

Other functions

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
  • Pop-up advice videos

View the landing page on the mothercare website.