Capstone: the resilient interface

Before you begin

By the end, you can…

• Define resilience across input, network, and browser conditions
• Create a small release checklist
• Ship and learn from a real user

01 / Understand

A capstone is a system, not a screenshot

Choose one narrow workflow: compare two options, calculate a result, submit a request, or organize a small set of information. Make the essential path obvious and complete before adding visual ambition.

Write failure states early. What happens offline, during a slow request, with empty data, after invalid input, at 400% zoom, or when storage is unavailable? A resilient interface makes uncertainty visible and recovery possible.

02 / Apply

Ship a testable claim

Define success as a behavior another person can demonstrate. Give them the URL and a task without coaching. Observe where the design’s assumptions collide with their behavior.

After shipping, write a short changelog: what you expected, what happened, what you changed, and what remains uncertain. That explanation is part of the artifact.

const releaseChecks = [
  "Keyboard task complete",
  "400% zoom reflows",
  "Slow network has feedback",
  "No-JS core path works",
  "Reduced motion respected"
];

03 / Make

Your studio task

Make — Ship a compact tool for a real person on an old phone and an unstable connection.

1. Choose one useful workflow and write its definition of done.
2. Implement the semantic baseline and one meaningful enhancement.
3. Test the five boundary conditions in the release checklist.
4. Give the task to another person, observe, revise, and publish your notes.

04 / Check

Knowledge check