Design connected from the user to the shipped pixel

The work begins with the journey. A user journey🛤️user_journeyAn end-to-end map of a user experience contains ordered journey step🪜journey_stepA single step in a user journey nodes and maps the canonical persona🎭personaAn archetype representing a user segment who walks them, so the experience under design is the same user the strategy named and research confirmed, rather than a fresh archetype invented for the workshop.

Because the steps are typed and ordered, a friction point is a node. The step where activation drops is a place in the graph that links forward to the work that addresses it. That node is the anchor the rest of the design work hangs from.

Framing is a chain of edges. A friction step reveals a need🫀needA user need, pain, desire, or constraint; the need is measured by a desired outcome🌟desired_outcomeWhat the user hopes to achieve; the gap in that outcome reveals an opportunity🚪opportunityA validated gap worth solving. The path from a symptom to a problem statement is recorded rather than asserted.

The opportunity a designer pursues points back to the journey step that raised it and forward to the solutions that address it. The reason behind a redesign stays attached to the work, traceable in both directions.

An opportunity🚪opportunityA validated gap worth solving explores via several design concept🌱design_conceptA possible design direction or approach nodes, and each concept is sketched in a wireframe▭wireframeA low-fidelity structural layout and realised as a user flow🔀user_flowA navigation path through the product. The divergence is captured as typed nodes rather than left in a file.

A concept the team parks stays in the graph, linked to the opportunity that prompted it. A good idea that was early rather than wrong can be found again, since the branch that did not ship is recorded next to the one that did.

A design concept🌱design_conceptA possible design direction or approach is realised as a prototype📱prototypeAn interactive mockup for testing, and the prototype carries its evidence. It simulates a screen🖥️screenA distinct screen or view in the product, tests a hypothesis🧪hypothesisA testable belief about a solution, validates a feature⭐featureA product capability or feature, and is annotated with the annotation🗯️annotationA note or markup on a design artifact it draws.

The question “did the design work?” resolves to the result recorded on those edges. A failed test is a learning linked to the concept that prompted it, so the next iteration starts from what the last one found.

A design system🧰design_systemThe root design system entity contains design component🧱design_componentA reusable UI component nodes, defines design token🪙design_tokenA design token (colour, spacing, typography) nodes, and is codified in design guideline📌design_guidelineA design usage guideline nodes. It is part of the same graph as the product, scoped to the parts meant to scale across screens.

One component carries the whole chain: styled by a token, conforming to an accessibility standard, implementing the feature⭐featureA product capability or feature it ships, and consuming the service⚙️serviceA deployable service or microservice behind it. When a token changes, the graph names every component, feature, and screen it touches, so the blast radius of a design-system change is a traversal rather than an estimate.

A brand identity💠brand_identityThe root brand identity entity is coloured with its brand colour🌈brand_colourA brand colour definition, typeset with its brand typography🔤brand_typographyBrand typography specifications, and speaks with its brand voice🎙️brand_voiceBrand voice and tone guidelines, all linked to the design system that carries them.

Accessibility is recorded on an edge. A design component🧱design_componentA reusable UI component conforms to an accessibility standard as a typed relationship, so “what fails AA?” resolves to a query over the graph at any time, rather than a once-a-year audit retrofitted before launch.