Project overview
You are designing scan or type NAFDAC code → clear GENUINE or SUSPECT. Big results for older users. You are not a pharmacy; registry match is the story (label API as assumption).
- 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: Scan · History · Report · 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
Counterfeit and substandard drugs remain a serious risk in Nigeria. NAFDAC and public health sources report significant falsified medicine in circulation (verify any % you cite in your case study). Patients buy from roadside sellers and small chemists with no way to verify authenticity. Fake blood pressure drugs, antimalarials, and antibiotics put patients at serious harm. If you cite counterfeit medicine stats, name NAFDAC, WHO, or another source you can defend.
Primary user
"Mrs. Obi, a 60-year-old hypertensive woman in Onitsha who buys blood pressure medication from her local chemist every month and has no way to know if what she is taking is genuine."
Geographic scope: National-level
Goals
User goal: Quickly verify that the drug she just bought is genuine and NAFDAC-approved.
Business goal: Partner with NAFDAC and pharmaceutical companies to power a national drug verification database.
Success: In a quick test, someone gets a clear verify result and can use manual code entry when scan fails.
Market context
- Question
- Answer
- Who pays
- Mrs. Obi will not pay. NAFDAC, pharma, or pharmacies fund verification infrastructure (assumption).
- Why not WhatsApp
- Chemist says “this one na original.” WhatsApp cannot scan NAFDAC code or show GENUINE vs SUSPECT with registry data.
- Design focus
- Design for elderly user: big result, manual code entry when scan fails (in brief). No medical claims beyond registry match.
Competitors to check:
- NAFDAC Greenbook (official app: search approved medicines by name or NAFDAC number)
- NAFDAC MAS (scratch panel + SMS PIN on pack; default for many antimalarials)
- Chemist trust + packaging inspection (default behaviour)
- Chekkit / QR on some brands (check if still on packs you photograph for case study)
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
- Scan the drug's barcode or NAFDAC number to verify authenticity
- Show drug details: manufacturer, expiry date, and approval status
- Report a suspected fake drug directly to NAFDAC from the app
Out of scope
- Prescriptions or dosage advice
- Online drug sales
- Replacing NAFDAC enforcement
Screens
Design every row in wireframe, high-fidelity UI, and prototype (where the flow applies).
| # | Layer | Screen | What to show |
|---|---|---|---|
| 1 | Auth | Splash Screen | Clean medical feel. NAFDAC-green colour palette. App name and tagline. |
| 2 | Auth | Onboarding (1 screen) | Explain how the app works: Scan → Verify → Stay Safe. One 'Start Verifying' button. |
| 3 | Auth | Sign Up Screen | Name, phone number, state, and PIN. Simple, no medical background required. |
| 4 | Auth | Sign In Screen | Phone number and PIN. |
| 5 | App shell | Scan (tab) | Large camera viewfinder for scanning. 'Enter NAFDAC number manually' link below for when scanning fails. Recent verifications listed at the bottom. |
| 6 | App shell | History (tab) | Crystal clear result: GENUINE (green, large tick) or SUSPECT (red, warning icon). No ambiguity. Drug name and manufacturer shown below. |
| 7 | App shell | Report (tab) | Full drug information: NAFDAC number, manufacturer, country of origin, approval date, expiry date, and a list of known counterfeits to watch for. |
| 8 | App shell | Profile (tab) | Form to report a suspected fake: drug name, where purchased (market/chemist name and location], and an option to attach a photo. 'Submit Report' button. |
| 9 | Core flow | Scan · Processing | Camera viewfinder or manual NAFDAC entry. Show bottom nav on post-sign-in screens. |
| 10 | Core flow | Verification result | GENUINE or SUSPECT with drug name. Show bottom nav on post-sign-in screens. |
| 11 | Core flow | Report submitted | Fake drug report sent confirmation. 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: Scan · Processing · Verification result · Report submitted
Flow 3 · Navigation
Link every nav tab so examiners can tap each bottom nav item. Tabs: Bottom navigation with 4 items: Scan · History · Report · 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):
Barcode scan fails due to poor lighting or a damaged label. Automatically show: 'Scan failed. Enter the NAFDAC number printed on the packaging instead.' Display a clear input field.
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