Project overview
You are designing first weeks at home after hospital discharge: short daily check-in and clear danger signs. Calm tone beats a clinical hospital portal.
- 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 · Check-In · Warnings · Help
- 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 has one of the highest newborn mortality rates in the world. Most mothers are discharged within 24 hours of birth and receive no follow-up. They get conflicting advice from family, traditional birth attendants, and social media. Simple warning signs like infection, poor feeding, or dangerous fever go unnoticed until it is too late. If you cite mortality context, UNICEF or WHO summaries are fine. Do not invent numbers.
Primary user
"Blessing, a 26-year-old first-time mother in Anambra who was sent home one day after delivery and has no idea whether her baby's weight, feeding schedule, or crying patterns are normal."
Geographic scope: National-level
Goals
User goal: Track her baby's daily health and know immediately if something is wrong.
Business goal: Partner with hospitals to offer postnatal digital follow-up as a service and connect mothers to midwives.
Success: In a quick test, a mother completes daily check-in, finds warning signs, and understands the high fever alert flow.
Market context
- Question
- Answer
- Who pays
- Blessing will not pay much. Hospitals, PHCs, or NGO maternal programs are realistic payers (assumption).
- Why not WhatsApp
- Mothers get conflicting advice on WhatsApp from aunties and churches. App gives one daily checklist and fever alert pattern, not chat opinions.
- Design focus
- Focus first 14 days home: 3-field check-in, danger signs, calm tone. Do not build full telemedicine.
Competitors to check:
- Babymigo (pregnancy through early parenting; app + SMS)
- mDoc and other telehealth apps (broader consults)
- Family WhatsApp + chemist (default after discharge)
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
- Daily baby health check-in: weight, feeding sessions, and sleep duration
- Warning signs checklist with colour-coded risk levels and clear next steps
- Chat with a midwife for questions and reassurance
Out of scope
- Full pregnancy tracking or delivery booking
- Prescriptions or insurance
- 24/7 human chat unless you label it as assumption
Screens
Design every row in wireframe, high-fidelity UI, and prototype (where the flow applies).
| # | Layer | Screen | What to show |
|---|---|---|---|
| 1 | Auth | Splash Screen | Soft, warm app logo. Calm colour palette, no clinical feel. |
| 2 | Auth | Onboarding (2 screens) | Screen 1: 'Your baby needs you. We'll help you know they're okay.' Screen 2: Enter baby's name and date of birth. |
| 3 | Auth | Sign Up Screen | Mother's name, phone number, and PIN. Ask for baby's name and birthdate here. |
| 4 | Auth | Sign In Screen | Phone number and PIN. |
| 5 | App shell | Home (tab) | Baby's name and age in weeks. Today's check-in status (Done / Not Done). Latest health summary at a glance. |
| 6 | App shell | Check-In (tab) | Simple form: weight, number of feeds today, hours of sleep. Three inputs only. Large friendly buttons. |
| 7 | App shell | Warnings (tab) | A checklist of common danger signs (fever, no feeding, yellow skin). Each item links to a plain-English explanation and what to do. |
| 8 | App shell | Help (tab) | Simple chat interface. Show midwife name and photo. Allow mother to type a question and receive a response. |
| 9 | Core flow | Daily check-in · Saved | Weight, feeds, sleep logged for baby. Show bottom nav on post-sign-in screens. |
| 10 | Core flow | Warning detail | One danger sign explained with what to do. Show bottom nav on post-sign-in screens. |
| 11 | Core flow | Midwife message sent | Question submitted in Help tab chat. 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: Daily check-in · Saved · Warning detail · Midwife message sent
Flow 3 · Navigation
Link every nav tab so examiners can tap each bottom nav item. Tabs: Bottom navigation with 4 items: Home · Check-In · Warnings · Help
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):
Mother logs a temperature above 38°C. Immediately show a full-screen red alert: 'High Fever Detected. Take your baby to the nearest hospital now.' Include a 'Find Hospital' button.
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