Skip to main content
UI Coach Logo
Intermediate

School Meal Account Payment

Design a family payment experience for meal balances, low-fund alerts, siblings, automatic reload, receipts, and payment support.

Responsive web, Mobile2 to 4 hours

The brief

Understand the problem

Background

School meal accounts can involve several children, daily charges, subsidies, spending limits, card fees, and negative balances. Families should understand costs without children being publicly stigmatized for account status.

User context

Alicia manages lunch accounts for two children at different schools. One receives a partial subsidy, and the other has a field trip meal charge that she does not recognize.

Product problem

Alicia needs accurate child-level balances and payment controls, plus a private route to resolve an unfamiliar charge or difficulty paying.

Objective

Create household overview, payment, automatic reload, and charge support states for school meals.

What to design

Define the experience

Required experience

  • Review each child's available balance and recent charges
  • Add funds with transparent allocation and fees
  • Configure a bounded low-balance reload rule
  • Question a charge or request confidential payment support

Screens and states

  • Household meal overview
  • Add-funds checkout
  • Automatic reload settings
  • Charge detail and support

Core user flow

Follow the critical path

  1. 01

    Alicia sees that one child has three days of estimated meal funds remaining

  2. 02

    She adds $40 to that account and reviews the zero-fee bank transfer option

  3. 03

    She sets a $15 threshold with a $30 monthly reload cap

  4. 04

    Alicia opens the field trip charge and sends a private question to the school

Product rules

Requirements and constraints

Requirements

  • Separate balance, pending payments, subsidies, charges, and adjustments
  • Show processing time and any fee before payment
  • Let guardians allocate one payment across children
  • Make automatic reload threshold, amount, cap, and pause controls explicit
  • Keep financial support private and available without a failed payment

Constraints

  • Children must still receive meals according to school policy regardless of interface status
  • Only verified guardians can view account details
  • Bank and card payments may settle on different timelines

Reality check

States worth considering

A payment is duplicated
A subsidy is applied retroactively
Siblings attend different districts
The balance becomes negative during processing
A guardian loses access after a custody change

Finish line

What to deliver

  • Four responsive screens covering payment, reload, and charge support
  • A balance model for available, pending, subsidized, adjusted, and negative states

If you want more

Optional extensions

Add a multilingual monthly statement
Design a refund after a child changes schools

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
Abril FatfaceLato

Abril Fatface & Lato

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Advanced
Food and dining

Diet-Compatible Food Finder

Design a menu search experience that helps diners evaluate dishes against allergies and dietary preferences.

Mobile2 to 4 hours
Search and FilteringTrust and Safety
Advanced
Food and dining

Food Allergy Menu Screening

Design a menu screening experience that separates ingredient evidence, preparation controls, cross-contact uncertainty, and direct restaurant confirmation.

Mobile2 to 4 hours
Trust and SafetyContent Design
Intermediate
Food and dining

Restaurant Group Order and Bill Split

Design a shared restaurant order that coordinates individual choices, dietary notes, deadlines, totals, and payment failures.

Mobile2 to 4 hours
Mobile DesignInteraction Design
Advanced
Food and dining

Food Freshness Decision Guide

Design a cautious food-checking assistant that combines package details, storage history, and visible signs without making unsafe guarantees.

Mobile2 to 4 hours
Trust and SafetyContent Design
Intermediate
Food and dining

Build a Catering Menu for an Event

Design a catering request flow that balances guest needs, dietary safety, service style, and budget.

Responsive web2 to 4 hours
FormsInformation Hierarchy
Intermediate
Food and dining

Choose a Restaurant Table

Design a reservation flow that lets diners understand a restaurant floor plan and request a suitable available table.

Mobile2 to 4 hours
Interaction DesignAccessibility