Tools / methods used
Figma, Sketch, Google Optimize, Usability testing, A/B testing
UX Designer (Laurence Davis), Product Manager, Developer
During testing sessions with users, the following issues were observed on eve’s mattress product pages:
Based on these observations I redesigned the product page in Figma, making the following key changes:
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:
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.
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.
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.
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.
Due to the development and setup time for the main test, we first tested the video in isolation on the original mattress product page. The variant with the video block gave a 5% higher add to cart rate.
Variants of each of the mattress product pages and the comparison page were developed and A/B tested. However, due to organisational changes at eve, the test was cut short in favour of moving e-commerce operations to the Shopify platform. The new product page designs have been incorporated into the upcoming website, which is set to launch mid-2020.