Eve Sleep product page redesign

Company/Client: Eve Sleep

Project timeframe: 09/2019 - 11/2019

Tasks & responsibilities: Collate and analyse observations from previous user testing sessions, design new mattress product pages, build pages in CMS

Design tools / UX methods used: Figma, Sketch, Google Optimize

Team: UX Designer (Laurence Davis), Product Manager, Developers

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:

Add to cart area

(Use the slider to show before and after images)

Existing add to cart area New add to cart area

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, was potentially distracting and also negatively affected the balance of the page design.

Key details and services

(Use the slider to show before and after images)

Existing key details block New key details block

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 features 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

(Use the slider to show before and after images)

more-mattresses-new

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

(Use the slider to show before and after images)

Existing sleeper type block New 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

(Use the slider to show before and after images)

Existing mattress comparison New mattress comparison

As many users didn't reaslise the title of each mattress 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.