Chapter 7: Prototyping & Iterative Design
🎯 Learning Objectives
By the end of this study session, you’ll be able to:
- Explain how iterative design solves the problem of incomplete requirements
- Distinguish between throw-away, incremental, and evolutionary prototyping strategies
- Choose appropriate prototyping methods (hand-drawn, tool-drawn, screen, functional) for different design phases
- Create effective low-fidelity prototypes using sketching, storyboards, wireframes, and card-based techniques
- Understand when to use high-fidelity vs. low-fidelity prototypes based on project needs
- Navigate the trade-offs between horizontal and vertical prototype compromises
- Select appropriate prototyping tools for your specific project requirements
🌟 The Big Picture
Prototyping is your safety net against building the wrong thing. Since we can never gather perfect requirements upfront, iterative design lets you build, test, learn, and improve repeatedly until you create something users actually want and need.
📚 Core Concepts
What Is a Prototype?
A prototype is simply a primitive, experimental version of your system that you can test and learn from. Think of it as your “rough draft” before writing the final paper.
Key Benefits:
- Gets stakeholders involved early (they can see and touch something real)
- Helps your team communicate design ideas effectively
- Lets you test ideas quickly before committing resources
- Helps you choose between different design alternatives
The Three Prototyping Strategies
Throw-Away Prototyping
- Purpose: Build it, test it, learn from it, then discard it
- When to use: Early exploration phase when you need to understand user needs
- Think of it like: A practice essay you write to organize your thoughts before the real one
Incremental Prototyping
- Purpose: Build the final product piece by piece, releasing components one at a time
- Process: Design the overall system, then partition it into independent components
- When to use: Large systems where you can deliver value in stages
- Think of it like: Building a house room by room, moving in as each room is completed
Evolutionary Prototyping
- Purpose: Your prototype becomes the actual system through continuous improvement
- Process: Start with a very limited version, then evolve it into the final release
- When to use: When requirements will change significantly over time
- Think of it like: A Wikipedia article that starts basic and gradually becomes comprehensive through many edits
📚 Prototyping Methods by Development Stage
Hand-Drawn Prototypes
Best for: Very early brainstorming and concept exploration
How it works:
- Designer draws screens with paper and pencil
- User “interacts” by writing in fields and pointing to buttons
- Designer plays the role of the computer, writing responses
Advantages: Super quick, encourages creativity, no technical barriers
Tool-Drawn Prototypes
Best for: When you want something that looks more realistic than hand-drawn
Process:
- Use the same software tool planned for final product (MS Access, Visual Basic, etc.)
- Print the screens and use like hand-drawn prototypes
- Designer still manually simulates computer responses
Key advantage: Looks more professional and realistic than hand-drawn versions
Screen Prototypes
Best for: Testing visual design and basic interactions
Characteristics:
- Displayed on actual computer screens
- Limited functionality (some data entry possible)
- Responses simulated through “secret keys” or by placing data stickers on screen
- User can see how the real interface will look and feel
Functional Prototypes
Best for: Testing complex interactions and workflows
What makes them special:
- Buttons, menus, and interfaces actually work
- Can open/close windows, update related screens
- May connect to real databases
- Closest to the final product experience
📚 Fidelity Levels: When to Go Low vs. High
Low-Fidelity Prototypes
When to use: Early stages, exploring multiple concepts, tight budgets
Materials: Paper, cardboard, simple digital tools Speed: Very quick to create and modify
Low-Fi Techniques Deep Dive
Sketching:
- Don’t worry about drawing ability - use simple symbols
- Perfect for rapid brainstorming sessions
- Focus on ideas, not artistic quality
Storyboards:
- Borrowed from film industry
- Shows user journey through your interface step by step
- Excellent for comparing different design approaches
- Pro tip: Combine with user scenarios for role-playing sessions
Wireframes:
- Used once initial design direction is set
- Focus on layout, navigation, and general “look and feel”
- Keep drawings simple: rectangular objects, basic outlines
- Workflow tip: Create sequences showing how user actions trigger state changes
Card-Based Prototyping:
- Use 3×5 inch index cards
- Each card = one screen or screen section
- Especially popular in website development
- Easy to rearrange and test different flows
‘Wizard of Oz’ Prototyping:
- Human operator secretly controls the interface
- User thinks they’re interacting with real system
- Much faster and cheaper than building functional prototypes
- More realistic than paper prototypes
High-Fidelity Prototypes
When to use: Later stages, usability testing, client presentations, marketing
Characteristics:
- Look very close to final system appearance
- Better for collecting accurate performance data (task completion times, error rates)
- More expensive and time-consuming to create
Common tools: Adobe XD, Figma, Photoshop, Xcode/Swift, web development environments
🔄 Strategic Trade-offs and Compromises
The Fidelity Decision Matrix
| Low-Fidelity Advantages | Low-Fidelity Disadvantages |
|---|---|
| Quick and inexpensive | Limited usability testing value |
| Great for multiple concepts | Navigation/flow limitations |
| Excellent communication tool | Requires facilitator guidance |
| Perfect for layout issues | Poor detailed specifications |
| High-Fidelity Advantages | High-Fidelity Disadvantages |
|---|---|
| Interactive and user-driven | Time-consuming to create |
| Clear navigation schemes | Inefficient for proof-of-concept |
| Great for detailed testing | Can blind you to major flaws |
| Excellent marketing tool | Expensive to modify |
Prototype Scope Compromises
Every prototype involves strategic compromises:
Horizontal Prototypes:
- Coverage: Wide range of functions
- Depth: Little detail for each function
- Best for: Exploring overall system scope and user workflows
Vertical Prototypes:
- Coverage: Few functions only
- Depth: Lots of detail for selected functions
- Best for: Testing complex interactions or technical feasibility
🛠️ Technical Considerations for Prototype Planning
Questions Your Prototype Should Answer
Technical Constraints:
- Video compression vs. quality trade-offs
- Required hardware specifications
- Performance limitations
User Experience Design:
- Optimal icon sizes and visual hierarchy
- Screen layouts and information display priorities
- Workflow efficiency and task completion paths
Recommended Prototyping Tools
Free/Open Source Options:
- Pencil (http://pencil.evolus.vn/) - Open source
- Marvel App (https://marvelapp.com) - Free account available
Paid Professional Tools:
- Figma (https://www.figma.com) - Industry standard, trial available
- Balsamiq (https://balsamiq.com/) - Trial version available
Physical Prototyping:
- UI Stencils (http://www.uistencils.com/) - Paper prototyping kits
🔄 Connections and Review
Prototyping isn’t just about creating mockups—it’s about managing uncertainty and risk in your design process. By choosing the right prototype type and fidelity level for your current needs, you can gather the feedback you need efficiently while avoiding costly mistakes. Remember: low-fi for exploration and concept validation, high-fi for detailed testing and stakeholder buy-in, and always match your prototype scope to your specific research questions.