Project overview
You are designing a daily money diary for market traders. Your main job is to make recording today's sales fast and showing weekly totals obvious. This is not a bank app.
- 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: Home · Record · Goal · Summary
- 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
Many market traders in Nigeria earn cash daily but have no way to track what they make or save. Money gets spent without any record, making it impossible to plan, save toward a goal, or know how business is doing week to week.
Primary user
"Fatima, a 34-year-old tomato seller in Kano who earns between ₦3,000 to ₦8,000 daily and has no idea how much she actually makes each week or how to save toward her children's school fees."
Geographic scope: National-level
Goals
User goal: Record daily income and savings quickly, even with low literacy or a basic smartphone.
Business goal: Build financial habit among market traders to later offer micro-savings or lending products.
Success: In a quick test, someone can record income, open weekly summary, and explain their savings goal without help.
Market context
- Question
- Answer
- Who pays
- Fatima will not pay monthly for a diary app. The payer is more likely a microfinance bank, agent network, or savings product (commission on deposits/loans) or a small subscription from market associations (assumption).
- Why not WhatsApp
- Traders already use notebooks and WhatsApp voice notes for “today’s sales.” WhatsApp does not give weekly charts, savings goals, or error-proof number entry for people with low literacy.
- Design focus
- Design for 10-second daily entry, big numbers, and Hausa/English-friendly labels. Win on habit and clarity, not banking features.
Competitors to check:
- Notebook + calculator (default for open-market traders)
- Simplebks, Kadzoris, OnTrack, MarketBook (Nigeria SMB sales/stock apps; more shop-focused than market-stall cash)
- Kuda, Moniepoint, OPay (payments, not daily profit + savings goal in one flow)
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
- Record daily income and savings with a simple one-tap entry
- View a weekly earnings summary in a clear visual chart
- Set and track a savings goal (e.g. school fees, new stock)
Out of scope
- Bank transfers, loans, or POS
- Multi-shop or staff accounts
- Tax filing or formal accounting
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, name, and tagline. Displayed for 2 to 3 seconds when the app opens. |
| 2 | Auth | Onboarding (1 screen) | One screen explaining what the app does in simple language. Include an illustration and a 'Get Started' button. |
| 3 | Auth | Sign Up Screen | Name, phone number, and PIN fields. Keep it minimal. No email required. |
| 4 | Auth | Sign In Screen | Phone number and PIN. Include a 'Forgot PIN' link. |
| 5 | App shell | Home (tab) | Show today's total income, this week's savings, and a shortcut to record income. Use big, clear numbers. |
| 6 | App shell | Record (tab) | Amount input, category sales or other, and a Save button. Entry should take under 10 seconds. |
| 7 | App shell | Goal (tab) | Goal name, target amount, current progress bar, and amount saved so far. |
| 8 | App shell | Summary (tab) | A simple bar chart of income per day this week. Show total income and total saved. |
| 9 | Core flow | Record · Save income | Amount entered, category picked, Save tapped. Show bottom nav on post-sign-in screens. |
| 10 | Core flow | Home · Updated totals | Today's income and savings updated after save. Feature 2 visible. Show bottom nav on post-sign-in screens. |
| 11 | Core flow | Goal · Progress | Goal progress bar moved. Feature 3 savings goal on screen. 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: Record · Save income · Home · Updated totals · Goal · Progress
Flow 3 · Navigation
Link every nav tab so examiners can tap each bottom nav item. Tabs: Bottom navigation with 4 items: Home · Record · Goal · Summary
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):
User types letters in the amount field. Show a clear inline error: 'Please enter numbers only' with the field highlighted in red.
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