How I streamlined Supplier onboarding to boost sign-ups

  • Client
    Ocado Retail
  • Role
    Senior Web Designer
  • Tools used
    Figma
  • Responsibilities:
    Web Design
    Copy editing
    UX Design
    Form Design

Seizing an opportunity

Potential new suppliers were finding it difficult to use the original Supply Ocado website. This coincided with the rebrand of Ocado Retail which meant the site was as out of date.

Original website

Screenshots of the original homepage and form.

Screenshot of Old Supply Ocado Website Homepage.
Screenshot of Old Supply Ocado Website Application..

Our goals

  • Be clearer about the steps required to become a supplier.

  • Make it easier for potential suppliers to fill out the form.

  • Rebrand the website with new colours, font, style and tone of voice.

User experience challenges

Hover over or click one of the issue's below to see where on page the issue was located.

loading icon

1. No progress bar

Without a progress bar and the ability to save the form felt very time consuming.

An X or cross icon conveying  high exit rate.

2. High exit rate

High overall exit-rate for such an important page.

A scrolling mouse icon conveying low user interaction.

3. No call to action

No clear call to action means users aren't sure what to do next.

A alert icon conveying user frustration.

4. User frustration

Unusual terminology with no explanation leaves users frustrated.

Screenshot of Old Supply Ocado Website Application..
1
2
3
4

What we did next

  • We went through all the questions, removed the unnecessary and rewrote some to make them easier to understand.

  • We went through the form and layout out the questions and answers using better visual hierarchy, grouping and increased font sizes for legibility.  

  • We added an easy to get to glossary with sticky navigation.

How we improved the form

Hover over or click one of the issue's below to see where on page the improvement was located.

loading icon

1. Clear progress bar

A progress bar with headers showing how many steps left.

eye icon

2. Growing illustration

A custom illustration which grows with you every step of the journey.

Thumbs up icon

3. Easy to use form

Improved accessibility with larger clickable area's, font sizes and visual hierarchy.

Tick icon

4. Sticky glossary

Easy access glossary that follows you down the page.

A screenshot showing the first page of the supply ocado website online application.
1
2
3
4

Live website

Use the iframe below to explore the live website.

Exceptional results

two iphones side-by-side showing the supply ocado website on a kitchen surface with herbs, garlic and tomatoes.
Supply Ocado Website Mock up on a Mac
An image showing a grid of iPads with the new design of the Ocado Supply Ocado website.

Team credits

Richard Watters (me) - Senior Web Designer.
Robert George - Web Developer.
Amy Reeves - Copywriter.