Codebook Badge Mockup v5 — Final Decisions — Bristlenose

# Codebook Badge Mockup v5 — Final

Mode-dependent treatment. Light: washed (pale bg, dark text) for both AI and user tags. Dark: AI stays pale-on-dark; user tags switch to white-on-saturated. 0.72rem, 90% resting opacity, 100% on hover.

AI tags
frustration = AI sentiment tag
navigation = User tag (washed in light, saturated in dark)
follow-up = Custom / ungrouped

## Checkout Flow

> When asked to complete a purchase
> [04:23]
> "I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1
> frustration usability performance request +

> [06:11]
> "Wait, where did my basket go? I was just on the checkout page and now I'm... on the homepage? I don't understand what happened." — p3
> confusion navigation disoriented basket +

> [08:45]
> "I'm not sure I'd put my card details in here. There's no padlock icon and the URL looks weird... it just doesn't feel like a real checkout page." — p2
> doubt credibility security privacy +

## Search & Navigation

> [12:30]
> "Oh nice, the search actually shows results as I type. That's exactly what I'd expect from a site like this." — p1
> satisfaction expectation search +

> [14:02]
> "Oh I love this! You can just drag things into the basket without leaving the page? That's really clever, I wish every site did that." — p4
> delight joy need basket +

> [16:55]
> "Huh, that's not what I expected at all. I clicked 'Filters' and it took me to a completely different page instead of opening a panel." — p2
> surprise navigation mismatch filters +

> [19:18]
> "I know exactly what to do here. The layout is really clear — basket on the right, delivery options, payment. Standard stuff, no surprises." — p5
> confidence expectation checkout +

## General Context (Themes)

> [22:40]
> "In my day job I'm switching between Slack, Jira, and about four different spreadsheets just to track one project. It's... exhausting, honestly." — p3
> frustration tooling workflow need +

> [25:03]
> "We usually do a team standup at nine, check the dashboard, then just... react to whatever fires come in. There isn't really a structured process." — p1
> workflow process workaround +

> When asked about their experience with competitor products
> [28:17]
> "The other tool we tried had this brilliant feature where you could just... tag everything in bulk and then see it all on a board. We don't have anything like that. I'd pay extra for it." — p4
> delight request competitor willingness tooling +

> [31:05]
> "My manager would never approve a tool that stores data outside the EU. That's the first thing she'd ask — where's the data going?" — p2
> doubt privacy compliance anxiety stakeholder +

> [34:22]
> "The delivery estimate said 3-5 days but then at checkout it changed to 7-10. That's annoying — I was making a decision based on the faster number." — p5
> frustration credibility frustration delivery checkout +

### Codebook Sets — OKLCH v5

5 sets at pentadic hue anchors (~72° apart). ±25° range per set, ~12° steps. Light mode: washed bg (L=94%, C=0.03). Dark mode: saturated bg (L=48-55%, C=0.09-0.12).

UX H 225-275 · blue
usability navigation expectation accessibility performance
Emotion H 340-40 · red-pink
frustration anxiety disoriented anger joy mismatch
Task H 130-180 · green-teal
workflow tooling process stakeholder workaround
Trust H 275-325 · purple
credibility privacy security proof compliance
Opportunity H 50-100 · amber
request need competitor willingness value
FurniCo Checkout custom · this study
basket checkout delivery search filters

### AI Sentiment Reference

Auto-generated. Dark text on pale bg in both modes. Toggle above to hide.

frustration confusion doubt surprise satisfaction delight confidence

### Design Decisions (v5)

Light mode: Both AI and user tags use dark text on pale background ("washed"). User tags at `oklch(94% 0.03 H)` — barely-there tinted wash. Quote text dominates; tags are quiet metadata.
Dark mode: AI tags keep existing dark-mode treatment (light text on dark-muted bg). User tags switch to white text on saturated coloured bg (`oklch(50-55% 0.10-0.12 H)`). Saturated pills work on dark backgrounds without dominating.
Opacity: 90% resting, 100% on blockquote hover. Hover signals interactivity (click for rename/filter/analyse).
Font: 0.72rem throughout (no reduction).
Placement: Inline below quote (unchanged). Right-hand gutter and two-column layouts explored in `mockup-tag-placement.html` and rejected.
Hue spread: ±25° per set (50° total, up from v3's ±12°). ~12° steps between tags. Better within-set distinguishability.
Chroma: 0.09-0.12 for saturated badges (dark mode), 0.03 for washed badges (light mode). Calmed from v3's 0.13-0.19.
Tag names: Mostly single word. Two words only where one is ambiguous.
AI workflow: AI tags bootstrap analysis (spot frustrations, find patterns). Once user tags are applied, AI becomes redundant — toggle off. This is the intended flow.