← Exploration 01: four concepts

Screenshots of every page and state →

UX exploration 02 · from design decisions to a living library

Calibrating one component, three ways

The same small scenario in three prototypes. A travel app’s library has one established component. The product has drifted from it in two places. The designer decides what each difference means and sees the library change.

Continue
Primary actionCompletes the main task on a screen · 40px · 6px corners · approved and shipped
Pay £412
Finding 1 · CheckoutCorners are 4px. Drift, variant, or a different job?
Search
Finding 2 · Search48px tall. A size, an adaptation, or a departure?

The prototypes

A · Library-first

Findings live where they would belong

Can reviewing change be part of browsing a component?

You open the Primary action page. Next to the Default variant sit two dashed cards: the product’s unexplained uses. Open one and it expands in place. Decide, and the card becomes a variant, an exception or a fix, on the same page.

  1. Read the component page
  2. Open “Seen in Checkout”, try Overlay
  3. Choose “Not quite”, then “Checkout’s style, on purpose”
  4. Open Search and add it as a size
  5. Change the Checkout decision from “Why it looks like this”, then Undo
Open A
B · Decision-first

One question, then the result

Can deciding be nearly effortless without losing the evidence?

A calm sequence. The difference is shown at the scale it matters (a magnified corner, measured heights). The most likely answer is offered first; “Why?” and “That’s not right” sit one tap away. Each answer is followed by the updated component card.

  1. Read the baseline, then “Look at the first”
  2. Tap “Why…?”, then “That’s not right”
  3. Pick “Checkout’s style, on purpose”
  4. Next: Search, take the suggested size
  5. Open Library from the dock and Revisit Checkout
Open B
C · Workbench

Place the finding in the component’s structure

Does seeing the question and the artefact together give more control?

The component is shown as places things can live: variants, allowed in one area, bring back in line, its own component. You decide by choosing a place. The library previews it live, with consequences, before you keep it.

  1. Read the component, then “Look at Checkout”
  2. Choose “Allow in Checkout” over the suggestion
  3. Keep it; Search comes up next
  4. Place Search as a variant
  5. Select the Checkout item, Move it to “Bring back in line”
Open C

Comparison

A · Library-firstB · Decision-firstC · Workbench
EasiestUnderstanding the baseline. The component page is the familiar artefact, and the finding appears exactly where it would end up.Reaching a decision. One question, one obvious answer, and the right evidence at the right scale.Seeing what a decision means before committing. The live preview answers “what will change?” directly.
What the user must understandThat dashed cards are product uses the library doesn’t describe yet.Almost nothing up front. The library card appears only after each answer.The four places in the component and what each means. A small vocabulary, but it has to be learned.
Remaining effort or ambiguityThe page gets long; findings can be missed below the fold. Several sections update at once, so the change is spread out.The suggested answer is strong, which risks rubber-stamping. The wider library is out of view while deciding.Two panes to watch. On narrow screens they stack and the live link weakens. The places can feel like a form if overused.
Link from decision to libraryStrongest in place: the card becomes the thing. Reasoning is kept in the component’s “Why it looks like this”.Clear but sequential: answer, then the result card. The result arrives after the decision.Strongest overall: the library changes as you try each place, and stays visible after.
Correcting a decision“Change” on the card or reason reopens it in place. Undo in the toast.“Revisit” from the library card. Undo on the result.Select the placed item and move it. Taking it out returns it to the tray.

Patterns worth exploring further

Findings as dashed cards in the library (A)The finding sits where it would end up. That makes “is this part of the system?” the question without saying so.
Evidence at the scale of the difference (B)A magnified corner and measured heights tell the story faster than two side-by-side buttons. Pick the lens from the property that changed.
One suggested answer, with “Why?” and “That’s not right” (B)Fast agreement and an easy, dignified way to disagree. The record keeps that you corrected the assistant.
Deciding by placing (C)The answer options are the component’s own structure, so every decision visibly shapes the library rather than filling in a form.
Preview before keeping (C)The library updates live, with plain consequences, including what will not change in the product.
Approved vs shipped (all)An agreed fix reads “not shipped yet” on the component until the product catches up. The library leads; the product follows.
Reasoning lives on the component (A, C)No global history. Each component explains itself, and that explanation is where you change your mind.