Project overview
You are designing term fee planning for parents with more than one child. The win is how much to save per month, not paying school online.
- 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 · Fees · Savings · Reminders
- 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
Millions of Nigerian parents are caught off guard by school fee deadlines every term. Public schools have hidden levies. Private schools send fee notes with little warning. Parents who earn monthly salaries struggle to save in time and end up borrowing or pulling children out of school.
Primary user
"Mrs. Adeyemi, a 42-year-old civil servant in Abuja with 3 school-age children who is always caught off guard by school fees and regularly borrows money to cover them."
Geographic scope: National-level
Goals
User goal: Track each child's school fees and save toward them monthly so she is never caught short.
Business goal: Build trust as a financial planning tool for parents and eventually offer school-fee loans.
Success: In a quick test, a parent adds one child, sees monthly save amount, and understands deadline urgency.
Market context
- Question
- Answer
- Who pays
- Mrs. Adeyemi may pay little directly. Schools, cooperatives, or banks marketing “school fee savings” are more realistic payers (assumption).
- Why not WhatsApp
- Parents use reminders in phone calendar or WhatsApp school groups. Those do not split per child, show monthly save amount, or term countdown in one view.
- Design focus
- Design multi-child term planner with red urgency and simple “save ₦X per month” math. Clarity for civil servants on salary dates.
Competitors to check:
- Paper + memory + phone calendar (default)
- Edusko / Lifebeta (school search + tuition finance; not multi-child term saver UI)
- Schoolable (fee financing for schools; B2B2C, not parent planner)
- PiggyVest / bank savings (general goals, not per-child term deadlines)
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
- Add a child and their school with term fee amounts and deadlines
- Monthly savings plan: app breaks down how much to save per month to meet each deadline
- Reminder notifications before each fee deadline
Out of scope
- School fee payment or bank debit
- Loans or insurance
- Teacher or school admin portal
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 name, logo, and tagline. |
| 2 | Auth | Onboarding (1 screen) | Explain the app in one sentence with an illustration of a parent and child. One 'Get Started' button. |
| 3 | Auth | Sign Up Screen | Parent name, phone number, and PIN. |
| 4 | Auth | Sign In Screen | Phone number and PIN. |
| 5 | App shell | Home (tab) | List of children with their next fee deadline and how much has been saved vs what is needed. Colour-code urgency (red = due soon). |
| 6 | App shell | Fees (tab) | Form: child's name, school name, fee amount, and term deadline date. Simple form with a Save button. |
| 7 | App shell | Savings (tab) | Show the monthly savings target to meet a deadline. Display a progress bar and the amount still needed. Allow user to log a savings contribution. |
| 8 | App shell | Reminders (tab) | List of upcoming fee deadlines with toggle to turn notifications on/off per child. |
| 9 | Core flow | Add child · Fee saved | Child, school, amount, deadline saved. Show bottom nav on post-sign-in screens. |
| 10 | Core flow | Savings plan | Monthly target and progress bar for one child. Show bottom nav on post-sign-in screens. |
| 11 | Core flow | Reminder set | Notification toggled on for upcoming deadline. 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: Add child · Fee saved · Savings plan · Reminder set
Flow 3 · Navigation
Link every nav tab so examiners can tap each bottom nav item. Tabs: Bottom navigation with 4 items: Home · Fees · Savings · Reminders
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):
Parent adds a fee deadline for a date that has already passed. Highlight the field in red and show: 'This date has already passed. Please enter next term's deadline.'
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