Product Academy
Maven · Live session · Alternative version

From PRD to Prototype, using real interview cases

A prototype is a question you can click.

The Brightwheel staff coverage prototype, guided demo screen 1
The line to remember

A prototype is a question you can click.

The quality of that question matters more than the polish of the screens.

From my interview work I've made the mistake this lesson is about

RentSpree: a polished concept that answered a later question

What I built: SteadBuilt around a landlord buying another property.[DAVE: Stead screenshot]🔒 Stead ↗
panel feedback→
What they asked: Owner MomentumHow does an agent hand an owner off after tenant screening, and help that owner complete a first management task?[DAVE: Owner Momentum screenshot]🔒 Owner Momentum ↗

Ask the room: what can a polished prototype establish, and what can't it?

Both RentSpree links need my access.

Learning goals

By the end, you'll be able to

  1. Identify the exact decision in a brief: the target user, the constraint and the success event
  2. Separate firsthand observations, interview evidence, documented facts and assumptions
  3. Work backward from a completed customer job to a small, testable flow
  4. Use AI to speed up research synthesis, screens and iteration, while you own the product decisions
  5. Run a task-based prototype review, and use the findings to revise the PRD
Keep asking these all session

Five questions to keep asking

1What am I being asked to decide?
2What have I actually observed?
3What must the user complete?
4What would this prototype let me see?
5What would make me change direction?
Today · suggested 90 minutes · tap a row to jump

Session plan

TimeTeach or do
0-8 minThe RentSpree mistake. What a polished prototype can and can't establish
8-20 minThe process: brief, evidence, PRD, user goal, screens, flow, test
20-35 minBrightwheel as one complete customer outcome
35-43 minHow the process changes for Tin Can, Yoodli, Meta and RentSpree
43-60 minDemo: one front-end edit, one broken state, one published link
60-75 minYou sketch or build your own five-screen flow
75-82 minPartners try each other's flow, without coaching
82-90 minDebrief: what changed, what's still an assumption, what goes back into the PRD
What can a polished prototype establish?

Wireframe, prototype, PoC, MVP: what's the difference?

StepWhat it isWhat it tests
WireframeLow-fidelity layout. No real interactionsStructure and flow
Hi-fi designPolished mockup of the final UI. Still not functionalLook and feel
PrototypeClickable simulation. May not use real dataUsability and the concept
Proof of conceptShows it can be built. Not meant for usersTechnical feasibility
MVPSmallest functional version that delivers valueReal behaviour
Alpha / beta / GAA more stable MVP with a limited audienceUsability and performance
ProductScaled, reliable solution (V1, V2, V3...)Ongoing value
The process behind the prototype

A step before the four build steps, and a learning loop after

BeforeThe four build steps from the base deckAfter
Brief and evidence
→
PRD and assumption
→
One customer outcome
→
Four to five screens
→
Clickable flow
→
Observed task
→
Revise the PRD
↺ and round again with the revised PRD

The base deck teaches four build steps: a good PRD, user goals and steps, key screens, and stitching them together. My interview work adds a decision before them and a learning loop after them.

Before step 1 · answer the exact brief

Write the brief in one sentence, then mark the evidence

The one-sentence brief
For [this user], we need to learn whether [this proposed change] helps them complete [this outcome], under [these constraints].
Interview observation · one data point"A childcare director described the coverage problem."
Untested business hypothesis"Directors will pay for this workflow." A prototype can make the workflow concrete. It can't turn this into a fact.

If the brief asks for activation, an elegant expansion concept belongs later. That was the RentSpree lesson.

Step 1 · brain dump, then write the PRD

The useful output is a decision document

Brain dump first, in your own words
  • The customer problem and the company goal
  • What you saw or heard
  • Likely alternatives and constraints
  • Open questions
Then AI organises it into
WhoWhat outcomeWhy nowBuild firstDeferHow to measureStill unknown
From my interview work
Yoodli analytics concept
  • Started with the brief, interviews, product inspection and Yoodli's strategic context
  • The working user became an enablement leader deciding who was ready for a product or messaging change, and who needed support
  • I kept practice results separate from proof of performance in real customer conversations
Yoodli insights prototype ↗
Step 1 · common PRD structure

What goes in the PRD

1Problem2Market dynamics3Customer / user profiles4Measure of success5Product features & release6Design or prototype7Risks and regulations+Optional: vision / mission

Product Academy PRD template · [DAVE: template link]

Step 2 · write the finish line and work backward

Define the moment the user's job is done

Message sentprogress→Replacement acceptsprogress→Replacement arrives and coverage is verifiedthe job is done
The ruleList the minimum actions and decisions that lead to the finish line. Include at least one failure path.
From my interview work · BrightwheelThe job was complete when a director-approved replacement arrived and coverage was verified. That distinction shaped the journey and the success measure.
Step 3 · choose four to five screens

Each screen advances the job or exposes a decision

1TeacherReports an absence, with the time and room affected
2DirectorSees the gap and decides to request cover
3ReplacementA suitable replacement reviews and accepts
4DirectorSees the expected arrival, or an exception that needs action
5DirectorConfirms that coverage happened

A teaching cut of the Brightwheel flow. Screen count is a forcing function for focus, not a rule that every product needs exactly five screens.

Step 4 · connect, publish, and mark what is simulated

A reviewer should know what it demonstrates, and what it simulates

Make the primary flow clickable, then add
  • A restart
  • A failure state
  • Short notes for assumptions
  • A clear label on anything simulated
From my interview work
Tin Can retention concept
  • Approvals, calls and the AI coordinator are simulated
  • The next real question: do these changes help families complete more meaningful calls over time?
Tin Can retention prototype ↗
After step 4 · observe a task, then update the PRD

Give someone a situation, then watch

1Set the situationAsk them to try to complete the job
2WatchWhere do they hesitate, take a wrong turn, or expect something that isn't there?
3Ask"What do you think happens next?"
4Record and updateThe observation, the decision it suggests, and what to cut or defer in the PRD

A positive comment about the look of a screen is useful design feedback. It doesn't establish repeat use, willingness to pay, feasibility or a business result.

From my interview work Brightwheel · one complete customer outcome

Brightwheel staff coverage

  • A teacher texts in sick before opening
  • The director requests cover
  • A replacement accepts
  • The director sees the arrival, or an exception
  • Coverage is verified: the finish line
Open the Brightwheel prototype ↗
From my interview work Brightwheel · tap to enlarge

The prototype can simulate more than the first release does

The interview prototypeSimulates the actions behind each screen, including the director's desktop view.
The first release I proposedNarrower: director-approved coordination. AI calling and a broader marketplace were deferred.
From my interview work Brightwheel · where AI helped and where I made the calls

AI makes the choices visible faster. The PM makes them.

Where AI helpedAccelerated market and customer research. Organised the director interview. Drafted strategy. Made screens and iterated the clickthrough. Separate strategy and prototype agents worked from a shared project folder.
The calls I madeChose the customer problem. Challenged the generated ideas. Cut the first release. Edited the story.

The PM owns the brief, the customer outcome, assumptions, scope, trade-offs and how feedback is read. The director conversation grounded the work, but it was still one interview.

From my interview work Four cases that teach different decisions

Same process, different decision

A fifth, Wayfair Home Projects, adds a delivery lesson: check the final demo link as a reviewer would.

From my interview work Case 1 · Meta · tap to enlarge

Stay close to the charter

From my interview work Case 2 · Yoodli · tap to enlarge

Make evidence useful for a decision

  • The enablement leader needs to know what the training evidence supports
  • Which groups need attention, and what action to take
  • A practice score shouldn't be presented as a proven business outcome
Open the insights prototype ↗

Fictional data. AI responses simulated.

From my interview work Case 3 · Tin Can · tap to enlarge

Start with lived use, then narrow

  • I bought and used four devices. That exposed missed-call and repeat-use questions desk research alone wouldn't have produced
  • Explored many retention ideas, narrowed to private invitations, scheduled calling and shared experiences, then added missed-call handling
  • A way to discuss possible behaviour, not a measured retention result
Open the retention prototype ↗
From my interview work Case 4 · RentSpree

Answer the current job first

SteadExplored portfolio growth: a later question.🔒 Stead ↗
narrower→
Owner MomentumThe immediate handoff from agent-assisted screening to a first management action. It separates owners who never joined from owners who joined and then went quiet.🔒 Owner Momentum ↗

A login or an opened message isn't the completion event.

[DAVE: screenshots of Stead and Owner Momentum. Both links need your access]

From my interview work A fifth example · Wayfair Home Projects

Check the final demo link as a reviewer would

What went wellIt helped me iterate quickly from Saved Boards to a visual project flow.
The delivery lessonThe old public URL now returns 404. Before you send a link, open it the way a reviewer would.
[DAVE: screenshot from the local Wayfair demo]

Presenting this case? Use the local demo, not the old link.

Demo · teach the sequence of decisions, not every tool

Three phases of vibe coding

1Vibe code the front end firstYour PRD is the perfect artefact for it. Move features around with no backend, no AI, nothing else yet
2Deploy the code to a repoGitHub: "like a Confluence or wiki page, but for code"
3Go deeper in an IDEClaude Code (or Cursor) pulls the code. Add the backend, manage changes, deploy live

Why front end first? Every feature costs time, energy and tokens. Moving features around on the front end is much easier, with less waiting and less heavy lifting.

Demo 1 · one front-end edit

Upload the PRD, then vibe with the AI

Front-end prompt (with your PRD attached)
Create me a front end experience for this, so I can move features around and vibe with you on the solution, before going too deep.
  • Ask for changes as you go: "I want a richer chat experience that allows voice to be added"
  • Happy with the screens? Export → Build with AI Studio. My build ran for 283 seconds
  • The first version will have bugs. "I've never seen a one-shot experience where everything's perfect"
  • Something broken? Take a screenshot, put it into the chat, and describe what should happen

Don't worry about backend or AI functionality yet. Just figure out the experience you want.

Demo 2 · one broken state

Any time you're stuck, take a screenshot and put it into Claude.

Screenshot it→Describe what you expected→Let the coding tool repair it→Try the flow again
Demo 3 · one published link

It's not about building anymore. It's about validating your ideas quicker.

Publish and sharePublish as a link, send it to people, and ask: does this matter? Does it solve a key problem? Do people care about tracking prices and buying straight away? If not, what do they care about?
Talk to customers, then vibe code againJump on a Zoom call, turn on a transcription tool or Granola, paste what they told you into the chat, ask it to pull out the key features and benefits, then publish the latest version.

It's not perfect, and that's not the point. Showing the latest version is impressive, especially with senior stakeholders: general managers, CEOs, clients.

Follow-on material · once you have a clear customer flow

Prototype in Lovable, finish in code

1LovableVibe code the front end from the PRD. Google AI Studio, Replit and Bolt do the same job
→push
2GitHubThe code lives in a private repo you own, so you're not betting your future on one tool
→pull
3Claude Code or CodexPulls the code and builds the rest of the app: the backend and everything else

The backend, GitHub, pull request and Railway slides from the base deck are follow-on material. Use them once the customer flow is clear.

Try it A prompt you can adapt

Ask for the screen map before the build

Clickable concept prompt
Here is my brief, brain dump, and evidence. Help me create a clickable concept for one target user.

First, restate the exact customer job and the assumption this prototype should test. Separate observed facts from assumptions. Propose a flow of no more than five key screens, including one failure or exception path. For each screen, say what the user sees, decides, and does.

Use fictional data where needed and label simulated behaviour. Do not invent customer quotes, business metrics, integrations, or validation. Show me the screen map before building. Once I choose the scope, build the clickthrough and include a restart.

AI can make your choices visible faster. It shouldn't silently make them for you.

Try it In-class exercise · 15 minutes

Build your own five-screen flow

  1. Write the brief in one sentence. Name the user, job, constraint and finish line
  2. Mark the evidence. One thing observed or supplied, and two assumptions
  3. Choose the riskiest assumption. What could make this concept unnecessary or unusable?
  4. Sketch five screens or fewer. Include an unhappy path and the completed outcome
  5. Make it clickable if time allows. A paper flow or linked mockup is enough. Label simulations
No PRD? Use this situation
A childcare centre director learns before opening that a teacher is sick and needs safe, approved coverage for the morning.
Try it Partner test · 7 minutes

Give a partner a task. Observe before explaining.

6 · The task (say it, then stay quiet)
You are the director. A teacher called out sick at 6:30 a.m. Show me how you would get the room covered.
7 · Record
  • Where did they hesitate?
  • What did they expect to happen?
  • Did they reach the finish line?
  • What would you change?
Quick review rubric · ready for a first review?

Can a peer identify all six?

1One target user
2One completed outcome
3The evidence and assumptions
4A coherent path with an exception
5What is simulated
6The decision the test is meant to inform

If a peer can't, revise the story before adding more screens.

Debrief · 8 minutes

What changed, and what goes back into the PRD?

  1. What did the participant actually do?
  2. Which assumption became more or less plausible?
  3. Which screen can you remove?
  4. What do you still need to learn from a real customer or engineer?
  5. What sentence goes back into your PRD?
Close the loop

Put the prototype back into the PRD

  • Link the prototype (e.g. your Lovable link) in the PRD's design section, so people can see how it works
  • Update the PRD as the prototype changes. It's a living document
  • Bring your designer in to connect strategy and design into one flow
To close

"Tools will keep changing. The product work underneath them is more durable: understand the brief, find the customer job, make one idea tangible, watch someone try it, and change your mind when the evidence tells you to."

"I've built prototypes that were useful because they made a workflow clear. I've also built a polished one that missed the immediate question. Both experiences made the next version better."

Homework

One small flow, one real person, two versions

1PublishOne small flow
2TestWith one relevant person
3ObserveWrite down three observations
4ReviseUpdate the PRD. Bring both versions to the next session

Share it: [DAVE: where to share, e.g. Maven community / next session]

Want to keep going?

Build with us at Product Academy

  • Learn, build and grow with other PMs
  • More sessions like this one
  • No pressure. Have a look if it's useful

Join: productacademy.io/join

QR code for productacademy.io/join
Questions

Q&A

Test ideas, not perfection. I hope to see some amazing apps from you.