Case Study

Sainsbury's Groceries Online

UX design for Sainsbury's Groceries Online — concept development across Browse Next.JS and New In, shaping how millions of customers discover and shop for groceries.

Case Studies Sainsbury's Groceries Online
Client
Sainsbury's
GroceryEcommerce
Sector
United Kingdom
Services Delivered
Product Design Ecommerce Strategy Journey Mapping Personalisation Conversion Optimisation
About the client

Sainsbury's is one of the UK's largest supermarkets — and a digital business serving millions every week

19m+
Active digital customers

Sainsbury's serves over 19 million customers through sainsburys.co.uk and the Groceries app — making it one of the UK's largest online grocery platforms.

£2.8b
Annual online grocery revenue

Online grocery is one of Sainsbury's fastest-growing channels, driven by the .co.uk site and app — which together handle millions of orders per year.

7.4m
App downloads (Groceries)

The Sainsbury's Groceries app is the primary channel for repeat and habitual shoppers — with browse, search, and checkout all core to the weekly shop journey.

#2
UK online grocery market share

Behind only Tesco, Sainsbury's holds the second-largest share of the UK's online grocery market — competing directly with Ocado, Asda, and the major pure-play retailers.

My role

I worked as a Product Designer embedded in Sainsbury's digital team, leading UX across two concurrent workstreams on one of the UK's highest-traffic grocery platforms.

The Browse Next JS programme was a significant platform migration — moving the entire online grocery browse experience from a legacy stack to a modern Next JS architecture. My job was to define what that new experience needed to deliver: mapping every browse surface across zone, aisle, and shelf pages; identifying gaps between the current and target states; and producing a design specification that could drive both Phase 1 delivery and set the direction for what came next.

Phase 2 widened the scope. I led a structured competitor analysis across the major UK grocery retailers, synthesised behavioural and analytics data to understand where the existing experience was falling short, and developed a series of blue-sky concepts — from infinite scroll and contextual offers to personalised restock and moments of joy — each grounded in evidence and framed for engineering feasibility.

Alongside Browse Next JS, I drove the New In project from first principles. That meant running an app audit, synthesising customer sentiment research, benchmarking against competitors, and building the strategic case before a single screen was designed. The design discovery phase then tested multiple approaches — global navigation placement, filter patterns, badge systems, and terminology — through structured research with real users, delivering a clear, validated direction for the feature.

Design Process
Discover
Analytics & competitor research

Synthesised behavioural analytics across Sainsbury's browse experience and ran a structured competitor analysis across the major UK grocery retailers — identifying where the current product fell short and where opportunity existed.

Define
Parity mapping & IA

Mapped every browse surface across zone, aisle, and shelf pages — defining the parity gap between the legacy and Next.JS stacks and establishing the design specification that would drive Phase 1 delivery.

Design
Concepts & design discovery

Developed blue-sky concepts for Browse Next.JS Phase 2 and led a structured design discovery for New In — exploring navigation placement, filter patterns, badge systems, and terminology through user research.

Deliver
Specifications & validated direction

Delivered a Phase 1 design specification driving the Next.JS migration and a validated, research-backed direction for New In — each output framed for engineering feasibility and ready to take into delivery.

What I Designed
Browse Next.JS — Phase 1

Full parity specification across Sainsbury's zone, aisle, and shelf browse pages — mapping every surface and pattern needed to migrate the grocery browse experience from the legacy stack to Next.JS without regressions.

Browse Next.JS — Phase 2 concepts

Blue-sky concepts pushing beyond parity — infinite scroll, contextual offers, personalised restock, and moments of joy — each grounded in competitor analysis and analytics, and framed for engineering feasibility.

New In — strategy & background

A strategic deep-dive into the New In opportunity — app audit, customer sentiment synthesis, competitive benchmarking, and a framework defining what New In should mean for Sainsbury's and who it's for.

New In — design discovery

Structured design exploration covering global nav placement, homepage integration, filter patterns, badge systems, and terminology — each approach tested with real users and synthesised into a validated, clear direction.

New In

A strategic and design exploration into Sainsbury's New In feature — understanding what it could be, who it's for, and how it should work.

The challenge

Sainsbury's had no clear "New In" experience — customers couldn't easily discover recently added products, and the business lacked a consistent framework for surfacing newness across the site. The project needed to define what New In should mean, who it's for, and how it would sit within the wider browse experience.

My approach

I started with a background deep-dive — app audit, customer sentiment, benchmarking, and a strategic framework — to ground the project in evidence. The design discovery phase then explored global navigation, homepage placement, filter patterns, badge systems, and terminology, each validated through structured research.

New In — Background
1 / 17
New In — Design Discovery
1 / 25
New In — New Hub Page
1 / 20
Browse Next.JS

A two-phase exploration: first achieving parity across zone, aisle, and shelf pages, then pushing into new concepts for how online grocery browse could work.

The challenge

The Browse Next JS project set out to achieve full parity between Sainsbury's legacy and Next JS browse experiences — covering zone, aisle, and shelf pages — before pushing into new territory with blue-sky concepts. The existing experience lacked the patterns and flexibility needed to compete with pure-play grocery retailers.

My approach

Phase 1 mapped parity across the core browse hierarchy, defining supporting patterns and summarising what Next JS needed to deliver. Phase 2 widened the lens — competitor analysis, analytics deep-dive, and a series of blue-sky concepts covering infinite scroll, contextual offers, personalised restock, and moments of joy.

Browse Next JS — Phase 1
1 / 12
Browse Next JS — Phase 2
1 / 19
More in Ecommerce
See all Ecommerce work
Ecommerce
Sainsbury's Design System
Token-based design system powering five major UK retail brands.
View case study
Ecommerce
Boots
View case study
Ecommerce
Tesco
View case study

Projects shown include live work, pitch deliverables, and design produced as part of embedded or collaborative engagements. Some work was completed as part of a wider team. Deliverables reflect the scope and direction at the time of engagement — the live experience may have since changed, launched in a different form, or not proceeded to production. All brand assets and trademarks shown remain the property of their respective owners and are displayed here for portfolio reference only.

Previous case study
E-commerce
Sainsbury's Design System
Next case study
Healthcare
Haleon HealthPartner

Available for new engagements

Let's build better platforms

Senior product design available for engagements across enterprise ecommerce, fintech, and regulated systems.

Get in touch →