Bristlenose · dashboard widgets

Widget gallery — the intrinsic design bench

Each widget is designed here in isolation, in its own container-query sandbox, decoupled from where it lands on a dashboard. Drag a sandbox's right edge — or hit a face preset — to feel its compact / normal / expanded faces resolve. Colour comes from the real design-system tokens; Scheme flips the shipped data-color-theme="edo" palette and Mode flips color-scheme — so the theme matrix falls out of tokens, not hand-tuning.

Phase 0 + first widget · parked exploration (post-TF)

Mode

Scheme

design in default · light — the other three cells are a regression check

07 Verbatim / quotes

MIRRORS the shipped .bn-featured-quote — label-size quote text, bracketed context, footer of timecode + speaker .badge + sentiment badge. Multiply is the real .bn-featured-row grid (3-up, 5 at 16″+). The redesign faces (a compact 1-up, trim/add) are the pending conversation. width —

[On finishing the purchase] “Honestly the checkout was the smoothest part — I was done before I expected to be.”

[Looking for a bed in stock] “I couldn’t tell which one was actually available. I gave up and searched Google instead.”

[Reading the delivery options] “Wait — is ‘aftercare’ the delivery thing, or is that the returns thing?”

[After filtering search results] “Once I found the filter, I trusted the results completely — it just felt right.”

[Switching from phone to laptop] “I didn’t expect it to remember my basket across devices — that was a nice surprise.”

06 Signals

normal · faces pending chat · width —

The exact analysis-lens signal card — source eyebrow · interpretive name (18px heading link) · one-line finding · pattern label · the metrics grid (label · mono value · viz). Copied verbatim from analysis.css so a click lands on an identical item. No confidence badge — it’s hidden in the real UI.

Checkout & delivery

Confident to the finish

Participants completed the purchase without hesitation once they reached checkout.

SUCCESS

Signal0.82 Conc.2.4× Agreement4.1 Intensity2.3

Beds category

Stock status stays hidden

Availability wasn’t visible on category pages; several participants abandoned the task.

GAP

Signal0.68 Conc.1.8× Agreement3.2 Intensity2.1

Post-surgery aftercare

“Aftercare” cuts two ways

The label read as both delivery and returns, splitting expectations before the task began.

TENSION

Signal0.54 Conc.1.6× Agreement2.4 Intensity1.9

03 Sections | Themes

normal · faces pending chat · width —

MIRRORS the shipped .bn-dashboard-pane--pair + .bn-dashboard-nav — accent links, shared border, no divider, no counts (the current dashboard shows none; counts are a candidate redesign addition to discuss).

Sections

Themes

08 Transcript coverage

normal · faces pending chat · width —

MIRRORS the shipped .bn-coverage-box — 8px bar, round legend dots. Colours are palette-specific: flip Scheme to Edo and the bar re-tones (blue→slate, ochre) while the sentiment widgets stay put.

Transcript coverage

In report 68% Moderator 14% Omitted 18%

05 Co-occurrence PARKED — hardest

“Where do participants agree — and disagree?” Rows = participants, columns = sections, cell hue = dominant sentiment, cell depth = quote count. Reads Scharp’s three continua at a glance. width —

Pre-surgery info

Aftercare

Notifications

Top navigation

Beds category

Search results

Checkout

⁺

hue = sentiment satisfaction frustration confusion depth = quotes

Sporadic ↔ Pervasive

column · how many participants

Beds category is pervasive (6 of 8) — everyone went, nobody agrees. Aftercare is sporadic (1) but maximum-heat.

Unbalanced ↔ Balanced

row · one theme or many

p1 is unbalanced (front-loaded, healthcare). p3 is balanced with high variance.

Consensus ↔ Conflict

column hues · agree or split

Checkout is split (p3 satisfaction, p4/p6 frustration) — live disagreement worth a rewatch.

⁺ marks an intensity-3 quote in the cell. Method after Scharp, K. (2021), J. Communication 71(4). Empty cells are information — who didn’t reach a section.

More benches land here as Phase 1 proceeds (friction heatmap → saturation → fingerprint → …). Gallery lives flat in docs/mockups/ so it stays in the dev About→Design listing.