Stage 4: Prototype — Make Ideas Tangible
A prototype is not a final product. It's a draft that helps quickly test an idea. The main motto of this stage: ** " Build to learn " **.
Why Do We Need Prototypes?
1. Fail Cheaply
Better to spend 2 hours on a paper mockup and realize the idea doesn't work than 3 months on development.
2. Think with Your Hands
When you start making a prototype, you see problems you didn't notice in your head. " How does the user get from this screen to that one? "
3. Team Communication
A prototype is a common language. Designer, developer, and manager see the same thing, not each their own.
Prototype Fidelity Levels
Low-Fidelity
These are quick, rough sketches. The goal is to test the concept, not details.
Tools:
- Paper and pencil: The fastest way. Draw screens on sheets, show to user.
- Sticky notes: Each note is an interface element. Can be moved and rearranged.
- Wireframes: Black and white schemes without color and images. Focus on structure.
Example: You draw 5 app screens for bill payment on paper. Show to grandma: " Here you open the app. What would you press next? " She points her finger at the sheet. You change sheets, simulating transitions.
Pros:
- Fast (10-30 minutes).
- Cheap (paper and pen).
- Easy to change (cross out and redraw).
Cons:
- Doesn't show animations and micro-interactions.
- Not suitable for testing complex interfaces.
Mid-Fidelity
These are digital mockups, but without final design.
Tools:
- Figma, Sketch, Adobe XD: Create clickable mockups with transitions between screens.
- Balsamiq: Specifically for quick wireframes.
What it includes:
- Real content structure.
- Buttons and links work (transitions between screens).
- Colors and fonts—simplified (gray, black, one accent color).
Example: You create 10 app screens in Figma. Link them with clickable areas. User clicks " Pay " button—goes to confirmation screen.
Pros:
- Looks realistic.
- Can test remotely (send a link).
- Shows transition logic.
Cons:
- Takes time (several hours).
- Doesn't show real loading speed and data work.
High-Fidelity
This is almost a finished product. All colors, fonts, icons, animations.
Tools:
- Figma/Sketch with final design.
- Framer, ProtoPie: For complex animations and interactivity.
- HTML/CSS prototypes: Code that works in browser.
When to use:
- Before handing off to development.
- For presentations to investors or management.
- For A/B testing details (e.g., button color).
Pros:
- As close to reality as possible.
- Can test micro-interactions.
Cons:
- Takes long (days or weeks).
- Expensive to change (if found error in concept).
Types of Prototypes
1. Paper Prototype
Draw screens on paper. User " clicks " with finger, you change sheets.
When to use: At the very beginning to test basic logic.
2. Clickable Prototype
Digital mockup with transitions between screens.
When to use: When you need to show flow (sequence of actions).
3. Wizard of Oz
User thinks the system works automatically, but actually a person does everything behind the scenes.
Example: You're testing a voice assistant. User says a command, and you manually enter the response, simulating AI.
Why: To test the concept before writing complex code.
4. Video Prototype
You shoot a short video showing how the product will work.
Example: Video where a person takes out their phone, opens the app, presses a button—and the result appears on screen (animation added in editing).
When to use: For presenting an idea when you need to inspire the team or investors.
Prototyping Mistakes
❌ Perfectionism: You spend a week on perfect design, then find out the whole concept is wrong. ❌ Too many features: A prototype should test one hypothesis, not the entire product. ❌ Ignoring feedback: You fell in love with your prototype and don't want to change it.
Practical Example: Dropbox
In 2008, Drew Houston (Dropbox founder) didn't write code. He shot a 3-minute video showing how file synchronization works. The video got thousands of views, and people signed up for the waiting list. This validated demand before development.