eve sleep navigation

Client

eve sleep

Dates

May – August 2019

Tools / methods used

Card sort, tree test (Optimal Workshop), prototyping & user testing (Sketch, InVision, InVision Studio)

Team

UX Designer (Laurence Davis), Product Manager, Developers

Background

The existing website navigation didn’t scale to eve’s expanding product range. On desktop, the design was limited to two rows of products, which were sometimes cut off some smaller screens. Mobile users were observed having difficulty finding the desired product or section, sometimes even scrolling past it. Also, some of the existing category labelling e.g. ‘Accessories’ meant users were unsure what to expect from those categories.

Also, with the way that the existing navigation was coded, it didn’t include the optimal tags and fields for SEO.

Third row of products disappears off the bottom of the screen

Research

The existing navigation was developed in eve’s custom CMS, using a rigid format, based around selling a small product range. On scoping the project it was decided that a new navigation would need to be developed from scratch.

First, we organised an online card sort. 20 users were given a list of 29 products, representative of eve’s growing range. Each user was asked to group the products into categories and give each category a name.

Some of the card sort results

From the results of the card sort, we created two navigation structures and performed a tree test with 50 users for each structure.

Each user was tasked with finding 10 items from across eve’s range. We measured how many users successfully found each item, how many users found the item directly and the time taken for each task.

Both navigation structures performed well overall. Navigation A, where bedding and bedroom furniture were both top-level nav items, rather than being nested under bedroom, performed slightly better.

Tree-testing on the street, before expanding the test online

Design

Based on structure A, I designed the new navigation mobile first, using a stacked three column layout for each section. Each column was intended to be customisable by the admin user, either as text links or product promo cards. This approach would offer flexibility to adapt and scale to the developing product range.

Some of the navigation wireframes

Next, using Sketch and eve’s pattern library, Snooze, I designed the UI and created a prototype in InVision. This was then tested with users on the street and then through in-house usability testing, iterating after each round. An early observation was that users tried / preferred to go straight from the navigation to listings pages to view all products in the range.

Previously, eve’s navigation was product-focussed. Some stakeholders were resistant to make the product links secondary in the mattress section – mattresses being the hero product and main revenue generator – but the new approach was accepted once backed up by data from user testing.

Prototyping the mobile version

Once the front-end design was agreed, I moved on to wireframe the admin user view, working with the CMS developer. Together we agreed the logic, flow and interactions involved in creating and editing navigation items.

I then went back and finalised the UI design, which was handed over to the front-end developer.

The navigation was then developed and released.

Outcomes

Soon after the release of the new navigation there was a 2% uplift in add to cart rate, although it is hard to say how much the work contributed to this. More certain are the direct positive effects on page load speed (reduced by around 1 second) and SEO, which should improve even more over time since it is now possible to link to a wider range of listings pages e.g mattresses by size, mattresses by type etc.

The live navigation can be viewed at: www.evesleep.co.uk