Eve Sleep navigation redesign

Company/Client: Eve Sleep

Project timeframe: 05/2019 - 08/2019

Tasks & responsibilities: Research, redesign and test the website navigation, as well as the admin user view

Design tools / UX methods used: Card sort, tree testing, prototyping & user testing (Sketch, InVision, InVision Studio, Flinto, Optimal Workshop)

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

Eve's old navigation
Eve's old navigation
The new navigation design
The new navigation design

The problem

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.

Items were pushed off screen on some displays
Items were pushed off screen on some displays
The existing mobile navigation
The existing mobile navigation

The solution

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 range. Each user was asked to group the products into categories and give each category a name.

Some of the card sort results
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 top-level nav items, performed slightly better.

Navigation structure A
Navigation structure A
Navigation structure B
Navigation structure B

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.

eve-mobile-nav-wireframe
eve-desktop-nav-wireframe

Then, 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 later in organised sessions. The design was iterated after each round of testing. An early observation was that users preferred to go straight 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 the data from user testing.

eve-mobile-nav-mattresses
eve-nav-UI-desktop-mattresses

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.

Wireframe of the admin user view
Wireframe of the admin user view
Admin user view - actual
Admin user view - actual
The navigation on the live website (desktop)
The navigation on the live website (desktop)
The navigation on mobile
The navigation on mobile

Outcomes

The release of the new navigation coincided with 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.

Challenges

The navigation redesign was undertaken over a few months, the team working on it alongside other ongoing projects and experiments. As a consequence, it wasn't always possible for me to collaborate with developers as frequently as was ideal. This resulted in some delays with development.

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