✦ UX Wireframe Case Study
खाना
App
A complete UX wireframe document for a Nepal-focused food delivery platform — 4 apps, 30+ screens, bilingual Nepali/English, NPR pricing, and integrations for eSewa, Khalti and FonePay.
01 — Overview
The Challenge
खाना (Khana) means "food" in Nepali. The challenge was straightforward: what does a food delivery app look like when it's built for Nepal from the ground up — not adapted from an international template? Every existing Nepal food delivery app — Foodmandu, Bhojdeals, Pathao Food — was designed primarily for urban India or Southeast Asia and localised for Nepal as an afterthought.
Before any visual design, I needed a complete UX blueprint documenting every screen, every flow, every edge case — for all four user roles. This wireframe document is that blueprint.
🏗️
No UX Blueprint Exists
No comprehensive, Nepal-specific UX documentation existed for a multi-role food delivery platform covering all four apps simultaneously.
🌐
Bilingual Gap
Nepal's population is bilingual. No existing app fully supports Devanagari + Latin across all four user roles in a consistent, designed way.
💳
Local Payment Blindspot
eSewa, Khalti and FonePay are Nepal's primary payment methods — yet most food delivery apps treat them as secondary integrations rather than first-class flows.
🛵
Rider UX Neglected
Rider apps in Nepal are universally poor — slow accept flows, no earnings visibility, and no document verification built into onboarding.
02 — User Research
Three Personas
I defined three primary personas representing the key human roles in the खाना ecosystem — customer, restaurant owner, and delivery rider. Each has fundamentally different goals, frustrations and contexts of use.
Goals
Order food quickly between classes. Track delivery in real time. Use Khalti to pay without leaving the app.
Frustrations
Apps that switch to browser for payment. No Nepali language option. Unclear delivery ETAs.
Context
Orders 4-5 times per week. Primarily on mobile. Recommends food to friends via screenshot.
Khalti userBilingualMobile-onlySocial sharer
Goals
Accept orders quickly. Know his earnings at the end of each day. Complete document verification without visiting an office.
Frustrations
Accept timers that are too short to read. No earnings history. Having to submit documents in person.
Context
Works 8-10 hours daily. Checks earnings after every delivery. Uses older Android phone with small screen.
Android userEarnings-focusedSmall screenFull-time rider
Goals
See incoming orders as they arrive. Accept or reject with confidence. Check weekly revenue without calling anyone.
Frustrations
Missing orders because the notification was silent. No way to temporarily pause orders during rush hour.
Context
Manages 3 staff. Uses a shared tablet at the counter. Checks revenue once a week on Fridays.
Tablet userRevenue-focusedNeeds simplicityShared device
03 — UX Principles
What Shaped Every Screen
🗺️Map Every Flow First
No screen was designed until the full user journey for that role was mapped end-to-end. Structure before pixels.
🌐Bilingual Everywhere
Every label, button, and screen name has a Nepali Devanagari equivalent. Not a translation — a first-class version.
💳Payment as Primary Flow
eSewa, Khalti and FonePay are treated as primary checkout paths — not alternatives buried after a credit card form.
⏱️Time-Critical UX
Rider accept/decline and seller order management are high-pressure moments. Designed for speed and clarity above all.
📱Android-First Reality
Nepal's smartphone market is predominantly Android. Wireframes are designed for 360px width and older hardware.
🔌Offline-Aware Design
Intermittent connectivity is reality in Nepal. Every screen accounts for loading, empty, and error states explicitly.
04 — Information Architecture
30+ Screens, 4 Apps
The wireframe document covers the complete information architecture of all four applications. Each screen is categorised by app and flow stage.
| App | Flow | Key Screens |
|---|
| Customer |
Onboarding |
Splash · Language select · Phone / eSewa login · OTP · Permissions |
| Customer |
Discovery |
Home feed · Category browse · Restaurant detail · Menu · Search |
| Customer |
Transaction |
Cart · Address · Payment (eSewa / Khalti / FonePay / COD) · Order confirmation |
| Customer |
Post-order |
Live tracking with map · Delivery confirmation · Rating & review |
| Seller |
Registration |
4-step restaurant onboarding · Document upload · Menu builder · Bank details |
| Seller |
Operations |
Live order queue · Accept / reject · Order detail · Pause orders toggle |
| Seller |
Analytics |
Daily revenue · Weekly chart · Menu performance · Customer reviews |
| Rider |
Onboarding |
Document verification (licence, citizenship) · Bike registration · Approval status |
| Rider |
Operations |
Online / offline toggle · 15s accept timer · Pickup → en route → delivered flow |
| Rider |
Earnings |
Today's earnings · Trip history · Weekly summary · Withdrawal |
| Admin |
Dashboard |
Platform analytics · Revenue · Orders · Active riders · Restaurant map |
| Admin |
Management |
Restaurant approvals · Rider verification · Order monitor · Dispute resolution |
| Admin |
Finance |
Payout processing · Commission reports · Payment gateway reconciliation |
05 — Key UX Decisions
Why I Designed It This Way
01
15-Second Rider Timer
After studying Pathao's timer UX, 15 seconds was chosen: long enough for a rider to read the pickup location and distance, short enough to maintain platform delivery SLAs without degrading customer experience.
02
4-Step Seller Registration
Breaking restaurant onboarding into 4 explicit steps (Basic Info → Menu → Documents → Bank Details) reduces abandonment. Each step feels completable. Users can save and return between steps.
03
Language at First Launch
Language selection is the first screen — not a setting buried in a profile menu. For an app named खाना, Nepali must be available from the first tap, not discovered later.
04
COD as a First-Class Option
Cash on Delivery is still the dominant payment method for food in Kathmandu. It sits alongside eSewa and Khalti — not below them. Removing the hierarchy removes the friction.
05
Pause Orders Toggle for Sellers
During lunch and dinner rushes, restaurants get overwhelmed. A one-tap "Pause Orders" toggle — inspired by Grab Food's seller app — lets sellers manage capacity without going offline entirely.
06
In-App Document Upload for Riders
Requiring riders to visit a physical office for document verification was the single biggest barrier to rider supply in Nepal. Full in-app photo upload at onboarding removes that barrier entirely.
06 — Reflections
What I Learned
01
Wireframes are the hardest part of the design process — hi-fi visuals take skill, but UX architecture takes decisions. Every screen in this document required a choice about hierarchy, flow and user priority.02
Designing for multiple roles simultaneously reveals conflicts — what's optimal for a seller (slower order confirmation for accuracy) directly conflicts with what's optimal for a customer (fast confirmation). Wireframes are where these conflicts surface and get resolved.03
Nepal's payment ecosystem is richer than most designers assume — eSewa, Khalti, FonePay and IME Pay all have distinct user bases and transaction limits. Getting payment UX right requires researching each one specifically.04
Wireframe documentation is a communication tool — this document exists not just for design but for developers, stakeholders and investors. Clarity and completeness matter as much as UX quality.05
This project directly informed the Swaadd hi-fi design — the wireframe's structure, flow decisions and IA became the foundation for the hi-fi Swaadd screens. Wireframes first, pixels later — always.
What Comes Next
The UX blueprint is complete. Here's what would follow moving from wireframe to live product.
🎨Hi-Fidelity Design
Apply a visual design system to these wireframes — colour, typography, imagery, motion. See the Swaadd case study for what that looks like.
🧪Usability Testing
Test the wireframes with real users across all three primary personas — 5 participants per role, moderated sessions in Kathmandu.
💻Development
React Native for mobile apps (single codebase for iOS + Android), Node.js backend, eSewa/Khalti SDK integration.
📄 View Full Wireframe PDF
→ See the Hi-Fi Design (Swaadd)