Exploration 02: calibrating one component, three ways →

Screenshots of every page and state →

UX exploration · human–AI stewardship of a living design system

Making Waypoint's design system understandable

Four prototypes built on one fictional product: Waypoint, a travel app with a white-label Business portal. About 4,800 interface elements across 212 screens. Every concept works on the same evidence, including the same ambiguous cases, so you can compare the interaction models directly.

The shared cases: three blue buttons that are probably one job, a Business portal button that is identical but should stay separately themed, a green “Book now” that is a deliberate exception, and one red used for both errors and promotions.

The concepts

A · The System Atlas

Meaning is ground you've surveyed

The system is a map. Settled meaning is solid land, machine suspicion is hatching, the unexplored is fog. Decisions lift the fog and draw roads to the places they affect.

  1. Read the map and the three beacons
  2. Zoom into Actions
  3. Open the fogged blue buttons, name the role
  4. Resolve the identical Business button and the green exception
  5. Undo from the survey log; dependants reopen too
Open the Atlas →
B · The Design Dialogue

A briefing, not a chatbot

Three questions a session, each with visual evidence and a reason it was asked. Answers write a growing spec on the right. You can push back, park, or redirect.

  1. Answer the red question
  2. Overlay the blue buttons; try “Same, except…”
  3. Push back with “That's not quite it”
  4. Preview the Business button in a partner's brand
  5. Reopen anything from the spec, or undo inline
Open the Dialogue →
C · The Living System

Concepts are cells; decisions move matter

Each grain is about 25 real elements, held in membranes that stand for concepts. Split, merge and pin, and the grains migrate. A lens shows where looks and meaning disagree.

  1. Tap Red, preview the split, then split
  2. Confirm the blue buttons as Primary action
  3. Drag Business onto it and theme it
  4. Switch to “By appearance” to see the tension glow
  5. Scrub history back and continue from there
Open the Living System →
D · System Reviewresearch-led

The machine prepares the crit; you run it

Built from what design-system teams already use: the inventory wall, Figma variant sheets and modes, branch-style review, status labels and decision records. The AI drafts proposals and ranks them. You decide, delegate or decline.

  1. Read status and drift at the top
  2. Flip between Inventory, Proposed component and On screens
  3. Adjust the variant sheet, then “Approve with my changes”
  4. Ask Tom about Business, then simulate his reply
  5. Check Library and Decisions; reopen one
Open System Review →

What the research says designers already do

Concept D starts from how teams have historically built and managed systems, rather than from a new metaphor. These are the patterns it borrows.

They start from an inventory wallScreenshots of every button, field and pattern grouped by category on a slide or board. It exposes inconsistency and makes the case for a system.
They think in variant sheets and modesFigma component sets as a property grid (size × state), and variables with modes for light, dark and brand. Multi-brand is a theme problem, not a new component.
Change goes through reviewContributors branch the library and request review, like a pull request. Proposals need evidence of need: screenshots of real use across products.
Decisions happen in critique and office hoursProposals are discussed in crit with design, accessibility and engineering. Good teams record decisions, not just outcomes, so debates aren't reopened.
Ownership is spread outCentral teams review; product teams own their surfaces. Who can approve a new variant has to be clear.
The recurring pain is status and rationaleSurvey respondents say they can't tell what's old, broken or coming soon, and nobody wrote down why a pattern was chosen. Detach counts are the main signal of drift.

Comparison

ConceptMakes easyMakes hardBreaks at scale when…
A · AtlasFive-second orientation. Seeing where uncertainty lives and how one area connects to others. A strong sense of progress as fog lifts.Precise comparison inside a cluster. Map layout carries meaning people may read into (distance, size) that isn't real.There are hundreds of territories. Layout needs to stay stable as the system grows, or people lose their bearings.
B · DialogueGetting to a good decision fast. Explaining why a question matters. Hesitating, pushing back and adding context without penalty.Seeing the whole system. You only see what the machine chose to ask, which makes its ranking a quiet form of control.Questions depend on each other deeply, or the ranking is wrong and the user can't tell what's missing.
C · LivingSeeing consequences: grains moving, dependencies following. The appearance-vs-meaning lens makes “similar is not the same” visible.Reading exact facts. Direct manipulation (drag to merge) is powerful but easy to trigger by accident, and hard to make accessible.Thousands of concepts. Physics layouts get noisy; needs aggressive clustering and a keyboard-first path.
D · ReviewFitting real team process: evidence, variant sheets, ownership, delegation, recorded reasoning, status labels. Familiar on day one.Feeling the shape of the whole system. Can slide back into a review queue if the ranking and “Not this week” aren't disciplined.Proposals pile up across teams. Needs strict limits per week and grouping of related proposals into one decision.
Recommendation

Use D as the working surface, with A as home and B and C as tools inside it

D is the model designers will trust because it matches how they already decide: evidence, a proposed component, a crit, a recorded reason. On its own it lacks orientation and still risks feeling like a queue. The other concepts fill exactly those gaps.

Home · from AOpen on the Atlas: the system as territories, fog for what's unexplored, beacons for the few places that need judgement. Progress is ground understood, not items reviewed.
Work · from DClicking a beacon opens a D proposal: inventory, variant sheet or theme modes, on-screen preview, approve, change, ask or decline, with a written reason and status labels in the library.
Voice · from BEach proposal leads with one plain question and why it was asked. Keep “Same, except…”, park and push back. Cap it at three a week.
Lens · from CInside evidence, an appearance-vs-meaning toggle shows where look-alikes mean different things. The history scrubber becomes the shared undo, so any past state of the system can be seen.

Across all four, keep three rules: observed, suspected and decided always look different; nothing becomes approved meaning without a person; and undoing a decision also shows and unwinds anything that followed from it.

Research sources