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