Audience Experience Design
Design how an audience will experience an artifact — before a line of it is
built. This skill turns who the audience is, what they came to do, and how
they should feel into concrete, buildable design decisions that a platform
skill can implement. It is medium-neutral at the contract layer and works for
websites, web apps, dashboards, business reports, and any user-facing flow.
Design decides; the platform renders. Every section below must end in a
decision — an ordered content choice, a component/interaction/state, a
layout or token-role choice, or a measurable acceptance criterion. If a section
is only principles, it is not doing this skill's job.
1. Overview, Routing & the Boundary Invariant
BOUNDARY INVARIANT (load-bearing). This skill owns the medium-neutral
experience contract and the currently-unowned mediums: apps, business
reports, and generic user journeys. Where a medium skill already owns the
journey, this skill produces the upstream brief and HANDS OFF — it never
re-derives an owned flow. Specifically, it does not re-derive:
- deck / slide flows → owned by
presentation-narrative;
- the commerce funnel → owned by
ecommerce-growth;
- persuasion copy → owned by
conversion-psychology;
- built-interface review → owned by
ux-reviewer (this skill designs; that
skill reviews the built result).
The decision this section produces — own vs hand off. For the artifact in
front of you, classify each part: does a medium skill already own this
journey? If yes, write the brief (audience, intent, desired response,
acceptance criteria) and route to that owner. If no (a business report, an app
flow, a generic journey), this skill owns it end-to-end. Record the routing
decision explicitly before designing — it determines which sections below you
author versus hand off.
2. Audience Model
Produce a named audience model, scoped per audience type (do not design
for a mythical average user):
- Type & job — who they are and the concrete job they came to do
("finance reviewer approving a variance", "first-time shopper comparing two
products", "on-call engineer triaging an alert").
- Prior knowledge & vocabulary — what they already know; which terms to use
and which to define. This decides labels and the level of explanation.
- Context — device, environment, time pressure, attention budget. A report
read in a Monday review meeting and a dashboard watched during an incident are
different design problems.
- "Feeling understood" — made concrete per type. State the specific signal
that makes THIS audience feel the artifact was built for them (e.g. the
finance reviewer sees the variance and its driver in the first screen without
scrolling; the shopper sees the one fact that resolves their comparison). This
is a design decision, not an adjective.
- Desired action + emotional/trust constraint — the single primary action
and the trust state required to take it (confidence, safety, urgency-without-
pressure).
Decision produced: the audience type(s), their vocabulary, and the concrete
"understood" signal each must receive — which constrains labels, content, and
tone downstream.
3. Journey / Reading Path
Design the ordered path through the artifact — entry, transitions, states,
completion — for the chosen medium:
- Apps / flows: the task path step by step, plus the error, empty, and
loading states for each step (an app design that omits these is unbuildable).
Decide what the user can do next at each step and what happens when it fails.
- Business reports (a medium this skill OWNS): the reading order and the
two paths — the executive path (headline → verdict → one supporting fact)
and the deep path (methodology, detail, appendix). Decide which fact leads,
what an executive can skip, and where the deep reader enters.
- Drift guard — reports are NOT decks. Business reports are an unowned
medium this skill takes. Slide/deck flows are NOT — those stay in
presentation-narrative. If the artifact is a slide sequence, write the brief
and hand off. Stated here in-body to prevent authoring drift.
Decision produced: the ordered path and its per-step states (or the report's
reading order and executive-vs-deep split).
4. Information Architecture & Attention Hierarchy
Decide what the audience sees first, next, and last, and why:
- Content ordering — rank the content blocks by the audience's job, not by
the org chart or the data model.
- Attention hierarchy — exactly one primary focus per view; everything else
is secondary or tertiary. Decide the single thing the eye should land on first.
- Progressive disclosure — what is shown by default versus revealed on
demand. Decide the default-visible set and the on-demand set; hiding the wrong
thing is as costly as showing too much.
Decision produced: the ranked content order, the single primary focus per
view, and the default-visible vs on-demand split.
5. Buildable Specification
Turn the above into a spec precise enough to hand to a platform skill:
- Components & states — name each component and enumerate its states
(default, hover/focus, active, disabled, loading, empty, error). A component
without its states is not yet buildable.
- Wireframe intent — the layout regions and their relationship (what is
fixed, what scrolls, what stacks on small screens), described as regions and
priorities rather than pixel positions.
- Ergonomics & ease-of-use — apply Fitts- and Hick-level reasoning as
decisions: make the primary action large and reachable; reduce the number of
choices at each decision point; keep related controls together; specify
keyboard and touch affordances (focus order, hit-target sizing intent, no
hover-only actions on touch).
Decision produced: the component/state inventory, the layout-region
priorities, and the ergonomic choices (target prominence, choice count, input
modalities).
6. Semantic Token & Layout Brief (the Token Seam)
This skill DECIDES token semantics; platform skills IMPLEMENT them. Design
decides, platform renders. The brief names token roles, scale intent, and
usage rules in a medium-neutral, semantic vocabulary. It must contain no
platform syntax — name what a token is for, never how a framework spells it.
The platform owner (named in the handoff table) maps each role to its own
mechanism (a design-token preset layer, a custom-property layer, or utility
classes); that mapping is the platform's job, never written here.
Author the brief as roles and intent, for example (in words, not code):
- Color roles — name by role and emphasis: a primary-action role (the single
highest-emphasis accent, used only for the one primary action per view); a
neutral surface role and a raised-surface role; primary and muted text roles;
and status roles (success, warning, danger). Give each a usage rule ("the
primary-action role appears at most once per view").
- Type scale — a small ordered set by role (display, heading levels, body as
the reading baseline, caption one step down and lower-emphasis). Decide the
reading baseline and the steps around it, not point sizes.
- Spacing rhythm — one spacing scale named by role (tight inset, inset,
stack gap, section gap) so rhythm is consistent; decide the roles, not the
values.
- Elevation / emphasis — the ordered levels of prominence (flat, raised,
overlay) and which content earns each.
Layering note (medium-neutrality, answers the obvious objection). The
audience, journey, and IA layers (§§2-4) are genuinely medium-neutral — the same
contract serves a web page, an app, or a report. The buildable-spec and token
layers (§§5-6) are produced for the chosen medium against that medium's
constraints: what is neutral is the contract, not the final spec. A token
brief for a report and for a web app share the same role vocabulary but resolve
to different platform mechanisms.
Decision produced: the named semantic token roles, their scale intent, and
per-role usage rules — handed to the platform owner to implement.
7. Acceptance Criteria
State the measurable checks the built artifact must pass — these feed
ux-reviewer for the post-build review:
- Comprehension — a member of the target audience can state the artifact's
main point / find the primary action within a set time (e.g. the 5-second
test) without help.
- Task success — the primary task completes without a dead end; every error
state has a recovery path.
- Engagement — a medium-appropriate, measurable signal (report: the executive
path answers the question on the first screen; app: the primary action is
reachable within N interactions).
- Accessibility — keyboard-reachable primary flow, visible focus, sufficient
contrast, labelled controls (WCAG AA as the floor).
Decision produced: the concrete pass/fail criteria the build is measured
against.
8. Medium Handoff Table
Once the contract is designed, hand off to the owner that implements it:
| Medium |
Hand off to |
| Web page / site |
modern-frontend (app/build) + wordpress-developer (CMS) |
| Store / commerce page |
ecommerce-growth (funnel) + the WooCommerce skills (woocommerce-developer) |
| Slide deck |
presentation-narrative |
| Business report — EXPERIENCE (layout, reading path, IA) |
this skill |
| Business report — PROSE (the writing itself) |
content-writer |
| Charts / data visualization |
the dataviz skill — a harness-provided plugin, invoked by name (it is not a filesystem skill in this library, so this is a plugin route, not a cross-link) |
| Trading application surfaces |
trading-dashboard-ux |
| Persuasion / conversion copy |
conversion-psychology |
| Post-build interface review |
ux-reviewer |
9. Anti-Patterns
| Anti-Pattern |
Why it fails |
Instead |
| A section that is only principles / a generic checklist |
Produces nothing buildable — violates this skill's kill criterion |
Every section must end in a named decision; delete or route the rest |
| Re-deriving an owned journey (deck flow, commerce funnel, persuasion copy) |
Duplicates and drifts from the owner |
Write the upstream brief and hand off per §8 |
| Emotion adjectives with no design decision ("make it feel premium") |
Un-actionable; the builder cannot act on a mood |
Translate the feeling into a concrete signal (§2) and a token/layout decision |
| Designing for an "average user" |
No real person is average; the design fits no one |
Model named audience types per §2 |
| Writing platform syntax in the token brief |
Collapses the design/implement seam; ties the contract to one framework |
Name token roles and intent only; let the platform skill implement (§6) |
| Skipping error / empty / loading states |
The spec is unbuildable and fails in the real world |
Enumerate every state in §5 |
1---2name: audience-experience-design3description: Use when designing how an audience will experience an artifact BEFORE building it — websites, web apps, dashboards, business reports, or any user-facing flow — turning audience, intent, and desired emotional/trust response into buildable design decisions. Covers audience/job/context modeling scoped per audience type, journey and reading-path design, information architecture and attention hierarchy, ergonomics and ease-of-use decisions, emotional-design intent (the audience must feel understood), buildable component/wireframe/state specs, semantic token and layout briefs, and measurable acceptance criteria. Trigger on - design the experience, user journey, information architecture, make it engaging, audience perception, wireframe, report layout, app flow design, ergonomics, emotional design. Built-interface reviews live in ux-reviewer; deck flows in presentation-narrative; commerce funnels in ecommerce-growth; persuasion copy in conversion-psychology; implementation in the platform skills.4---56# Audience Experience Design78Design how an audience will **experience** an artifact — before a line of it is9built. This skill turns *who the audience is*, *what they came to do*, and *how10they should feel* into concrete, buildable design decisions that a platform11skill can implement. It is medium-neutral at the contract layer and works for12websites, web apps, dashboards, business reports, and any user-facing flow.1314Design decides; the platform renders. Every section below must end in a15**decision** — an ordered content choice, a component/interaction/state, a16layout or token-role choice, or a measurable acceptance criterion. If a section17is only principles, it is not doing this skill's job.1819## 1. Overview, Routing & the Boundary Invariant2021**BOUNDARY INVARIANT (load-bearing).** This skill owns the **medium-neutral22experience contract** and the currently-unowned mediums: **apps, business23reports, and generic user journeys**. Where a medium skill already owns the24journey, this skill produces the **upstream brief and HANDS OFF** — it never25re-derives an owned flow. Specifically, it does **not** re-derive:26- **deck / slide flows** → owned by `presentation-narrative`;27- **the commerce funnel** → owned by `ecommerce-growth`;28- **persuasion copy** → owned by `conversion-psychology`;29- **built-interface review** → owned by `ux-reviewer` (this skill designs; that30 skill reviews the built result).3132**The decision this section produces — own vs hand off.** For the artifact in33front of you, classify each part: *does a medium skill already own this34journey?* If yes, write the brief (audience, intent, desired response,35acceptance criteria) and route to that owner. If no (a business report, an app36flow, a generic journey), this skill owns it end-to-end. Record the routing37decision explicitly before designing — it determines which sections below you38author versus hand off.3940## 2. Audience Model4142Produce a **named audience model**, scoped **per audience type** (do not design43for a mythical average user):4445- **Type & job** — who they are and the concrete job they came to do46 ("finance reviewer approving a variance", "first-time shopper comparing two47 products", "on-call engineer triaging an alert").48- **Prior knowledge & vocabulary** — what they already know; which terms to use49 and which to define. This decides labels and the level of explanation.50- **Context** — device, environment, time pressure, attention budget. A report51 read in a Monday review meeting and a dashboard watched during an incident are52 different design problems.53- **"Feeling understood" — made concrete per type.** State the specific signal54 that makes THIS audience feel the artifact was built for them (e.g. the55 finance reviewer sees the variance and its driver in the first screen without56 scrolling; the shopper sees the one fact that resolves their comparison). This57 is a design decision, not an adjective.58- **Desired action + emotional/trust constraint** — the single primary action59 and the trust state required to take it (confidence, safety, urgency-without-60 pressure).6162**Decision produced:** the audience type(s), their vocabulary, and the concrete63"understood" signal each must receive — which constrains labels, content, and64tone downstream.6566## 3. Journey / Reading Path6768Design the ordered path through the artifact — **entry, transitions, states,69completion** — for the chosen medium:7071- **Apps / flows:** the task path step by step, plus the **error, empty, and72 loading states** for each step (an app design that omits these is unbuildable).73 Decide what the user can do next at each step and what happens when it fails.74- **Business reports (a medium this skill OWNS):** the **reading order** and the75 **two paths** — the executive path (headline → verdict → one supporting fact)76 and the deep path (methodology, detail, appendix). Decide which fact leads,77 what an executive can skip, and where the deep reader enters.78- **Drift guard — reports are NOT decks.** Business reports are an unowned79 medium this skill takes. **Slide/deck flows are NOT** — those stay in80 `presentation-narrative`. If the artifact is a slide sequence, write the brief81 and hand off. Stated here in-body to prevent authoring drift.8283**Decision produced:** the ordered path and its per-step states (or the report's84reading order and executive-vs-deep split).8586## 4. Information Architecture & Attention Hierarchy8788Decide **what the audience sees first, next, and last, and why**:8990- **Content ordering** — rank the content blocks by the audience's job, not by91 the org chart or the data model.92- **Attention hierarchy** — exactly one primary focus per view; everything else93 is secondary or tertiary. Decide the single thing the eye should land on first.94- **Progressive disclosure** — what is shown by default versus revealed on95 demand. Decide the default-visible set and the on-demand set; hiding the wrong96 thing is as costly as showing too much.9798**Decision produced:** the ranked content order, the single primary focus per99view, and the default-visible vs on-demand split.100101## 5. Buildable Specification102103Turn the above into a spec precise enough to hand to a platform skill:104105- **Components & states** — name each component and enumerate its states106 (default, hover/focus, active, disabled, loading, empty, error). A component107 without its states is not yet buildable.108- **Wireframe intent** — the layout regions and their relationship (what is109 fixed, what scrolls, what stacks on small screens), described as regions and110 priorities rather than pixel positions.111- **Ergonomics & ease-of-use** — apply Fitts- and Hick-level reasoning as112 decisions: make the primary action large and reachable; reduce the number of113 choices at each decision point; keep related controls together; specify114 keyboard and touch affordances (focus order, hit-target sizing intent, no115 hover-only actions on touch).116117**Decision produced:** the component/state inventory, the layout-region118priorities, and the ergonomic choices (target prominence, choice count, input119modalities).120121## 6. Semantic Token & Layout Brief (the Token Seam)122123**This skill DECIDES token semantics; platform skills IMPLEMENT them. Design124decides, platform renders.** The brief names token **roles, scale intent, and125usage rules** in a medium-neutral, semantic vocabulary. It must contain **no126platform syntax** — name what a token is *for*, never how a framework spells it.127The platform owner (named in the handoff table) maps each role to its own128mechanism (a design-token preset layer, a custom-property layer, or utility129classes); that mapping is the platform's job, never written here.130131Author the brief as roles and intent, for example (in words, not code):132133- **Color roles** — name by role and emphasis: a primary-action role (the single134 highest-emphasis accent, used only for the one primary action per view); a135 neutral surface role and a raised-surface role; primary and muted text roles;136 and status roles (success, warning, danger). Give each a usage rule ("the137 primary-action role appears at most once per view").138- **Type scale** — a small ordered set by role (display, heading levels, body as139 the reading baseline, caption one step down and lower-emphasis). Decide the140 reading baseline and the steps around it, not point sizes.141- **Spacing rhythm** — one spacing scale named by role (tight inset, inset,142 stack gap, section gap) so rhythm is consistent; decide the roles, not the143 values.144- **Elevation / emphasis** — the ordered levels of prominence (flat, raised,145 overlay) and which content earns each.146147**Layering note (medium-neutrality, answers the obvious objection).** The148audience, journey, and IA layers (§§2-4) are genuinely medium-neutral — the same149contract serves a web page, an app, or a report. The buildable-spec and token150layers (§§5-6) are produced **for the chosen medium against that medium's151constraints**: what is neutral is the *contract*, not the final spec. A token152brief for a report and for a web app share the same role vocabulary but resolve153to different platform mechanisms.154155**Decision produced:** the named semantic token roles, their scale intent, and156per-role usage rules — handed to the platform owner to implement.157158## 7. Acceptance Criteria159160State the **measurable** checks the built artifact must pass — these feed161`ux-reviewer` for the post-build review:162163- **Comprehension** — a member of the target audience can state the artifact's164 main point / find the primary action within a set time (e.g. the 5-second165 test) without help.166- **Task success** — the primary task completes without a dead end; every error167 state has a recovery path.168- **Engagement** — a medium-appropriate, measurable signal (report: the executive169 path answers the question on the first screen; app: the primary action is170 reachable within N interactions).171- **Accessibility** — keyboard-reachable primary flow, visible focus, sufficient172 contrast, labelled controls (WCAG AA as the floor).173174**Decision produced:** the concrete pass/fail criteria the build is measured175against.176177## 8. Medium Handoff Table178179Once the contract is designed, hand off to the owner that implements it:180181| Medium | Hand off to |182|---|---|183| Web page / site | `modern-frontend` (app/build) + `wordpress-developer` (CMS) |184| Store / commerce page | `ecommerce-growth` (funnel) + the WooCommerce skills (`woocommerce-developer`) |185| Slide deck | `presentation-narrative` |186| Business report — EXPERIENCE (layout, reading path, IA) | this skill |187| Business report — PROSE (the writing itself) | `content-writer` |188| Charts / data visualization | the `dataviz` skill — a **harness-provided plugin**, invoked by name (it is not a filesystem skill in this library, so this is a plugin route, not a cross-link) |189| Trading application surfaces | `trading-dashboard-ux` |190| Persuasion / conversion copy | `conversion-psychology` |191| Post-build interface review | `ux-reviewer` |192193## 9. Anti-Patterns194195| Anti-Pattern | Why it fails | Instead |196|---|---|---|197| A section that is only principles / a generic checklist | Produces nothing buildable — violates this skill's kill criterion | Every section must end in a named decision; delete or route the rest |198| Re-deriving an owned journey (deck flow, commerce funnel, persuasion copy) | Duplicates and drifts from the owner | Write the upstream brief and hand off per §8 |199| Emotion adjectives with no design decision ("make it feel premium") | Un-actionable; the builder cannot act on a mood | Translate the feeling into a concrete signal (§2) and a token/layout decision |200| Designing for an "average user" | No real person is average; the design fits no one | Model named audience types per §2 |201| Writing platform syntax in the token brief | Collapses the design/implement seam; ties the contract to one framework | Name token roles and intent only; let the platform skill implement (§6) |202| Skipping error / empty / loading states | The spec is unbuildable and fails in the real world | Enumerate every state in §5 |