design shaping — current state first
Current state first
The flow diagram begins by documenting what exists, not by inventing what should be. Frames drawn directly from what was observed in discovery: Gal opens the export, opens the grade sheet, calculates mentally, types totals, switches tabs, marks open-answers, rechecks. This is not a new design; it is a record of the current flow. Drawing it forces the designer to confront what is actually there before they imagine alternatives. It also reveals friction points the journey table compressed — moments where the user pauses, retries, or works around something. These become design opportunities.
Then the happy path. Then edges and errors.
Once current state is drawn, the new flow can be sketched. First the happy path — the scenario where everything works. Then the edges — the cases that are rare but real. Then the errors — what the user sees when the system can't do what they expect. Each phase produces new wireframe states. Each state gets a name — a short, meaningful label that travels through every artifact downstream.
States are named for what the person experiences, not for where they sit in the flow. "Per-student marking" is a name a developer reads in a test six months later and understands. "State-04" requires a lookup. Names carry meaning; numbers carry position.
The first state drawn is usually the entry to the activity — "all-students overview." The next is whatever the designer discovered they needed — "per-student-marking pane." A state that surfaces three weeks later in amigos — "school-system unreachable" — gets its own name then. The names are permanent. They travel through every artifact downstream — wireframes, scenarios, tests, PRs. A developer reading a test called per-student-marking.concurrent-submit knows exactly where they are without opening Figma.
Other artifacts the designer reaches for
Wireframes and flow diagrams cover most cases, but not all. When a screen has many possible states the user can move through (drafted, submitted, returned, corrected, locked), a UI state machine answers the question wireframes can't: which transitions are legal, which aren't, and what the system does at each state. When the team needs to communicate the larger journey to stakeholders, a journey map at higher altitude — multi-day, multi-actor — sits above the flow. The discipline is the same in all of them: the artifact records what was witnessed and what is being designed, at the resolution the next phase needs. The depth of UX craft itself — affordances, hierarchy, accessibility, content design — is its own field; the chain doesn't replace it, it just decides when each artifact gets reached for.