Product design pipeline

Brio

Employee wellbeing that a small business can actually run without an HR team. The owner sees a team-level signal and never a named individual: the privacy boundary is the product, not a setting. This page is the entry to every stage of the work.

Responsive web SaaS 10 to 200 employees, no HR Aggregate only, minimum of 5 12 stages

Pipeline

01
Foundation Research Done
Competitors, benchmark, Lean UX Canvas, AARRR, UX patterns, and the synthesis that every later stage cites.
02
User Research Done
Who the people are and what they are trying to get done. Personas split by behaviour, jobs as progress rather than features.
02+
CJM Done
The main job in time, with emotions sourced rather than drawn (As-Is) and every To-Be feature traced to a barrier or a job.
03
Information Architecture Done
Base layer: flows and the concept map. Detail layer: the site map and a full specification for every node, blocks, states and SEO.
04
Wireframes Done
A grey clickable prototype of the whole product: 47 screens, 99 state pages, every internal link resolving.
05
Voice Done
The rules by which Brio speaks, applied to every screen. Rules with an example, an anti-example and a source line.
06
Concept Next
The visual language, found and proved on two screens. In progress: references and attributes are recorded, brand plates are generated.
07
UI + Visual Not started
08
Tokens + Components Not started
09
Design System Not started
10
Responsive Not started
11
Animation Not started
12
Handoff Not started

How this project is put together

Nothing is invented downstream

Each stage reads named files from the ones before it. A wireframe renders a finished structure; it does not make one up. A hole found while building is fixed upstream first.

One source per value

Navigation comes from one registry, SEO copy is owned by its IA node, interface strings by the microcopy inventory. No string and no value exists in two editions.

Every document has a visible place

A markdown file the model reads is paired with a page a person can open. An artefact nobody can see in a browser does not exist for whoever makes the decision.

Retrofit, 5 August 2026: was to now

The project was brought onto the current pipeline: one navigation registry instead of a roadmap copied into 65 pages, the folder convention, the root service files, and a wireframe navigator that shows where a screen sits in the product. Every critique step ran through two instruments, Claude and Codex, with the sets taken independently before any merge. Full log: docs/retrofit-audit.md.

Class of defectFoundWho found itFixedWithdrawn at verificationDeferred
Stale path after the restructure5Claude410
Stale file name behind markdown backticks5Codex500
Contradiction inside one document1Codex0, clarified10
Markdown with no visible place on any page7Claude241
More than one H1 on a page12Claude1200
Unbalanced inline script after scripted surgery1Claude100
Em dash in an output file11Claude1100
Broken internal link (661 checked)0Claude---
Breaks at 360px0Claude---
Total423561

What the second instrument bought

Codex found 6 of the 42 rows, and all 6 sit in one class the first instrument missed systematically: a filename inside markdown backticks. The rename script matched a filename after a quote, bracket, space or angle bracket, and a backtick is none of those. A second pass by the same instrument would have reproduced the same blind spot.

Six findings were withdrawn

And they stay in the log with the reason. A withdrawn finding that vanishes quietly comes back next time in the same words. Two of the six were the checker being too broad, three were rules that do not apply to superseded working notes, one was a fact that turned out to be correct and merely ambiguous.

The most expensive defect was silent

A scripted edit cut the closing line of a wrapping function on the wireframes hub. Nothing threw, nothing looked broken, and the coverage map simply stopped rendering. It was caught by a brace-balance check over every inline script, which is now the rule after any scripted surgery on html.