How to easily navigate 40,000 products?

Because that's about how many Ocado has. Another thing about Ocado: most of its customers value time. The answer may be under our nose:
… masterfully disguised by all that noise. How long did it take you to locate the search box?
(we'll see average times later)
FACTS
  • search is much quicker than browsing through the catalogue
  • 70% of Ocado customers shop by searching
IDEAS
  • make customers find the search bar quicker
  • get more customers to use search
WHY
  • customers will navigate the catalogue more easily

Let's look at competitors

Big retailer = big search
For a smaller search box, a coloured background adds focus, visibility
Social media: medium-sized, next to the logo – so we always know where to look for it – recognisable!

There's research on this subject!

… which says we can make difference by tweaking:
Position – placing the search box centrally gives it more focus;
Style – a colourful background gives more contrast, emphasis;
Size – a big search box tells users: “this is the most important feature on the website”.

Let's try to appy all this! (a prototype)

Original

Prototype

Experiment #1

original
improved

Blurring

In the original version the most noticeable area is the 2 green search buttons, although it's difficult to say that they are responsible for the search.
In the improved version we can see there is a rectangle with a button on the right, standing out from the background.

Click testing

original
8.3 seconds (23 participants)
improved
4.9 seconds (14 participants)
Huge victory:
The result has improved from 8.3 seconds to 4.9 seconds.
The heatmap for the improved version is quite scattered. Can we make it even better?

Experiment #2

What's changed:
1. input area got smaller
2. text got darker
3. text became italicised - to give it a feeling of helping text
Bonus:
What if putting search next to logo would benefit us?
We can try it now!
left alignment
middle alignment

Click testing

left alignment
10.3 seconds (17 participants)
middle alignment
9.1 seconds (11 participants)
Surprise!
Both options yield times similar to what we have on website now.

Summary

We've tested 4 versions of search input:
original
wide input field
logo-hugging
medium-sized input field
Results: with the second version, people found the search box almost twice as fast.

Final prototype

Conclusion

We've discovered how to cut the time it takes for users to find the search box on the Ocado website by almost half, which means for users:
  • they are able to navigate the huge catalogue faster;
  • first-time customers get accustomed to search easier.
Back to homepage →