Project overview
You are designing wet market grocery orders with clear tracking. Pick one neighbourhood story in your case study. Operations UX (fees, unavailable items) beats a huge product catalog.
- Platform
- Mobile app · Android-first · portrait
- Screens
- 11 screens + 1 unhappy path (12 frames)
- Features
- 3 core features
- Bottom navigation
- Bottom navigation with 4 items: Browse · Orders · Track · Profile
- Prototype
- 4 linked flows
Build order: Auth (screens 1–4) → nav tabs (5–8) → core flow (9–11) → unhappy path → link prototypes.
Problem & primary user
Working Nigerians, especially mothers, do not have time to visit wet markets during the week but want fresh tomatoes, peppers, fish, and vegetables. Supermarkets are expensive and poorly stocked. Market women already have the goods but no digital way to reach more buyers.
Primary user
"Adaeze, a 38-year-old working mother in Port Harcourt who only has time to shop on Saturdays and ends up eating expensive processed food during the week because she cannot reach the market."
Geographic scope: State-level (Rivers)
Goals
User goal: Order fresh groceries from a nearby market seller and receive delivery the same day.
Business goal: Connect market sellers to digital buyers and charge a 10% delivery and platform fee per order.
Success: In a quick test, someone browses, adds to cart, and follows order status including what happens when an item is unavailable.
Market context
- Question
- Answer
- Who pays
- Adaeze pays delivery fee + product markup (proven model). Seller may pay small commission per order (assumption).
- Why not WhatsApp
- Many buyers already order from market women on WhatsApp with voice notes and transfers. Pain is tracking, substitutions, and delivery status, not discovery alone.
- Design focus
- Design same-day wet market trust: seller name on every item, unavailable item flow (in brief), and clear fee breakdown. Beat chaos of chat orders.
Competitors to check:
- Chowdeck, Pricepally (grocery/food delivery; active in Lagos, PH, Abuja)
- Tradr (shop Mile 12 / Yaba via personal shoppers)
- WhatsApp + transfer to market woman (informal, dominant)
- Supermarkets (expensive, limited fresh produce)
Validate before you design
Interview 3–5 people who match your primary user. Update this brief if interviews contradict it. Do not start hi-fi until you complete the confirmation below.
- Validated user (name, age, city)
- Problem in one sentence
- One interview quote
- Success metric for your test
- Primary colour and tone
- One competitor you checked
Interview prompts
- "Walk me through the last time this happened."
- "What did you use instead? WhatsApp, paper, or nothing?"
- "What would make you trust this on a cheap Android phone?"
- "What would stop you from using this every week?"
Features & scope
v1 · three features
- Browse fresh items by category (vegetables, protein, pepper, grains)
- Order from a nearby verified market seller
- Real-time order tracking from confirmation to delivery
Out of scope
- Nationwide delivery or dark stores
- Restaurant meals (design for market produce)
- In-app payments (you may show payment as a future step only)
Screens
Design every row in wireframe, high-fidelity UI, and prototype (where the flow applies).
| # | Layer | Screen | What to show |
|---|---|---|---|
| 1 | Auth | Splash Screen | App logo and tagline on a vibrant background that evokes fresh food. |
| 2 | Auth | Onboarding (2 screens) | Screen 1: How it works: Order, Pack, Deliver. Screen 2: Enter delivery address to find nearby sellers. |
| 3 | Auth | Sign Up Screen | Name, phone number, delivery address, and PIN. |
| 4 | Auth | Sign In Screen | Phone number and PIN. |
| 5 | App shell | Browse (tab) | Category tabs and product cards with price and seller name. |
| 6 | App shell | Orders (tab) | Past orders list with status and reorder shortcut. |
| 7 | App shell | Track (tab) | Active order step tracker or empty state if no active order. |
| 8 | App shell | Profile (tab) | Name, delivery address, and phone. |
| 9 | Core flow | Product detail | Photo, price, quantity, Add to cart. Show bottom nav on post-sign-in screens. |
| 10 | Core flow | Cart · Place order | Items, delivery fee, Place order button. Show bottom nav on post-sign-in screens. |
| 11 | Core flow | Order tracking | Confirmed → Packed → Out for delivery steps. Show bottom nav on post-sign-in screens. |
Layers: Auth = 1–4 · App shell = 5–8 · Core flow = 9–11
Prototype flows
Link these in Figma. Examiners should click through without your voice-over.
Flow 1 · App entry
Flow 2 · Core task (all three features)
Core flow screens: Product detail · Cart · Place order · Order tracking
Flow 3 · Navigation
Link every nav tab so examiners can tap each bottom nav item. Tabs: Bottom navigation with 4 items: Browse · Orders · Track · Profile
Flow 4 · Unhappy path
Trigger the unhappy path edge case and link to that screen.
Unhappy path
Design this as its own screen state (frame 12):
A seller marks an item as unavailable after the user places an order. Send an immediate notification: 'Your [item] was unavailable. It has been removed from your order and you will not be charged for it.'
Link in Flow 4.
Design system
- Colour
- You choose. Keep it simple and readable.
- Type
- You choose. Keep body text easy to read on a phone.
- Tone
- Design for your user, not for a tech audience.
Reuse on every screen:
- Primary button (active and disabled states)
- Input field (empty, filled, and error states)
- Card or list item used across the app
- Navigation bar with correct labels and icons
- Empty state: what the screen looks like with no data
Submit & defense
Deliverables
| # | Deliverable | What good looks like |
|---|---|---|
| 1 | Wireframes | Every screen in this brief, plus the unhappy path. Layout and labels clear. |
| 2 | High-fidelity UI | Same frames polished. You choose colour and type. Bottom nav on every post-sign-in screen. |
| 3 | Prototype | Four linked flows (entry, core task, navigation, unhappy path). Examiners can use the app without your voice-over. |
| 4 | AI prototype | Figma Make: at least 2 screens. Share link. |
| 5 | Case study (1 page) | Problem · User · Who pays · Competitors · Solution · One design decision |
| 6 | Presentation (6–8 slides) | Name · Problem · User · Solution · Key screens · Flow demo · One decision |
Before you present
- Every screen designed in wireframe and hi-fi
- Unhappy path screen designed and linked in the prototype
- Four prototype flows linked end to end
- At least one empty state on a list tab
- Shared components reused: button, input, card or row, bottom nav
- Case study names who pays and one competitor you checked
- You can explain one design decision in critique (why, not what)
- Completed 5 user interviews or 1 usability test
- Checked at least one competitor listed under Market context