Prototyping

Why Prototype?

Prototypes are the fastest way to test ideas, get feedback, and fail cheaply. Building the wrong thing in code is expensive. Building it in a prototype costs hours, not months.

The Cost of Not Prototyping

Example: Google Wave

Google spent 2 years building Wave without adequate prototyping and user testing. Launched to confusion, shut down after 1 year. Cost: Estimated $100M+

Lesson: A week of prototyping could have revealed users didn't understand the concept

Fidelity Spectrum

Low Fidelity (Hours)

Tools: Paper, whiteboard, basic wireframes

Purpose: Explore concepts, test basic flows

Best For: Early ideation, quick iteration

Example: Sketching 10 different homepage layouts in 1 hour to explore options

Medium Fidelity (Days)

Tools: Figma, Sketch, Adobe XD

Purpose: Test interactions, validate flows

Best For: Usability testing, stakeholder reviews

Example: Clickable prototype of checkout flow to test with users

High Fidelity (Weeks)

Tools: Figma with real content, Framer, code prototypes

Purpose: Test final design, developer handoff

Best For: Final validation, complex interactions

Example: Fully designed prototype with real data and animations

Paper Prototyping

Example: Hanmail's Mobile Email (2009)

Challenge: Design email for first iPhone in Korea

Method: Paper prototypes of different layouts

Process:

  • Drew 20 different screen layouts on paper
  • Cut out UI elements to rearrange
  • Tested with users holding paper "phone"
  • Iterated based on feedback in real-time

Result: Found optimal layout in 2 days vs weeks in Photoshop, launched successfully

Paper Prototyping Tips

  • Use Templates: Print device outlines for scale
  • Sticky Notes: Easy to move and replace elements
  • Multiple Screens: Show different states
  • Be the Computer: Manually swap screens as user "clicks"
  • Take Photos: Document iterations

Digital Wireframing

When to Wireframe

  • Testing information architecture
  • Validating user flows
  • Communicating with stakeholders
  • Planning complex layouts
  • Before investing in visual design

Example: Airbnb's Redesign Process

2014 Redesign: Complete platform overhaul

Wireframing Phase:

  • Created 100+ wireframe variations
  • Tested with users weekly
  • Iterated based on feedback
  • Only moved to visual design after flows validated

Time Saved: 6 weeks of wireframing prevented 6 months of redesigning high-fidelity mockups

Wireframing Mistakes

  • Too Detailed: Defeats the purpose of low-fi
  • Too Polished: Stakeholders focus on colors not structure
  • Skipping It: Jumping to hi-fi wastes time
  • Not Testing: Wireframes should be tested with users

Interactive Prototypes

Prototyping Tools

  • Figma: Collaborative, web-based, great for handoff
  • Framer: Code-based, complex interactions
  • ProtoPie: Advanced interactions without code
  • Principle: Animation-focused, Mac only
  • InVision: Simple click-through prototypes

Example: Uber's Animated Prototypes

Challenge: Design new driver app with complex state changes

Approach: Built high-fidelity prototypes in Framer

Included:

  • Real-time map updates
  • Ride request animations
  • Navigation state transitions
  • Earnings calculations

Benefit: Engineers understood exact behavior, reduced back-and-forth by 70%

What to Prototype

  • Happy Path: Ideal user journey
  • Edge Cases: Error states, empty states
  • Key Interactions: Novel or complex behaviors
  • Transitions: How screens connect
  • Responsive Behavior: Different screen sizes

Wizard of Oz Prototyping

What is Wizard of Oz?

Prototype appears functional to users, but a human is controlling it behind the scenes.

Use When: Testing AI, complex algorithms, or technical feasibility is uncertain

Example: IBM's Speech Recognition (1980s)

Challenge: Test if users would talk to computers

Prototype: Users spoke into microphone, hidden person typed what they said

Discovery: Users spoke differently to computers than to humans (shorter, clearer)

Impact: Informed speech recognition development, validated market need before building tech

Example: Zappos' MVP

Concept: Sell shoes online (1999, pre-ecommerce boom)

Prototype: Website with shoe photos

Behind Scenes: Founder went to shoe stores, bought shoes, shipped them

Purpose: Test if people would buy shoes without trying them on

Result: Validated demand before building inventory system, grew to $1B+ company

Code Prototypes

When to Code a Prototype

  • Testing technical feasibility
  • Complex interactions impossible in design tools
  • Performance-critical features
  • Real data integration needed
  • Developer buy-in required

Example: Instagram's Filters

Early Prototype: Coded prototype with real image processing

Why Code: Needed to test filter performance on actual photos

Process:

  • Built 20 different filters
  • Tested processing speed on iPhone 3G
  • Optimized algorithms
  • User tested with real photos

Result: Filters became signature feature, validated before full development

Code Prototype Best Practices

  • Throwaway Code: Don't expect to ship it
  • Focus on One Thing: Test specific hypothesis
  • Use Frameworks: React, Vue for quick UI
  • Fake the Rest: Only code what you're testing
  • Time-box It: 1-2 days max, then decide

Video Prototypes

Example: Dropbox's Explainer Video

Challenge: Explain file syncing concept (2008, before cloud storage was common)

Prototype: 3-minute screencast video showing how it works

Content:

  • Demonstrated drag-and-drop
  • Showed sync across devices
  • Explained sharing
  • Used humor and personality

Result: Beta waitlist went from 5,000 to 75,000 overnight, validated demand without building product

When to Use Video Prototypes

  • Explaining complex concepts
  • Showing service experiences (not just UI)
  • Demonstrating physical products
  • Pitching to stakeholders/investors
  • Marketing validation

Prototyping for Different Audiences

For Users

Goal: Test usability and desirability

Fidelity: Medium to high

Focus: Realistic interactions, real content

Example: Clickable prototype with actual product photos for ecommerce testing

For Stakeholders

Goal: Get buy-in and feedback

Fidelity: High visual polish

Focus: Key screens, happy path

Example: Polished prototype showing main user journey for executive review

For Developers

Goal: Communicate behavior and specifications

Fidelity: High interaction detail

Focus: Edge cases, states, responsive behavior

Example: Prototype with annotations showing loading states, error handling, breakpoints

For Yourself

Goal: Explore and think through problems

Fidelity: Low, fast

Focus: Quantity over quality

Example: Quick sketches of 10 different approaches to a problem

Prototyping Workflows

Example: Spotify's Design Sprint Prototyping

Monday: Map problem and choose target

Tuesday: Sketch solutions individually

Wednesday: Decide on best solution

Thursday: Build high-fidelity prototype (8 hours)

Friday: Test with 5 users

Result: Validated or invalidated ideas in 1 week vs months

Rapid Prototyping Tips

  • Reuse Components: Build library of common elements
  • Use Templates: Start with existing patterns
  • Fake Data: Lorem ipsum and placeholder images
  • Focus on Core: Prototype critical path only
  • Set Time Limits: Force decisions, prevent perfection

Testing Prototypes

What to Test

  • Comprehension: Do users understand what it does?
  • Usability: Can they complete tasks?
  • Desirability: Do they want to use it?
  • Feasibility: Can we build it?
  • Viability: Will it achieve business goals?

Prototype Testing Pitfalls

  • Over-explaining: Let users discover on their own
  • Defending Decisions: Listen, don't justify
  • Testing Too Late: Prototype early and often
  • Ignoring Negative Feedback: Criticism is valuable
  • Testing with Wrong Users: Use actual target audience

Advanced Prototyping (Staff/Director Level)

Prototyping at Scale

  • Component Libraries: Reusable prototype components
  • Design Tokens: Consistent styling across prototypes
  • Prototype Systems: Templates and patterns for teams
  • Automated Testing: Test prototypes with real users at scale
  • Prototype to Production: Code that transitions to real product

Example: Google's Material Design Prototyping

Challenge: 100+ teams needed to prototype with Material Design

Solution:

  • Built comprehensive Figma component library
  • Created prototyping templates for common patterns
  • Developed code components that match design
  • Enabled teams to prototype in hours, not days

Impact: Prototyping speed increased 5x, consistency across products improved 90%

📅 Evolution of Prototyping

Pre-2000: Physical & Analog

Example: Paper sketches, foam models, HTML mockups

  • Hand-drawn wireframes and storyboards
  • Physical models for industrial design
  • Static HTML pages linked together
  • Weeks to create interactive prototypes
  • Expensive to iterate and change

Pre-2023: Digital & Interactive

Example: InVision, Figma, Framer

  • Click-through prototypes in minutes
  • Animations and micro-interactions
  • Share links for remote testing
  • Version control and collaboration
  • Responsive prototypes for multiple devices

2023+: AI-Assisted & Code-Based

Example: AI generates prototypes from descriptions, v0.dev

  • AI creates prototypes from text prompts
  • Real code prototypes that ship to production
  • Voice-controlled prototype creation
  • Automatic responsive behavior
  • Live data integration in prototypes

Fun Fact

The first iPhone prototype was actually made of wood! Before Apple had working hardware, designers created wooden blocks the exact size and weight of the planned iPhone. They carried these "prototypes" in their pockets for weeks to test if the size felt right. Steve Jobs was famous for this—he'd prototype everything physically first, even if it was just foam or cardboard. He believed you couldn't truly understand a product until you could hold it!

⚠️ When Theory Meets Reality: The Contradiction

Theory Says: Start with low-fidelity, gradually increase fidelity through testing

Reality: Some of the most successful products skipped prototyping entirely and launched with real code.

Example: Twitter's First Version

  • Jack Dorsey coded the first version in 2 weeks
  • No prototypes, no wireframes, no user testing
  • Just built it and launched internally
  • First tweet: "just setting up my twttr"
  • Learned by watching real usage, not testing prototypes

Lesson: For technical founders who can code, sometimes building the real thing IS the fastest prototype. Prototyping tools can slow you down if you're already fluent in code. Know when to prototype and when to just build.

📚 Resources & Further Reading

Books

  • Warfel, Todd Zaki. Prototyping: A Practitioner's Guide. Rosenfeld Media, 2009.
  • Knapp, Jake, et al. Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days. Simon & Schuster, 2016.
  • Gothelf, Jeff, and Josh Seiden. Lean UX: Designing Great Products with Agile Teams. 2nd ed., O'Reilly Media, 2016.

Articles & Papers

Tools

  • Figma / FigJam - Design and prototyping
  • Framer - Interactive prototyping
  • ProtoPie - Advanced interaction prototyping
  • InVision - Prototyping and collaboration
← Previous: Visual Design Next: Usability Testing →