Case Study · Online Grocery Made Simple

ZipCart

Reducing friction between discovery and purchase — designing a faster, more intuitive grocery shopping experience.

Role

UX / UI Designer

Domain

E-Commerce · Grocery

Team

Product Manager · Marketing

Tools

Figma · Miro · Illustrator

01 — Overview

What is ZipCart?

An online grocery platform designed to simplify shopping by reducing friction across discovery, selection, and checkout.

Team

UX / UI Designer

Product Manager

Marketing Team

Tools

Figma Miro Illustrator

02 — The Problem

Users faced friction across multiple stages of the shopping journey, leading to drop-offs and reduced conversion.

01 Difficult product discovery — users struggled to find what they needed quickly across a broad catalogue

02 Inefficient navigation & lack of clarity in decision-making — unclear categories and product information reduced confidence

03 High cognitive load during checkout — too many steps and unclear flows caused users to abandon carts at the final stage

03 — The Collaboration

Cross-functional from the start

The project aligned product, design, commercial, and stakeholder perspectives to balance user needs with business goals.

🖌️

PM & Senior Designers

📈

Sales & Marketing

🧑‍💼

Stakeholders

04 — Product Discovery

End-to-end design process

We focused on uncovering how users actually browse, search, and purchase in real-world scenarios — identifying friction points from discovery all the way through to checkout.

Discover

Define

Ideate

Research

Design

Test

05 — Competitor Analysis

Detailed analysis across competitors

Feature	GoPuff	Amazon Fresh	DoorDash	FreshDirect	Uber Eats	ZipCart
Navigation	✓	✓	✓	✓	✓	✓
Smart Search	✓	✓	✓	✓	✓	✓
Streamlined Checkout	✕	✕	✓	✓	✓	✓
Freshness Info	✕	✓	✕	✕	✕	✓
Design Quality	✓	✕	✓	✓	✓	✓
Filters	✓	✓	✓	✓	✓	✓
Mobile App	✓	✓	✓	✓	✓	✓

06 — User Research

Qualitative interviews & quantitative surveys

We targeted regular grocery shoppers who had used at least one grocery delivery app in the past 6 months, combining in-depth interviews with a broad survey to validate patterns at scale.

Users Interviewed

340+

Survey Responses

Competitor Apps Audited

Key Research Findings

78% of users abandoned their cart at least once due to a confusing checkout process

64% wanted better search and category filtering to find products faster

55% said they distrust product freshness descriptions on current apps

82% preferred apps that remembered their frequent purchases — yet only 31% were satisfied with current delivery time estimates

07 — Information Architecture

Clear, goal-driven pathways

Reorganised the platform into five primary destinations, each structured around distinct user goals.

ZipCart App

🏠 Home

Turning insights into direction

How Might We

HMWMake product search so fast that users find what they need in under 10 seconds?
HMWCommunicate freshness and quality in a way users genuinely trust?
HMWReduce the checkout flow to the fewest possible steps?
HMWPersonalise the shopping experience without overwhelming the user?
HMWMake reordering frequent items completely effortless?

Feature Prioritisation (MoSCoW)

Must Have

Smart search with filters
Category browsing
Cart & checkout
Order tracking

Should Have

Freshness indicators
Reorder shortcuts
Delivery time estimate
Product ratings

Could Have

Personalised homepage
Shopping lists
Loyalty rewards
Referral system

Won't Have

Recipe suggestions
Social sharing
AR product preview

09 — Visual Design Decisions

A clean, trustworthy design system

Typeface

Lato

Regular

Medium

Semibold

Bold

Aa Bb Cc Dd 1234

Colour Palette

Primary
#22C55E

Dark
#1C1C24

Mid
#3A3A4A

Light
#EEEEF4

Icons

🛒🔍🏠💳📦❤️📍🔔⭐🥕🥛🍞

Final Designs

10 — Outcome & Reflection

Significant improvements over initial wireframes

The final ZipCart prototype was tested with 15 users in a second round of usability testing across all primary flows — home, search, product detail, cart, and checkout.

4.8/5

Usability Score

Rated by 15 participants across all primary flows in round 2 testing, using a standardised usability scale.

60%

Faster Checkout vs Average

Participants completed checkout 60% faster than the category average measured across six other e-commerce applications.

90%

Task Completion Rate

End-to-end task completion across all tested flows — up from 54% in round 1. The single-screen checkout redesign was the highest contributing change.

11 — Key Learnings

What I carry into every project

Learning 01

Reducing friction beats adding features every time

Every hour spent removing a step from the checkout was worth more than hours spent designing new features. Friction is the enemy of conversion — and the biggest lever for improving user experience in e-commerce.

Learning 02

Identifying a gap doesn't mean you have scope to fill it

Freshness communication was the biggest market opportunity we found — and the weakest part of our final design. Scoping design ambition to match available time and resources is a skill as important as the design itself.

Learning 03

Competitive research tells you where to look, not what to build

Analysing six competitor apps revealed surface patterns, but the real insights only came from user interviews. Competitive research frames the problem space — it's user research that reveals the actual solution direction.

Learning 04

Test assumptions early, not after the prototype is built

The jump from 54% to 90% task completion between round 1 and round 2 showed how much was left to discover after the first build. Earlier low-fi testing would have surfaced the checkout issues weeks sooner.