Project overview
You are designing a personal health log for crises and triggers, plus a PDF a doctor can read. One-tap crisis mode is as important as the full log form.
- 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 · Log · Triggers · 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
Nigeria bears one of the world's largest burdens of sickle cell disease. Patients experience painful crises that land them in hospital. They often cannot clearly explain their pain history to doctors, leading to incorrect treatment. Triggers like cold, dehydration, and stress go untracked and unmanaged. If you cite disease burden, WHO or a Nigerian health source is enough.
Primary user
"Amaka, a 24-year-old university student in Lagos with sickle cell disease who cannot explain her crisis history to doctors and never knows what triggered her last episode."
Geographic scope: National-level
Goals
User goal: Log pain episodes, track what triggered them, and share a clear health summary with her doctor.
Business goal: Become the go-to health companion app for sickle cell patients in Nigeria and West Africa.
Success: In a quick test, someone logs one crisis, selects triggers, and finds export / crisis button without help.
Market context
- Question
- Answer
- Who pays
- Amaka will not pay subscription. Clinics, pharma, or sickle cell NGOs may fund (assumption).
- Why not WhatsApp
- Patients explain crises from memory in clinic. WhatsApp is not a structured pain log or PDF for doctors.
- Design focus
- Crisis button + trigger checklist + PDF export are the product. Keep medical tone calm, not clinical jargon.
Competitors to check:
- My Sickle Care (Android; pain log + community; Nigeria-linked)
- Sikila (sickle companion; symptom + hydration tracking)
- SCD Warriors App (SickleInAfrica; Play Store)
- Paper diaries + WhatsApp support groups (default)
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
- Pain crisis log with severity level, body location, and date/time
- Trigger tracker: log what the user was doing before each crisis (weather, stress, food, hydration)
- Health summary export: a simple PDF the user can hand to a doctor
Out of scope
- Diagnosis or treatment plans
- Insurance or hospital booking
- Community social feed
Screens
Design every row in wireframe, high-fidelity UI, and prototype (where the flow applies).
| # | Layer | Screen | What to show |
|---|---|---|---|
| 1 | Auth | Splash Screen | Calm, clean logo. Warm purple or deep blue palette to feel medical but not cold. |
| 2 | Auth | Onboarding (2 screens) | Screen 1: 'Your health history, in your hands.' Screen 2: Enter patient name, age, and genotype (SS / SC / other). |
| 3 | Auth | Sign Up Screen | Name, phone number, date of birth, and genotype. PIN for login. |
| 4 | Auth | Sign In Screen | Phone number and PIN. |
| 5 | App shell | Home (tab) | Days since last crisis (large number). Quick-access 'Log Crisis' button. Summary: crises this month vs last month. |
| 6 | App shell | Log (tab) | Body diagram to tap the area of pain. Severity slider (1 to 10). Date/time (auto-filled). Optional notes field. Save button. |
| 7 | App shell | Triggers (tab) | After logging pain, show a checklist of common triggers to select: Cold weather, Stress, Not enough water, Skipped medication, Overexertion, Other. |
| 8 | App shell | Summary (tab) | List of all logged crises with dates, severity, and triggers. 'Export as PDF' button to generate a doctor-ready summary. |
| 9 | Core flow | Log pain · Saved | Body area, severity, time saved. Show bottom nav on post-sign-in screens. |
| 10 | Core flow | Trigger tags | Triggers selected after logging pain. Show bottom nav on post-sign-in screens. |
| 11 | Core flow | Summary · Export ready | PDF export preview for doctor visit. 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: Log pain · Saved · Trigger tags · Summary · Export ready
Flow 3 · Navigation
Link every nav tab so examiners can tap each bottom nav item. Tabs: Bottom navigation with 4 items: Home · Log · Triggers · 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 is in severe pain and cannot type or navigate. Design a one-tap emergency button on the Home screen labelled 'I Am in Crisis'. Tapping it auto-logs a crisis and shows emergency steps.
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