In 2013, Ocado signed a landmark 25-year partnership with Morrisons, providing a complete end-to-end solution — from digital platforms and applications to warehouse systems, picking, and delivery. This collaboration marked a major milestone for both companies and set the stage for building Morrisons’ first fully-fledged online presence.
The project’s scope was enormous: designing and launching a new web experience across desktop, mobile, iPhone, iPad, Android, Android tablet, and even the newly released Apple Watch Series 1. It was a fast-paced, high-stakes initiative with immovable deadlines — and an incredible opportunity to help shape the future of UK online grocery shopping.
Discovery & Audit
Given the size and complexity of the challenge, my first priority was to understand every aspect of Ocado’s existing ecosystem. Together with my design team, we conducted a comprehensive audit of all Ocado user journeys, screens, and platform behaviours.
This was a meticulous process involving:
● Thousands of screenshots and journey maps documented in Omnigraffle
● Direct collaboration with in-house developers to understand the technical frameworks
● Mapping critical user flows across registration, basket management, payment, slot booking, and delivery tracking
Online grocery shopping involves countless scenarios, edge cases, and dependencies. Speaking directly with developers early on was vital. Seemingly minor details — such as how payments handled split orders or how substitutions appeared in the basket — could later become major issues if misunderstood.
Once Ocado’s ecosystem was fully documented, we used that knowledge to shape Morrisons’ digital proposition — identifying opportunities to streamline existing flows, modernise usability, and introduce design consistency across every platform.
My Role & Responsibilities
I played a hybrid role — part hands-on designer, part design lead — overseeing the delivery of multiple workstreams simultaneously.
Key responsibilities included:
● Full audit of Ocado’s digital journeys and applications
● Running workshops and aligning cross-functional teams
● Wireframing and prototyping responsive journeys
● Creating and reviewing user interface designs
● Mentoring junior designers and onboarding new starters
● Producing detailed multi-platform style guides
● Maintaining daily communication with developers and stakeholders
Design & Delivery
We approached design with a mobile-first mindset. Having previously worked on Ocado’s first mobile website, I already had deep familiarity with the journeys, components, and constraints involved. This allowed the team to move quickly while maintaining high standards of usability and accessibility.
As new designers joined to meet delivery milestones, I shifted into a more managerial role — overseeing the progress, quality, and consistency of all design outputs while remaining hands-on when needed.
Collaboration with Morrisons was continuous. Regular workshops and feedback sessions ensured the visual direction stayed true to the Morrisons brand, while still leveraging Ocado’s technology stack. For features unique to Morrisons, I created custom mockups for approval before refining them into final, pixel-perfect UI designs.
Handoff & Implementation
Once all designs were approved, my team and I produced detailed style guides and exported assets across all platforms and screen sizes. These guides provided developers with precise documentation covering layout, spacing, colour, and interaction states.
Daily catch-ups and review sessions helped maintain alignment between design and build, ensuring what was developed matched the approved designs as closely as possible. This close working rhythm between design and development was critical to meeting the project’s tight timelines without compromising quality.
Outcome
The result was Morrisons’ first full digital presence, seamlessly powered by Ocado’s technology and logistics systems. Customers could now browse, shop, and manage orders across any device, from desktop to Apple Watch.
The launch represented a major step forward for both brands:
● For Morrisons, it was a confident entry into online retail.
● For Ocado, it was proof that their platform could scale and adapt to new partners — setting a new benchmark for white-label grocery technology.
Learnings
#1 Scale demands structure
Working across multiple platforms and teams simultaneously underscored the need for documentation and process. The audit and style guides became essential reference points — not just for design, but for communication and quality assurance across the business.
Working across multiple platforms and teams simultaneously underscored the need for documentation and process. The audit and style guides became essential reference points — not just for design, but for communication and quality assurance across the business.
#2 Collaboration is the glue
With so many moving parts, alignment between design, development, and brand teams was critical. Regular touchpoints prevented rework and kept momentum strong, proving that communication is as important as creativity.
With so many moving parts, alignment between design, development, and brand teams was critical. Regular touchpoints prevented rework and kept momentum strong, proving that communication is as important as creativity.
#3 Leadership through design
Transitioning from hands-on design to design leadership taught me the importance of mentoring and empowering others. Guiding new designers while maintaining a consistent visual and UX standard became one of the most rewarding parts of the project.
Transitioning from hands-on design to design leadership taught me the importance of mentoring and empowering others. Guiding new designers while maintaining a consistent visual and UX standard became one of the most rewarding parts of the project.
