Android App — Screen Guide

The Nandini platform ships three Android apps built in React Native from one design system — Material 3, deep indigo (#312E81) as the trust colour, saffron (#F59E0B) as the warmth accent, Roboto Flex type, 8 dp grid. Every screen below links to its interactive design canvas, where you can zoom, pan and open any screen fullscreen.

① Consumer App

The customer-facing shopping app. Open the interactive canvas →

Open & sign in

App launch → phone login → OTP → first-run registration → delivery location.

Screen	What it does
00 · Splash	Brand moment on launch; auto-logs in returning users from the stored token and routes them by role.
01 · Login — enter phone	10-digit phone entry, the single credential for customers. Terms note + CTA to request an OTP.
02 · OTP — verify code	6-digit code entry with auto-advance boxes, resend timer and error state for wrong codes.
03 · Register — your name	Shown only on first login; captures name (and optional email) to create the account.
03b · Forgot / trouble signing in	Recovery path for users stuck at login; offers re-OTP and support contact.
03c · Set delivery location	Location permission ask + GPS confirm so the app can check serviceability before showing the catalog.

Home & browse

Land on home → scroll the rails → search → category → product detail.

Screen	What it does
04 · Home (+ scrolled states)	M3 top app bar with the delivery address as title, 28 dp pill search, ETA hero (“farm to door in 24 hours”), trust strip, category grid, banner slider and 9 product rails. Captured in four scroll states plus a full-page render of every rail.
05 · Search — live autocomplete	Recent searches, popular items and live suggestions as the user types.
06 · Category (Milk)	Category landing with sub-category chips and product grid for a single category.
07 · See all — category landing	Expanded rail view: full product list behind any “see all” tap.
08 · Product detail	Gallery, variant picker (500 ml / 1 L…), price + discount tag, sponsor badge, similar products, add-to-basket bar.

Cart & checkout

Add to basket → review → coupon → slot → pay → placed.

Screen	What it does
09 · Empty basket	Friendly empty state nudging back to the catalog.
10 · Mini-cart on home	Sticky checkout pill on home once items are added — item count + total, one tap to basket.
11 · My basket	Line items with quantity steppers, price summary, savings line.
11b · Upsell — add a sweet box	Contextual cross-sell sheet before checkout.
12 · Checkout	Address, delivery-slot picker, coupon apply, payment method (Razorpay / COD / wallet), final total.
12b · Payment failed	Retry path with the payment reference preserved.
12c · Out of delivery zone	Serviceability fail state when no depot is within radius.
12d · Payment methods	Manage saved payment options.
13 · Order placed	Success screen with order ID and track CTA.

Track your order

Auto-assign nearest distributor → preparing → out for delivery → live map → OTP at the door → delivered.

Screen	What it does
14 · Order detail — Track	Order summary with items, amounts and the Track button.
15 · Assigning	“Finding the nearest distributor” state while the engine routes the order.
16 · Preparing	Distributor accepted; shows depot and the assigned delivery partner.
17 · Out for delivery	Status timeline advances; ETA and rider card appear.
18 · Live location	Real-time rider position on Google Maps with traffic and route polyline (Socket.io updates).
19 · OTP handover	The customer’s 4-digit code the rider must enter at the door — proof of delivery.
20 · Delivered — rate	Confirmation + rating prompt for order and rider.

Subscriptions (daily milk routine)

Pick a plan or build custom → manage → pause → wallet auto-deducts per delivery.

Screen	What it does
21 · My subscriptions	Dashboard of active routines with next-delivery countdown.
22 · Fixed plans	Ready-made plans (e.g. 1 L daily × 30 days) with effective per-day pricing.
23 · Build custom	Product, quantity, frequency (daily / alternate / weekly), slot picker.
23b · Created — success	Confirmation with start date and wallet reminder.
24 · Subscription detail	Manage one routine — edit quantity, skip a day, view delivery log.
25 · Pause	Date-range picker for holidays; resumes automatically.
26 · Subscription wallet	Balance + daily deduction ledger (incl. low-balance alert variant).

Account & more

Screen	What it does
27 · Profile (+ edit)	Name, phone, linked addresses; edit profile form.
28 · Order history	All past orders with status chips and reorder.
29 · Addresses (+ add)	CRUD with Home/Work/Other labels; add flow uses map pin + GPS + serviceability check.
30 · Notifications	In-app feed with unread badge and mark-read.
31 · Wallet	Balance, referral code, transaction list.
32 · Coupons & rewards	Available coupons fetched live from the admin panel.
33 · Wishlist	Saved favourites, one tap to basket.
34 · Help & support (+ settings)	FAQ topics, complaint submission, app settings.

② Delivery Partner App

The rider’s end-to-end workday — the section creative teams usually need. Open the interactive canvas →

Splash · Login · Home

Open the app, sign in, go online.

Screen	What it does
00 · Splash	Rider-branded launch screen.
01 · Login — phone (+ OTP)	Phone + OTP sign-in, same pattern as the consumer app.
02 · Home — offline	The “go online” gate: big availability toggle (requires location permission) before any orders flow.
02b · Home — online + today	Live dashboard: earnings card, KPI tiles (deliveries, distance, online time), queued orders list.

Delivery run

Order alert → pickup → drop → delivered — the core loop.

Screen	What it does
03 · New order alert	Full-screen offer with an 18-second countdown, pickup/drop distances and payout — accept or pass.
03a · Batch route	Multi-drop run (3 orders) sequenced nearest-first.
03b · Decline — reason	Structured decline reasons so ops can tune assignment.
04 · Navigate to pickup	Turn-by-turn map to the depot (Google Directions + traffic).
05 · At depot — verify items	Item checklist with the distributor before leaving.
06 · Navigate to customer	Routing to the drop point with live ETA.
07 · OTP entry (+ error)	Enter the customer’s code to confirm handover; wrong-code state included.
07c · COD — collect cash	Cash-on-delivery collection with amount confirmation.
07d · Unable to deliver	Failure report (customer unreachable, address issue) — order re-queues.
08 · Delivered — earnings	Per-drop earnings summary: base + distance + tip.

Earnings & cashout

Screen	What it does
09 · Earnings — week view	7-bar weekly chart, trend, per-day breakdown, withdraw card.
10 · Cash out (+ success)	Instant UPI withdrawal — amount input, quick chips, UPI/bank selection, success state.

History · profile · compliance

Screen	What it does
11 · Order history	Past deliveries grouped by day with ratings and tips.
11b · Performance & ratings	Acceptance rate, on-time %, customer rating.
11c · Notifications	Operational alerts feed.
12 · Profile	Hero card with stats; menu to all account areas.
13 · Edit profile	Personal details + work preferences.
14 · Vehicle & documents (+ rejected)	Licence, RC, insurance, PUC, Aadhaar with verification status; rejected-document re-upload flow.
15 · Bank & UPI	Payout destinations — bank card, UPI handles, auto-cashout toggle.
16 · Insurance & safety	Coverage card + hold-to-trigger SOS and safety toolkit.
17 · Help & support	Ticketing, topic browse, priority banner for active-delivery issues.

③ Distributor App

Depot operations: fulfil B2C orders, buy stock B2B, manage money and compliance. Open the interactive canvas →

Open & sign in

Screen	What it does
00–02 · Splash, login, OTP	Phone login locked to the registered depot.
03 · Dashboard	Today at a glance — pending orders, revenue, stock alerts, quick actions.

Customer orders

Screen	What it does
04 · Order queue	Incoming B2C orders to accept or reject.
05 · Order detail — assign	Assign a delivery boy from the roster (or self-deliver).
05a/b · Reject → auto-reassign	Reject with reason; the platform auto-reassigns to the next-nearest distributor.

Stock & catalog (B2B)

Screen	What it does
06 · Catalog — all SKUs	Wholesale catalog with search and pagination.
07 · Product — slab pricing	Quantity-slab wholesale prices + current depot stock.
08–09 · Stock cart → checkout	Build a stock order and pay from the wallet/credit line.
10 · Inventory	Depot stock levels with low-stock alerts.

Wallet, billing & reports

Screen	What it does
11 · Wallet (healthy / overdrawn)	Balance and credit status; overdrawn state pushes “settle now”.
12 · Add funds	Top-up via Razorpay.
13 · Invoices & billing	Stock-purchase invoices with paid/unpaid status.
14 · Reports & analytics	Sales and inventory analytics for the depot.

Account, compliance & help

Screen	What it does
15–17 · Profile, edit, password	Depot profile with GPS position; credentials management.
18 · Bank & UPI	Payout / settlement details.
19 · GST & FSSAI	Compliance documents (reviewed in the admin panel).
20 · Delivery boys — roster	Add / remove riders attached to the depot.
21–25 · Help & support chat	Bot triage → live agent → resolved + rating; thread list for history.