eve sleep product page redesign

Client

eve sleep

Dates

November 2019

Tools / methods used

Figma, Sketch, Google Optimize, Usability testing, A/B testing

Team

UX Designer (Laurence Davis), Product Manager, Developer

Background

During testing sessions with users, the following issues were observed on eve’s mattress product pages:

  • Users were often confused between the different features of individual mattresses
  • Users had low recall of the different mattress names and their features after browsing
  • Some users experienced difficulty navigating between mattresses
  • Users complained the product  pages were long, especially on mobile
  • The mattress comparison page proved confusing to use; many users were unsure which mattress they were looking at. Initially, most users didn’t realise that each mattress title was a dropdown select.


Based on these observations I redesigned the product page in Figma, making the following key changes:

Key details block

In the add to cart area I shortened the product intro text and replaced the Trustpilot logo with an anchor link to the reviews section further down the page.

The cross-sell section was removed as it wasn’t relevant to users at this point, potentially distracted from the primary add to cart and also negatively affected the balance of the page design.

The key details block was originally intended to provide a quick overview of the USPs for each product, but on the mattress pages it had become bloated with overly descriptive copy and contained attributes shared by all mattress models, reducing its overall impact and readability.

After viewing this content on one mattress product page, users were often observed scrolling past it on subsequent pages, assuming the content was the same. Later, when asked to name features specific to each mattress, users had problems recalling these.

The redesign addressed this by only including the key features where the mattresses differ in the left column and a summary of common features in the right column.

Also, the service-based USPs were moved to a new block (below), which included a new animated icon style which had been successfully tested on the homepage:

Video block

Using video content on product pages had previously been tested to mixed results. On the Premium mattress page, a short featured video increased add to cart rate, but on the Original mattress page various videos (embedded YouTube links) had no positive impact. In user testing, most users didn’t engage with this at all.

I hypothesised that a short video that played in frame and on scroll, which communicated the feel of the mattress could work more effectively and was worth testing. I edited a shorter cut from a video previously used for social marketing and added it to the page.

Product listing block

Although there was originally a cross-sell section higher up the page, there was no listing showing the alternative mattress models.

As well as making navigation between product pages easier, I thought this would also help reinforce the structure of the product range and the key differences between products. Including alternative products in the page was also recommended by Baymard.

Sleeper type block

In previous rounds of testing, users always engaged well with the sleeper type block and it helped reassure them the mattress would suit their needs.

However, sometimes users missed the content, as it was collapsed in an accordion across all devices. Also on desktop, the accordion had inconsistent open/close controls which were confusing for some users.

In the new design, I moved the content out of the accordion to increase visibility, as well as simplifying the copy and illustration to focus on the benefits of eve’s product, rather than what other mattresses don’t do.

Comparison page

As many users didn’t reaslise the title of each mattress in the existing design was a dropdown, I replaced the titles with actual dropdowns, from eve’s design system, Snooze.

The order of mattress features was made consistent with the information on each new product page. The related icons were also brought into the design. This, along with cutting down the length of the descriptions made the table much easier to scan.

In previous testing sessions, users were observed moving between the comparison table and the mattress pages. The new consistency across each layout was expected to make this process much clearer.

Outcomes

Variants of each of the mattress product pages and the comparison page were developed  – the A/B test is ongoing at the time of writing.

Due to the development and setup time for the test, we first tested the video in isolation on the original mattress product page (as the original was the biggest seller, significant results could be collected fairly quickly). The variant with the video block had a 5% higher add to cart rate.