CHAPTER 04 / 13 · READ → DECIDE → BUILD
Design the moments between screens.
Make success, waiting, and recovery equally clear.
A journey is more than a set of pages
Map how a new visitor reaches the board, signs in, selects a task, submits a claim, and sees confirmation. Then repeat the map for a returning volunteer and a person whose session expires. Each state needs a sensible next action. If a task is claimed while the user is reading it, the app should explain the conflict and refresh the relevant state instead of displaying a generic error.
Design the uncertain states
Loading, empty, failed, and denied are different states. An empty board can invite a coordinator to add a task. A failed request needs a retry or recovery path. A permission problem needs an explanation of who can perform the action. Preserve form input after failures. Avoid using a spinner as the only explanation indefinitely. Write the messages now, so an agent does not invent inconsistent copy in every component.
Make a small design system
Choose a readable type hierarchy, a spacing scale, clear contrast, and a primary action style. Use native buttons and labels where possible. Define how the board works at narrow widths, with long task titles, and with keyboard navigation. A polished interface comes from consistent hierarchy and behavior. A screenshot cannot establish accessible focus order or recovery from a failed save; those need interaction checks.
SEE THE DIFFERENCE
A small example. A better decision.
Something went wrong. Try again.
Amina claimed this task while you were viewing it. Your other work is saved. Return to available tasks to choose another.
The message identifies the situation, clarifies whether work was lost, and offers a useful next action. Use fictional names in practice.
Your build steps
- Sketch the primary journey as states and actions.
- Add loading, empty, denied, and conflict variants.
- Define typography, spacing, mobile layout, and focus behavior.
- Ask your agent to prototype one screen, then walk through it with a keyboard.
FROM THE PROMPT LIBRARY
A useful brief for this step.
Map an end-to-end user journey ↗Connects separate screens into one successful task.Create a screen and route inventory ↗Finds missing pages and confusing navigation before implementation.Write a usable design brief ↗Turns visual taste into a consistent interface specification.All ux & app flows promptsMAKE THE CALL
Think like the reviewer.
BUILD YOUR WORKBOOK
An app flow and UX brief
Use the lesson and your project evidence. Your workbook saves privately; keep credentials and private records out. The checks below assess completion of the exercise, not the correctness of an external app.
Before moving on
Loading your workbook…