Why 'less is more' in e-commerce
Trying to buy something online is sometimes a lot like a sporting event you've been forced into without knowing it. First there's the homepage to navigate, then accounts to create, passwords to reset, products to browse and compare. It's a lot, and it's no wonder you might give up.
Each page is like a hurdle that might trip you up. So, as a designer it's important to take away some of those hurdles, and make sure that the hurdles which remain are easy to overcome.
Removing hurdles will bring users closer to their goal
Identifying hurdles
The pages that I had responsibility over were the Hierarchy pages. These pages are for customers to build a basket. Customers building their basket for the first time are especially important, as their experience could be the deciding factor for if they return to shop with us again.
They're named the Hierarchy pages because they relate to each other in a hierarchy; each is a subsection of the previous.
Users filter down their choice using the Hierarchy
Doing some routine content analysis I noticed something curious - clicks on the search bar were always high on Zone pages, higher than clicks on the content. This was a good indicator of customer frustration on the page, that users weren't finding what they were expecting on the page.
Click through rates for elements on the Fruit & Vegetables zone
Looking at how customers were using the zone pages showed 3 main behaviours:
27.71% - Using the header to navigate to another page
20.54% - Using the left-hand navigation to get to deeper Hierarchy pages
7.35% - Clicking content
What were they trying to do? Nearly 50% of users, regardless of where they'd come from, they were simply trying to get to products to buy.
What zone pages (and Hierarchy pages in general) were doing, were blocking that goal of adding products.
This lead to the hypothesis that customers are more likely to add to basket if they are presented the opportunity sooner; and a clear problem to solve:
Reduce the number of steps from zone pages to product
Hierarchy pages were forcing customers to jump over hurdles to get to where they wanted to be: adding to cart
Designing a solution
Working closely with the Optimisation, Development and other stakeholder teams, we identified the technical and business limitations that may impact the design of the test.
In order to fit in with stakeholders priorities, these had to to meet the criteria:
• Retain current content monetization opportunities present on Zone pages
• Utilize existing components
• A uniform experience for desktop & mobile
Taking these into account I worked up a design for the page to balance the needs of the customer and stakeholders.
Invision wireframes based upon a lost notepad wireframe scrawlled in a meeting
The design focuses on the customer goal to add products to basket whilst also respecting the value hierarchy pages have, namely filtering.
Zones are large collections of products, numbering in the thousands. What department, aisles and shelves do is filter down those products to a selection. By introducing the ability to add products to basket at every level, it caters for all users, rather than those that know exactly what they want.
Navigation is kept primary, but products are kept above the fold to signify to customers that if they want to start shopping, they have the option to. An in-grid content spot provides a space for monetization.
Desktop
Control: Existing page design
Challenger: New page design
Mobile
Control: Existing page design
Challenger: New page design
The results
The test ran with 152,222 sessions and saw positive signs for the new page design with more customers adding products to their basket and booking a slot to complete their order.
Adds to cart
Total
Total
+1.3%
Adds to cart
Mobile users
Mobile users
+3%
Slots booked
Total
Total
+1.1%
Slots booked
Mobile users
Mobile users
+2.7%
This proved the hypothesis that people are more likely to add to basket if they are presented the opportunity sooner. It also provided a crucial first step in the redesign of Hierarchy pages, with further tests being run off the back of this, which would go on to inform designs for a full front-end migration.
