s8-B1-1 pb-cover Prototyping in the AI Era
Choosing what to build, and what to learn — then letting AI make it cheap.
Prototyping in the AI Era — from PRD to a working mobile prototype
s08 · Betterworks · 90m · Full Cohort ·
released
s08 → 5 blocks, 48 slides, 44 trainer notes, 3 exercises, 1 reflects, 0 quizzes, 0 asides
Pre-read
- Open the **prototype you've been building this break** — have it on your phone or a simulator, ready to screen-share
- Bring **one screen you're unsure about** — a flow, a gesture, a layout you can't tell is right
- Optional — skim one native app you love and one you fight with; notice *why* in your thumb, not your head
No slides to read. Show up with your prototype open and one honest doubt about it.
- Bring **one screen you're unsure about** — a flow, a gesture, a layout you can't tell is right
- Optional — skim one native app you love and one you fight with; notice *why* in your thumb, not your head
No slides to read. Show up with your prototype open and one honest doubt about it.
Session goal
By end-of-session each participant can:
1. **Name the question** their prototype is answering — and set fidelity to match it, not to impress
2. **Judge a mobile screen** against interaction fundamentals — touch, thumb, motion, cognition — instead of taste alone
3. **Use AI as a fidelity accelerator** without letting it decide *what* to build or smuggle in bad UX
4. **Read a prototype's result** — what it taught, what to kill, what to build next
The arc: prototype as *question* → fidelity as *dial* → mobile *fundamentals* → the *AI era* → *learning* from it. Theory you can act on tomorrow morning.
1. **Name the question** their prototype is answering — and set fidelity to match it, not to impress
2. **Judge a mobile screen** against interaction fundamentals — touch, thumb, motion, cognition — instead of taste alone
3. **Use AI as a fidelity accelerator** without letting it decide *what* to build or smuggle in bad UX
4. **Read a prototype's result** — what it taught, what to kill, what to build next
The arc: prototype as *question* → fidelity as *dial* → mobile *fundamentals* → the *AI era* → *learning* from it. Theory you can act on tomorrow morning.
A prototype is a question · what it's for
26 itemsOpen cold. Most of the room pictures a polished screen when they hear "prototype." Tonight we dismantle that.
s8-B1-2 statement A prototype is a question, not an artifact.
s8-B1-3 magazine Meet tonight's running example — Smart Pause
One Pace feature carries every prompt tonight, so you watch each idea hit a real screen.
s8-B1-4 list When does the card even show?
A signal, not a whim — three conditions, all true, or Raj never sees it.
- Slept < 6h last night — from Apple Health (this morning: 5h20m)
- > 5h of meetings today — from Google Calendar (today: 6 blocks)
- ≥ 2 active goals — there's something worth pausing
- All three true at 7:18am → the card appears. Miss one → standard morning brief.
s8-B1-5 list Where tonight goes
Foundations → mobile core → cognition & structure → the AI era → learning.
- 1 · What a prototype is for — the mindset before the mechanics
- 2 · Fidelity theory — fidelity is a dial, not a quality bar
- 3 · Mobile fundamentals — touch · thumb · motion · time
- 4 · Cognition, platform & the AI era — how minds read screens, and what AI changes
- … 1 more
s8-B1-6 list Prototype as experiment
Every prototype carries a hypothesis.
- If you can't name the question, you're decorating — not prototyping
- Build to learn, not to impress
- The output isn't the screen — it's the answer
s8-B1-7 list Build the riskiest assumption first
Not the easiest screen.
- Riskiest = highest uncertainty × highest cost of being wrong
- The polished login screen is rarely the risk
- Sequence the work by what could kill the idea
s8-B1-8 list The four jobs a prototype does
Name the job up front — it prevents the "does everything / does nothing" trap.
- Explore — find the shape of the solution
- Validate — test whether it holds
- Communicate — align people on intent
- Specify — hand off exactly what to build
s8-B1-9 split Throwaway vs. evolutionary
Decide which you're making — on purpose.
col 1 · Throwaway
Discarded once you have the answer.
Fast, cheap, disposable. The point is the le
col 2 · Evolutionary
Becomes the foundation of the real thing.
The antipattern: the throwaway that ac
s8-B1-10 split Riskiest-Assumption Finder
Prompt move · generative — the template you keep, the input you swap.
col 1 · The template
You are my prototyping strategist. Here is a product idea: ⟨IDEA — one paragraph
col 2 · Filled for Pace
Smart Pause — a Today-screen card that, on an overloaded morning (slept 5h, 6h o
s8-B1-11 code …and here's what it found
s8-B1-12 activation Name your question
Run the prompt on your capstone — post the riskiest assumption it surfaced.
Fidelity theory · the dial, not the bar
17 itemsThe reframe most of the room needs. Fidelity is not a quality ladder you climb — it's four independent dials you set to match the question.
s8-B2-1 pb-section Fidelity theory
s8-B2-2 reframe (no title)
The most common misconception in the room.
s8-B2-3 list Fidelity is multidimensional
Dial each axis independently — a sketch with real content can out-test a beautiful dummy.
- Visual — how finished it looks
- Content — real data vs. lorem ipsum
- Functional — does it actually work
- Interactive / behavioral — how it responds to input
s8-B2-4 split Match fidelity to the decision at stake
The question sets the dial — not your tooling, not your taste.
col 1 · Testing the copy?
Content high · visual low.
Real words in grey boxes. You're testing comprehensio
col 2 · Testing a gesture?
Interactive high · visual irrelevant.
It has to respond to the finger. It does n
s8-B2-5 custom The economics of fidelity
s8-B2-6 split Fidelity Brief
Prompt move · generative — same template, this session's question dropped in.
col 1 · The template
My prototype must answer this question:
⟨QUESTION⟩
For each axis — VISUAL, CONTE
col 2 · Filled for Pace
Does the pause offer read as protective — "streak held, not broken" — so Raj acc
s8-B2-7 code …one question, four axes
s8-B2-8 activation Set your dials
Run the Fidelity Brief on your question — post which axes it dialled high, and why.
Mobile core · touch, thumb, motion, time
25 itemsThe longest block — what earns the word *mobile*. A phone is a small glass rectangle held in a moving hand with one thumb. That constraint has laws.
s8-B3-1 pb-section Mobile interaction fundamentals
s8-B3-2 list Fitts's Law — the physics of the tap
Time to hit a target grows with distance and shrinks with size.
- Bigger + closer = faster + fewer errors — it's motor physics, not preference
- Primary actions get large targets in easy reach
- Screen edges and corners are effectively infinite targets — the thumb can't overshoot them
s8-B3-3 list The thumb zone
The phone is held and driven by one thumb. Design for its arc.
- Natural — the bottom-centre arc, where the thumb rests
- Stretch — reachable with effort (top corners)
- Ow — the far top corner needs a hand-shuffle
- So: primary actions bottom, destructive actions out of the easy arc
s8-B3-4 list Touch targets & feedback
Fingers are blunt. Every touch must answer back.
- Minimum target ~44×44pt (iOS) / 48dp (Android) — with spacing between them
- Every touch needs an immediate visual response — pressed states, not silence
- Under ~100ms or it feels broken, even if it worked
- Design the states, not just the resting screen: default · pressed · loading · disabled · error
s8-B3-5 split Gestures — power vs. discoverability
A gesture nobody finds is a feature nobody has.
col 1 · Lean on standard
Tap, scroll, swipe-back, pull-to-refresh.
Users already know these. Free power,
col 2 · Beware invented
A clever custom gesture is invisible.
If it's not discoverable, it doesn't exist
s8-B3-6 list Motion is meaning, not decoration
Time and easing tell the user what just happened.
- Easing — real motion accelerates and settles; linear feels robotic
- Motion shows where things come from and go — it maps cause to effect
- The Doherty threshold ≈ 400ms — under it, interaction feels conversational; over it, you lose them
- Use motion to cover latency — but never to add it
s8-B3-7 list Microinteractions — the small loops
The details that make an app feel alive (Dan Saffer's frame).
- Trigger → rules → feedback → loops & modes
- The like button, the pull-to-refresh spinner, the toggle that snaps
- Perceived speed > actual speed — skeletons and optimistic UI buy trust
s8-B3-8 split Mobile Screen Generator
Prompt move · generative — the theory becomes the constraints on generation.
col 1 · The template
Design one screen for this spec: ⟨SPEC⟩ · ⟨PERSONA⟩ · ⟨DS TOKENS⟩ - Use ONLY the
col 2 · Filled for Pace
SPEC — Smart Pause card: heading, signal row, "pause morning goal" / "keep both"
s8-B3-9 code …on-system, all states
s8-B3-10 split Mobile-UX Critic
Prompt move · evaluative — and here the ⟨SCREENSHOT⟩ is a real image we hand it.
col 1 · The template
Critique this screen:
⟨SCREENSHOT or description⟩
Against FITTS · THUMB ZONE · F
col 2 · The screen we hand it
→ the real Smart Pause default state fills ⟨SCREENSHOT⟩. Next slide: the laws C
s8-B3-11 code …the laws it flagged
s8-B3-12 activation Thumb-test your screen
Hold your phone one-handed — then run the Mobile-UX Critic on the screen you struggled with.
Cognition, platform & the AI era
18 itemsHow minds read screens — then what changes now that AI makes the screens nearly free to produce.
s8-B4-1 pb-section Cognition, platform & the AI era
s8-B4-2 list People run on mental models
They act on what they *believe* the system does — design the belief (Norman).
- Affordances & signifiers — the button must *look* tappable
- Mapping — controls should match the thing they control
- Close the gulf of evaluation — after every action, show what happened
- Recognition > recall — show options, don't make people remember them
s8-B4-3 split Cut the cognitive load
Two laws that pay off on every screen.
col 1 · Hick's Law
More choices = slower decisions.
Fewer, clearer options. Progressive disclosure
col 2 · Miller's ~7±2
Working memory is tiny.
Chunk — group related things so the screen reads as a fe
s8-B4-4 list Respect the platform
Consistency is a feature — internal and to the OS.
- iOS and Android have different navigation, back, and gesture conventions — honour them
- Tabs for peers · stack for depth · modal for a focused interruption
- A screen that fights the platform makes users feel clumsy — and blames you for it
s8-B4-5 reframe (no title)
The bottleneck moved from making screens to knowing which to make.
s8-B4-6 list Prompt → prototype, done well
Language in, interface out — but you steer.
- Feed your design system as context — constrain generation to your tokens, not the model's defaults
- Run a Critic as a guardrail — the S04 move, now on whole screens
- Iterate in language: change the question, not the pixels
- Prototype the states deliberately — AI loves the happy path and forgets error/empty/loading
s8-B4-7 list Read AI-generated UI critically
The model is confident, not correct — you are the taste layer.
- It invents components that don't exist in your system — catch them
- It fakes UX — plausible flows that skip real edge cases
- It has no persona — it doesn't know your user feels rushed at 8am
- Your job: persona-fit + judgment, the parts a rubric can't score
s8-B4-8 split AI-Output Reviewer
Prompt move · evaluative — the gate for everything AI hands you.
col 1 · The template
An AI generated this screen/flow:
⟨AI OUTPUT⟩
My design system: ⟨COMPONENTS/TOKE
col 2 · Filled for Pace
AI OUTPUT — a Smart Pause card an AI drew: purple gradient, a "SmartCard" compon
s8-B4-9 code …what the AI got confidently wrong
Learning from prototypes · close
15 itemsYou built it to answer a question. Now read the answer — and be willing to kill what it kills.
s8-B5-1 list Read what it told you
The prototype is the instrument, not the result.
- Test the riskiest assumption you named in block 1 — nothing else, first
- Watch behaviour, not opinion — what people *do* > what they *say*
- A prototype that fails is a success — it saved you from building the wrong thing
- Kill your darlings — the point was the answer, not the artifact
s8-B5-2 statement A prototype is a question, not an artifact — fidelity is the dial you set to mat
A prototype is a question, not an artifact — fidelity is the dial you set to match it.
s8-B5-3 list Before you test — name what you're validating
One assumption, one decision. The test exists to move that decision.
- Riskiest assumption (A1) — does an easy pause reduce abandonment, or hand Raj a polished off-ramp to quit?
- The decision it informs — ship the pause as a proactive auto-trigger, or as an opt-in the user asks for?
- The signal that says 'wrong' — he accepts, then at 9pm hunts for the paused goal and feels regret
s8-B5-4 split What a moderated usability test looks like
One user, one facilitator, real tasks — you watch behaviour, you don't sell.
col 1 · The setup
One participant (a real Raj-type), the prototype on a phone, you sitting beside
col 2 · The moves
Give a task, not a tour — "start your morning normally." Say nothing about the c
s8-B5-5 split Test-Plan Drafter
Prompt move · generative — closes the loop back to the assumption you named first.
col 1 · The template
My prototype tests this riskiest assumption:
⟨ASSUMPTION⟩
Prototype: ⟨WHAT I BUI
col 2 · Filled for Pace
ASSUMPTION — an easy pause reduces abandonment (vs. handing Raj a polished off-r
s8-B5-6 code …a test you could run tomorrow
s8-B5-7 pb-thankyou (no title)
After this session
- **Apply one lens tonight** — pick a single idea (dials, thumb zone, states, AI-critique) and revise one screen of your capstone with it
- **S09 (Tue) · Wiring the Backend** — we move from the screen to the system: Skills, Connectors, Agents, and how they fit together to make your prototype real
- **Bring** one screen where AI got the UX confidently wrong — we'll use it as we talk about grounding models in real data
## Open items (for polish pass / PG review)
0. **Missing-context pass (2026-07-11)** — per PG feedback: added a 2-slide Smart Pause intro up front (real `smartpause-default.png` + the trigger scenario); converted all six prompt slides to a template-vs-filled `split` so each result reads as the answer to a shown input; the Mobile-UX Critic slide now hands Claude the real screenshot and slide-29 findings were rewritten to match it (dropped the fabricated "wrong-side CTA"); added a "what we're validating" + "moderated usability test" pair before the Test-Plan Drafter; and the closing "Setup: 7:18am…" line now names itself as the intro scenario. Confirm copy + that split slides don't overflow at deck width.
1. **§3–9 completion** — this docket carries §0–2 verbatim from the S07 theory appendix (moved here 2026-07-06) plus newly-authored §3 (mobile core), §4 (motion/time, folded into B3), §5 (cognition), §6 (platform), §7 (learning), §8 (AI era, folded into B4). Confirm the fold is right for a 90-min run.
2. **Live demos** — only the fidelity-economics curve is interactive so far. Candidates to make live per the original brief: Fitts target-size, thumb-zone heatmap [phone frame], feedback-on-touch, easing/Doherty timer, microinteraction like-button. Flag which you want built.
3. **Phone-frame assets** — thumb-zone + platform slides would land harder with a device frame; the Smart Pause screenshot is now in (critic slide), more welcome.
4. **Pace vs. capstone framing** — exercises point at the participant's own capstone prototype; adjust if you'd rather drill on Pace first.
5. **Status** — left at `draft`; not cohort-visible until you release S08.
- **S09 (Tue) · Wiring the Backend** — we move from the screen to the system: Skills, Connectors, Agents, and how they fit together to make your prototype real
- **Bring** one screen where AI got the UX confidently wrong — we'll use it as we talk about grounding models in real data
## Open items (for polish pass / PG review)
0. **Missing-context pass (2026-07-11)** — per PG feedback: added a 2-slide Smart Pause intro up front (real `smartpause-default.png` + the trigger scenario); converted all six prompt slides to a template-vs-filled `split` so each result reads as the answer to a shown input; the Mobile-UX Critic slide now hands Claude the real screenshot and slide-29 findings were rewritten to match it (dropped the fabricated "wrong-side CTA"); added a "what we're validating" + "moderated usability test" pair before the Test-Plan Drafter; and the closing "Setup: 7:18am…" line now names itself as the intro scenario. Confirm copy + that split slides don't overflow at deck width.
1. **§3–9 completion** — this docket carries §0–2 verbatim from the S07 theory appendix (moved here 2026-07-06) plus newly-authored §3 (mobile core), §4 (motion/time, folded into B3), §5 (cognition), §6 (platform), §7 (learning), §8 (AI era, folded into B4). Confirm the fold is right for a 90-min run.
2. **Live demos** — only the fidelity-economics curve is interactive so far. Candidates to make live per the original brief: Fitts target-size, thumb-zone heatmap [phone frame], feedback-on-touch, easing/Doherty timer, microinteraction like-button. Flag which you want built.
3. **Phone-frame assets** — thumb-zone + platform slides would land harder with a device frame; the Smart Pause screenshot is now in (critic slide), more welcome.
4. **Pace vs. capstone framing** — exercises point at the participant's own capstone prototype; adjust if you'd rather drill on Pace first.
5. **Status** — left at `draft`; not cohort-visible until you release S08.
Add ?token=… to the URL.