prototype-planning

Prototype Planning

Overview

A prototype answers a question. The right fidelity depends on what you're testing. This skill helps you choose the right prototype type, create it efficiently, and run tests that produce actionable learning.

When to Use

• You want to test a solution concept before building
• You need to communicate an idea to engineers or designers
• You want to run usability tests early, before code is written
• You're planning a design sprint
• Don't use for: testing backend feasibility, proving scalability, or final visual design sign-off

Instructions

1. Define What You're Testing

What question does this prototype answer?

• "Will users understand this workflow?"
• "Is this feature discoverable?"
• "Does the copy communicate the value proposition?"
• "Will users choose this over the current solution?"

The question determines the fidelity.

2. Choose the Right Fidelity

Fidelity	Best For	Tools	Investment
Paper	Workflow logic, initial concept validation	Pen, paper, sticky notes	30 min
Wireframe	Layout, hierarchy, information architecture	Balsamiq, Figma, draw.io	2-4 hours
Interactive (clickable)	Usability testing, flow validation	Figma, Framer, Axure	1-3 days
High-fidelity	Visual design testing, stakeholder buy-in	Figma, Sketch, Framer	3-10 days
Live-code (stub)	Technical feasibility + UX combined	HTML/CSS/JS, no backend	1-5 days

Rule: Build the simplest prototype that answers your question. If paper works, don't code.

3. Plan the Prototype

For each screen or interaction:

• Purpose: What does this screen accomplish?
• Entry: How does the user get here?
• Exit: What's the next step?
• Edge cases: What if there's no data? What if the user makes a mistake?

4. Create the Prototype

Tips for fast prototyping:

• Use a template or existing components library
• Only build the happy path initially
• Use placeholder data that looks realistic
• Add error states if you're testing usability
• Don't polish — done > perfect