Dossier › Document 01
DOCUMENT 01 · UI MOCKUPS

Home, List & Detail

High-fidelity mockups of the three core screens a shopper touches — and a map of exactly which backend field each pixel is bound to.

3
Core screens
1
Search box, five sources
5→1
Sources compared inline

The product is deliberately simple on the surface: search or browse on Home, scan ranked results on the List, and see the five-source price/stock/ETA comparison on the Detail screen. Everything hard happens in the backend (Doc 05).

The three core screens

9:415G  100% ▮
Deliver in 10 min to Home · Koramangala
Everything, in minutes ⚡
One search across Blinkit, Zepto, BigBasket, Flipkart & Amazon — we buy you the best.
🛒
Grocery
🍫
Snacks
🥤
Beverages
🧴
Personal
🎧
Electronics
🏠
Home
🍼
Baby
💊
Pharmacy
Best deals near youSee all →
🍜⚡ 12 min
Maggi 2-Minute Masala Noodles
Pack of 12 · 840 g
₹144 ₹168
Cheapest via Blinkit
ADD +
🥤⚡ 9 min
Coca-Cola Soft Drink 750ml
750 ml bottle
₹40 ₹45
Cheapest via Zepto
ADD +
🏠Home
🔍Search
🛒Cart
📦Orders
👤Profile
Home
Location · search · categories · deals
9:415G  100% ▮
⚡ Fastest
💰 Cheapest
⭐ Top rated
✓ In stock
18 results · comparing 5 sources
🧈⚡ 11 min
Amul Butter (Salted)
500 g
₹268 ₹295
Best via Blinkit
ADD +
🧈⚡ 14 min
Nandini Butter
500 g
₹255 ₹280
Best via BigBasket
ADD +
🧈⚡ 10 min
Mother Dairy Butter
500 g
₹272 ₹290
Best via Zepto
ADD +
🧈⚡ 11 min
Amul Butter (Salted)
100 g
₹58 ₹62
Best via Blinkit
ADD +
🏠Home
🔍Search
🛒Cart
📦Orders
👤Profile
List — search “butter”
Ranked results · filter chips · cheapest source per item
9:415G  100% ▮
Product detail
🧈
Amul Butter (Pasteurised, Salted)
⚡ from 9 min
500 g · Dairy › Butter & Cheese
₹268 ₹295 Save ₹27 · 9%
Compare 5 sourcesranked by value
Bk
Blinkit
In stock · 11 min · Free delivery
₹268
Best
Zp
Zepto
In stock · 9 min · ₹15 delivery
₹265
₹280 landed
BB
BigBasket
In stock · 95 min · Free
₹262
Az
Amazon
In stock · next day · ₹40
₹259
₹299 landed
Fk
Flipkart
Out of stock in your area
excluded
Best total
₹268 · 11 min
Add to cart
🏠Home
🔍Search
🛒Cart
📦Orders
👤Profile
Detail — Amul Butter 500g
Price · MRP · savings · five-source compare · add

Prices, ETAs and stock are illustrative. Screens shown at ~1× phone width.

What each element is bound to

Every visible value maps to a field the backend produces. The comparison block is the ranked offers[] array from the Price & Availability Engine (Doc 05), and each source's numbers come through its adaptor in MCP Integrations (Doc 04).

UI elementBound toSource
Delivery ETA badge ⚡ 11 minoffer.etaMinutes (per zone)Winning source MCP → Doc 04
Struck-through MRP ₹295offer.mrpPaise / 100Source listing → Doc 04
Live price ₹268offer.pricePaise / 100 (effective, post-offer)Doc 05 §Normalise
“You save ₹27 · 9%”mrpPaise − pricePaise → %Computed client-side
Source label “Best via Blinkit”response.best (winning sourceId)Doc 05 §Ranking
“Compare 5 sources” listranked offers[], sorted by scoreDoc 05 §Ranking
Filter chips (Fastest / Cheapest…)ranking weights overrideDoc 05 §Signals
“18 results · comparing 5 sources”sourcesReturned / sourcesQueriedDoc 05 §Scatter-gather
Search boxGET /v1/search?q=Doc 03 §API surface
“excluded” / out-of-stock rowoffer.inStock === falseDoc 05 §Ranking (dropped from live set)

ETA is a promise, per zone

The badge reflects the hyperlocal ETA for the shopper's delivery zone — not a global figure — because quick-commerce stock and dispatch are store-specific.

🏆

“Best” ≠ cheapest

The winning source is chosen by the weighted score (price + ETA + stock + reliability), so free delivery and a 11-min ETA can beat a lower sticker price.

🔁

Re-validated at checkout

Numbers on Detail are cached (30–60s TTL). The winning offer is re-fetched live before payment so the shopper never pays a stale price.

Notes for engineering & design

These mockups are static HTML + CSS on purpose No images or JavaScript are used — emoji stand in for product/category art — so the screens render identically in the browser and in the exported PDF. The live app is React Native (see Architecture, Doc 03); these frames define layout, hierarchy and data bindings, not the production component code.

Design tokens used

Brand indigo #4f46e5 Brand violet #7c3aed Quick green #16a34a — ETA & savings Ink #0b0b0b / muted #6f6d66

Source brand chips on the Detail screen use each platform's own colour (Blinkit green, Zepto violet, BigBasket lime, Flipkart blue, Amazon amber) purely to aid recognition; QuickCart chrome stays indigo/violet.