Wireframing · Beginner · 45 min
Design loading, empty and error states
A saved recipes screen only has its "full" state designed. Design the states people actually meet first.
Context
A recipe app lets people save recipes into a list. The design team has only designed the screen with twelve saved recipes. New users see a blank white screen, slow connections show nothing for several seconds, and when the server fails users see a raw error code.
Your prompt
Design the first-use empty state, the loading state, the error state and the "no results" state for search within saved recipes.
Instructions
- List each state and what the user needs to know or do in it.
- For the empty state, explain the value of saving recipes and give one clear action.
- For loading, show the shape of the content (for example skeleton cards) rather than a blank screen.
- For the error state, explain what happened in plain words and offer a way to retry.
- For no search results, show what was searched and suggest next steps.
- Write all the copy yourself.
Expected deliverables
- Four screens, one per state, with copy
- A one-line note per state on why you made the main decision
Completion checklist
4 items
Evaluation criteria
- States are useful, not decorative.
- Copy is plain, specific and friendly without being jokey about errors.
Hints and an illustrative solution
Show hints
- Empty states are often a new user's first impression. Treat them as onboarding.
- Keep the page header and navigation in all states, so people stay oriented.
Show one possible solution
This is one reasonable answer, not the only one. Compare reasoning, not pixels.
Empty: a simple illustration, "No saved recipes yet", "Tap the bookmark on any recipe to keep it here for later", and a button "Browse recipes". Loading: three grey skeleton cards matching real card dimensions. Error: "We couldn't load your saved recipes. Check your connection and try again." with a "Try again" button; saved recipes cached on the device are still shown underneath when available. No results: "No saved recipes match 'lentil curry'" with "Clear search" and "Search all recipes for 'lentil curry'".