Studio culture & creative process / DIJION
The states missing between design and engineering
A handoff method that brings loading, errors, empty data, cancellation and retries into the same contract as the successful screen.
A successful screen in a design file does not complete the feature’s behavior. Slow data, an account change or an interrupted operation can force new decisions during implementation. Handing off states and transitions alongside screens makes those gaps visible earlier.
Name the state through data and task
Gray screen is not a state definition. Loading initial data, No filter matches and Submission outcome unconfirmed are more actionable. Android’s UI-layer guidance connects UI state to displayed information. Include what that state means to the person using the interface.
Scroll the table horizontally to see all columns.
| State | What the person sees | Available action |
|---|---|---|
| Editing | Not saved yet | Edit or save |
| Submitting | Saving in progress | Prevent duplicate submission |
| Acknowledged | Saved | Continue |
| Uncertain outcome | We could not confirm the save | Check the result |
| Validation error | An explanation by the field | Correct the field |
Identify what starts the transition
Some changes follow a tap, others a network response or system interruption. Record the trigger, expected result and cancellation behavior. If Cancel only closes a panel, do not imply that it also stops the server operation.
Separate the promise from its implementation
Design can specify No success message without server acknowledgement; engineering determines how to verify that acknowledgement. Error copy, data model and retry policy should meet in one record. Do not assume another discipline will silently fill in an unresolved decision.
Use sample data to expose edge cases
Prepare controlled examples with long titles, empty descriptions, deleted records and restricted content. Use fictional records rather than personal information. A single desktop mockup cannot establish how a mobile keyboard or enlarged text affects the state.
Turn the handoff into acceptance checks
- Verify that each state can be reached under a real or controlled condition.
- Check that the wording accurately describes the behavior.
- Preserve state and entered information across language changes while translating labels.
- Complete the main task again after recovering from an error.
A complete handoff does not mean every behavior must be implemented at once. Explicitly document unsupported behavior too. That keeps the design promise, implementation scope and expected test result aligned.