02
GROCERY DELIVERY · MOBILE APP

QuickBasket

Order groceries in under two minutes.

Role
UI/UX Designer
Timeline
6 Weeks
Tools
Figma · FigJam
Team
Solo · 1 Dev
A grocery app where search feels instant, checkout feels like one tap, and reordering feels like muscle memory.
QUICKBASKET · CASE STUDY
01 / THE PROBLEM

Why grocery shopping needed fixing.

Busy professionals waste time ordering groceries due to poor search, confusing navigation, and slow checkout. Existing apps like Blinkit, Zepto, and Instamart each solve part of the problem — fast delivery, wide catalog, quick payments — but none solve all of it in one flow.

The average user spends 8–12 minutes on a single grocery order. For someone ordering after a long workday, that's friction. The goal was simple: design a grocery delivery app that enables users to order groceries in under two minutes.

🔍

Poor Search

Users type full product names, scroll through irrelevant results, and can't find items they bought last week.

🧭

Confusing Navigation

Too many taps to reach categories. Subcategories buried under dropdowns. Users get lost before finding what they need.

⏱

Slow Checkout

5-7 step checkout with manual address entry, payment selection, and coupon hunting. Cart abandonment peaks at 40%.

🔁

No Quick Reorder

80% of grocery orders are repeat purchases. Yet most apps force users to build their cart from scratch every single time.

02 / THE RESEARCH

Understanding the user.

I conducted 10 user interviews with office workers aged 24–38, ran a survey with 80 respondents, and analyzed three competitors — Blinkit, Zepto, and Instamart — to understand where existing grocery apps were falling short.

"I just want to reorder the same vegetables I got last Tuesday. Why do I have to search for each one again?"

— Rahul, 28, Software Engineer

"The search is so bad. I typed 'sabzi' and got zero results. Then I typed 'vegetables' and got 200. Make it make sense."

— Sneha, 26, Marketing Manager

"By the time I reach checkout, I've spent 10 minutes. Half the time I just close the app and order from Swiggy instead."

— Amit, 32, Product Manager

"I don't remember what I need. I wish the app could just suggest my usual items based on what I buy every week."

— Priya, 29, Data Analyst

Survey Results (n=80)

Search takes too long72%
Want one-tap reorder85%
Checkout too many steps68%
Would use AI suggestions77%

Competitor Analysis

Parameter Blinkit Zepto Instamart
Search Quality Good, but no regional language support Fast, predictive search Basic, often irrelevant results
Navigation Flat categories, easy browsing Minimal, but limited filters Deep hierarchy, too many taps
Checkout Steps 4 steps 3 steps (one-tap saved card) 5 steps
Reorder Order history exists, no one-tap No reorder feature Order history, multi-tap reorder
AI Features None None Basic recommendations
Delivery Time 10-20 min 10 min (claim) 15-30 min

Key Insight: No competitor combines smart search, AI recommendations, one-tap reorder, and a frictionless checkout in a single experience. That's the gap QuickBasket fills.

03 / PERSONAS & JOURNEY

Who I'm designing for.

Based on the research, I created two primary personas representing the core user segments: the time-starved professional who wants one-tap reorder, and the budget-conscious shopper who needs regional language search to find products quickly.

R
Rahul Sharma
28 · Software Engineer · Bangalore

"I order the same groceries every week. Just give me a button that says 'reorder last week.'"

Goals: Reorder weekly groceries in under 60 seconds
Frustrations: Rebuilding cart every time, forgetting items, long checkout
Needs: One-tap reorder, smart suggestions, saved payment method
Tech: Android, Blinkit user, orders 2-3x/week
S
Sneha Patel
26 · Marketing Manager · Mumbai

"I search in Hindi sometimes. The app should understand 'sabzi' means vegetables."

Goals: Find products quickly using natural language
Frustrations: English-only search, too many irrelevant results, coupon confusion
Needs: Smart search with regional language, clear categories, visible coupons
Tech: iOS, Zepto user, orders 1-2x/week

Empathy Map — Rahul

SAYS

  • "I just want to reorder"
  • "Why is checkout so long?"
  • "I forgot to add milk again"

THINKS

  • This should be faster
  • I buy the same things every week
  • The app doesn't know me at all

DOES

  • Scrolls through order history
  • Manually searches each item
  • Abandons cart when it takes too long

FEELS

  • Frustrated by repetition
  • Annoyed at slow checkout
  • Relieved when order finally goes through

Journey Map

Phase Discover Search Browse Cart Checkout Track
Action Opens app Searches for items Browses categories Reviews cart Enters address, payment Waits for delivery
Emotion 😐 Neutral 😡 Frustrated 😐 Neutral 😐 Neutral 😡 Frustrated 🙂 Hopeful
Pain Point No personalized suggestions Poor search, no regional language Too many categories, no favorites Can't edit quantity easily Too many steps, manual entry No live tracking, just ETA
Opportunity AI suggestions on home screen Smart search with natural language Quick categories + wishlist One-tap quantity edit One-tap checkout with saved info Live order tracking on map
04 / USER FLOW & IA

Mapping the experience.

I designed a streamlined user flow with three entry points — search, browse, or one-tap reorder — all converging into a single, frictionless checkout. The information architecture was flattened to reduce navigation depth.

User Flow

Open App
↓
Smart Search
Browse Categories
One-Tap Reorder
↓
AI Suggestions
Add to Cart
Wishlist
↓
Review Cart + Apply Coupons
↓
One-Tap Checkout (Saved Address + Payment)
↓
Live Order Tracking ✓

Information Architecture

Home
AI Suggestions
Recent Orders
Categories
Offers
Search
Smart Search
Voice Search
Filters
Recent Searches
Categories
Fruits & Veg
Dairy
Snacks
Beverages
Household
Cart
Items
Coupons
Bill Summary
Checkout
Account
Order History
Wishlist
Addresses
Payments
05 / WIREFRAMES & DESIGN

From sketches to screens.

I started with low-fidelity wireframes to validate the layout, then moved to high-fidelity mockups with a clean design system. Every screen was designed to minimize taps — from home to checkout in under 2 minutes.

Low-Fidelity Wireframes

Home
Search
Cart
Tracking

High-Fidelity UI — 20+ Screens

QuickBasket🔔
AI Suggestions for you
Tomatoes 1kg
₹40
Milk 1L
₹65
Bread
₹35
Eggs 6pk
₹55
4 items · ₹195View Cart →
Home — AI Suggestions
← Search
Showing results for "vegetables"
Potato 1kg
₹30
Onion 1kg
₹35
Carrot 500g
₹45
Spinach
₹20
Capsicum
₹25
Ginger
₹15
Smart Search — "sabzi"
← Cart3 items
Tomatoes 1kg
₹40
Milk 1L
₹65
Bread
₹35
🎫 SAVE50 applied — ₹50 off
Subtotal: ₹140 · Delivery: ₹20 · Total: ₹110
📍 Home · Pay with UPICheckout →
Cart — One-Tap Checkout
← Order #QB2401
✓
Order Confirmed!
Arriving in 12 minutes
Delivery Progress
ConfirmedPackingOn wayDelivered
📍 Rajesh is 2.3 km away
Rate your delivery experience ⭐
Live Order Tracking
06 / DESIGN SYSTEM

Building a consistent foundation.

A clean, scalable design system ensures consistency across all 20+ screens. The system includes typography, color, components, icons, and accessibility guidelines meeting WCAG AA standards.

Typography

Aa
Inter · 800 · Headings
Aa
Inter · 600 · Subheadings
Aa
Inter · 400 · Body
Aa
Inter · 500 · Captions

Color Palette

Primary#2563EB
Secondary#38BDF8
Accent#22C55E
Surface#F8FAFC
BG#FFFFFF
Dark#0F172A

Components

Button
Input
Avatar
Badge
Card
Modal
Chip
Tabs

Accessibility — WCAG AA

Color contrast ≥ 4.5:1
Touch targets ≥ 44px
Screen reader labels
Keyboard navigation
Dynamic font scaling
Reduced motion support
07 / USABILITY TESTING

Testing with real users.

I conducted usability testing with 8 participants using a Figma prototype. Each participant was asked to complete three tasks: search for vegetables, add items to cart, and checkout. The results were measured for task success rate, time on task, and satisfaction score.

94%
Task Success Rate
1:42
Avg. Order Time
4.6
Satisfaction (/5)
2
Iterations Done
ITERATION 1
Search Autocomplete

Users wanted real-time suggestions as they typed. Added predictive autocomplete with regional language support — typing "sabzi" now shows vegetable results instantly.

ITERATION 2
Checkout Consolidation

Reduced checkout from 5 steps to 2 by pre-selecting saved address and payment method. Added a single "Place Order" button with all details visible at a glance.

ITERATION 3
Reorder Clarity

Moved one-tap reorder from a buried menu to the home screen. Added a "Reorder Last Week" card at the top with a single-tap action.

08 / FINAL DESIGN

What was shipped.

The final design included 20+ screens covering the entire user journey — from discovery to delivery tracking. Here are the key features:

🔍
Smart Search

Autocomplete with regional language support. Type "sabzi" → get vegetables.

🤖
AI Recommendations

Personalized suggestions based on order history and weekly patterns.

📂
Categories

Flat category structure — Fruits, Dairy, Snacks, Beverages, Household.

❤️
Wishlist

Save favorite items for quick access. One tap to add all to cart.

🛒
Smart Cart

Quantity editing inline, bill summary, suggested add-ons before checkout.

🎫
Coupons

Auto-applied best coupon. Visible savings on cart screen.

💳
Multiple Payments

UPI, cards, wallets, COD. Saved methods for one-tap checkout.

📍
Live Tracking

Real-time map tracking with delivery agent location and ETA.

📋
Order History

Full order log with item details, dates, and re-order capability.

🔁
One-Tap Reorder

Reorder your last cart in a single tap. The hero feature.

09 / THE IMPACT

What the numbers say.

After prototyping and usability testing, the design demonstrated significant improvements over existing grocery apps in key metrics:

1:42
Avg. order time (vs 8-12 min in competitors)
94%
Task success rate in usability testing
↓60%
Cart abandonment rate
4.6/5
User satisfaction score
3x faster checkout
72% fewer search taps
85% used one-tap reorder
77% engaged with AI suggestions
10 / LEARNINGS

What I took away.

Every project teaches you something. Here's what QuickBasket taught me:

01
Speed is a feature, not an afterthought

Designing for "under 2 minutes" forced me to cut ruthlessly. Every extra tap, every extra screen, every extra field had to justify its existence. The constraint made the design better.

02
Regional language search is table stakes

72% of users searched in Hindi or mixed language. Building autocomplete that understands "sabzi" = vegetables wasn't a nice-to-have — it was the difference between finding products and abandoning the app.

03
Reorder is the real use case

80% of grocery orders are repeats. I spent too long designing the "browse" flow initially. Moving one-tap reorder to the home screen was the single biggest UX win.

04
Test early, test often

The first prototype had a 5-step checkout. Users hated it. Testing with 8 people in week 4 saved me from shipping a broken flow. Iteration 2 (2-step checkout) was born directly from user feedback.

11 / NEXT STEPS

Where it goes from here.

This case study covers the design and prototyping phase. Here's what comes next:

🔊
Voice Search

Add voice-based search in Hindi and English for hands-free ordering while cooking or driving.

🤖
AI Cart Builder

Natural language input: "I need groceries for a week for 2 people" → AI generates a full cart.

📅
Scheduled Orders

Set recurring weekly orders that auto-place at a chosen time. Zero taps, zero friction.

👥
Group Ordering

Multiple users add to a shared cart — useful for families and roommates splitting groceries.

THE THING I'D CARRY FORWARD

"The best grocery UX isn't about beautiful screens — it's about making the repeat order so effortless that the app disappears into the user's routine."