Ocado Navigation Bar - Redesign

- Personal Project (May 2023)

The Task:

Task 1: Analysis

Task 3: Designs

To analyse and improve the current Ocado websites navigation bar

In order to develop my learning curve using Figma, I decided to challenge myself by redesigning a popular brand navigation bar. I chose to use Ocado. Ocado is known for their cutting-edge technologies and offers a highly regarded User Experience/User Interface (UX/UI) Graduate Scheme. Due to this, I saw them as a perfect test subject to analyse and develop. I tasked myself to analyse and create a set of suggested improvements to the current design.

- Analyse the current Ocado website navigation bar

My initial thoughts and analysis of the current Ocado navigation bar:

  • A great selection of offers available at quick access at the top of the design.

  • Equally good selection of dropdown options - images & text included.

  • Logo/search bar/etc all in an order you would expect - abiding by Hick’s Law, adding to the navigations ease of use.

Task 2: Research

  • Use of colour to make certain areas stand out - The Von Restorff Effect.

  • Good use of greyed out checkout page during inactivity accompanied by small text explaining minimum requirements to activate.

  • Overall very user efficient and user friendly.

- Analyse competitors website navigation bar designs

In order to create a sense of urgency, I decided to give myself a short window of time to complete this project. Therefore, my research isn’t as in-depth as I would usually like. For competitor research, I concentrated my efforts on two major players in a similar industry as Ocado to gauge what makes a good nav bar.

Morrisons

Pros:

  • Good selection of dropdowns & tabs at the top of the page

  • Greyed out checkout/basket buttons until in use

  • Good use of colour scheme - uses yellow to highlight important areas

Sketches

Cons:

  • Tabs at the top of the page do not stand out

  • Corners are not rounded - rounded corners are known to be easier on the eye


John Lewis

Pros:

  • Good selection of drop downs & tabs at the top of the page

  • Eye catching sales message

  • Simple layout

  • Easy to navigate

Cons:

  • Lack of colours used to make other areas stand out

  • Font sizes on the small side

  • A lot of white space leading to the font looking even smaller

Before beginning any digital creation, I like to sketch out exactly how I imagine the design to look.

This helps to iron out any glaring issues as well as being the quickest way to display ideas.

Having a clear vision is helpful for both myself and my peers during any design project.

Design Idea 1 - An enhancement on the existing design

My Suggestions on how to improve the existing navigation bar:

  • I would add a more interactive options bar above the main header - with indications as to which page you are currently on.

  • I would bring together the floating aspects for a more uniform design for the log-in, register, book a delivery and basket.

  • I would ensure the discount code is a clickable link which copies the information ready to paste into the discount box during checkout - keeping the message as the focus, front and centre.

  • Leave out ‘Help Centre’ - this can be placed in the footer.

- Create my design solutions and explain my design thinking

Design Idea 2 - An enhanced redesign of the existing navigation bar

My Re-design:

  • I would look to leverage the brand logo as the centrepiece of the design - encouraging familiarity with the brand.

  • I would create a scrollable top option bar to save/condense options as well as making it interactive and create intrigue to explore more.

  • I would look to use icons instead of words for log-in/register/delivery/trolley to condense the design and make the design less wordy and more visually driven.

  • I would create a condensed version of the sales message to make the information easier to digest.

The Next Steps

- what I would do next should I continue the project

Review:

I would seek to understand how the users of the Ocado website interact with the current design and how they would react to the changes I have put forward.

Reflect:

I would analyse the results of a user testing exercise to understand the major faults and issues with the redesigned navigation bar I had put forward.


Re-design:

I would look to receive some critique and advice from peers/professionals on my design proposals. Leading to further understanding, learning and realisation.