Inexpensive
All you need is pen and paper - no software or special tools required
Paper Prototypes
Create a Paper Prototype
Section titled “Create a Paper Prototype”Why Paper Prototypes?
Section titled “Why Paper Prototypes?”Paper prototypes offer unique advantages that make them valuable early in the design process, especially for exploring ideas and getting quick feedback.
Benefits of Paper Prototyping
Section titled “Benefits of Paper Prototyping”Rapid Iteration
Quick to make, so you can create prototypes for lots of different ideas rapidly
Low Commitment
Easy to scrap and start over since they don’t require significant time investment
Honest Feedback
Less polished appearance makes teammates and users more comfortable criticizing them
Collaborative
Different team members can quickly sketch their own prototype variations
Drawbacks to Consider
Section titled “Drawbacks to Consider”Interpretation Challenges: Requires imagination for users to picture what the real product will look like
In-Person Testing Only: Need to physically bring prototype to testing location with person acting as computer
Remote Team Limitations: Difficult to create collaboratively when team members are in different locations
When to Use Paper Prototypes
Section titled “When to Use Paper Prototypes”Paper prototypes are particularly useful for:
- Brainstorming sessions: Quickly draw multiple ideas and compare them
- Early concept testing: Test initial product ideas with users
- Team workshops: Collaborative exploration of different approaches
- Rapid validation: Get feedback on concepts before digital investment
Creating Paper Prototypes: Step-by-Step
Section titled “Creating Paper Prototypes: Step-by-Step”Preparation Phase
Section titled “Preparation Phase”Gather Materials:
- Paper wireframes of all necessary screens
- Scissors for cutting out screens
- Mobile phone outline template
- Clean workspace for organization
Screen Inventory: Ensure you have wireframes for all screens in the user flow:
- Homepage
- Primary task screens (e.g., scheduling, browsing)
- Detail/profile screens
- Confirmation/completion screens
- Any missing screens you discover during testing
Assembly Process
Section titled “Assembly Process”1. Cut Out Screens
- Carefully cut around each wireframe screen
- Keep screens organized and labeled
- Maintain clean edges for professional appearance
2. Create Device Frame
- Cut out mobile phone outline from paper or cardboard
- Ensure screens fit properly within frame
- Consider creating multiple frames for different device sizes
3. Plan Screen Sequence
- Arrange screens in logical user flow order
- Consider alternative paths users might take
- Plan for decision points and branching scenarios
Making It Interactive
Section titled “Making It Interactive”Physical Navigation:
- Place first screen (usually homepage) in phone frame
- When user “taps” element, manually switch to next appropriate screen
- Move frame to simulate scrolling through longer screens
- Use finger to point out interactive elements
Handling User Decisions:
- Prepare different screens for different user choices
- Practice smooth transitions between screens
- Be ready to create missing screens on the spot if needed
Example: Dog Walker App Prototype
Section titled “Example: Dog Walker App Prototype”User Flow Example
Section titled “User Flow Example”Starting State: Homepage in phone frame User Action: Taps “Schedule” button Response: Replace with scheduling screen
User Action: Selects date and time, taps “Book” Response: Show available dog walkers list
User Action: Taps on specific dog walker profile Response: Display dog walker profile screen
User Action: Taps “Book” on profile Response: Show booking confirmation
Handling Discovered Gaps
Section titled “Handling Discovered Gaps”During testing, you might find missing screens:
- Quick creation: Sketch missing screen immediately
- Note for later: Document gaps for digital prototype
- Alternative path: Guide user through different flow temporarily
Advanced Paper Prototype Techniques
Section titled “Advanced Paper Prototype Techniques”Scrolling Simulation
Section titled “Scrolling Simulation”For longer screens that require scrolling:
- Create extra-long paper versions of screens
- Hold phone frame steady while sliding long screen underneath
- Demonstrates realistic scrolling behavior
- Shows full content without overwhelming single view
Multiple User Paths
Section titled “Multiple User Paths”- Create variations of key screens for different user types
- Prepare alternative flows for different decision points
- Practice switching between paths smoothly
- Test various scenarios users might encounter
Interactive Elements
Section titled “Interactive Elements”- Form fields: Prepare blank and filled versions
- Toggle states: Show before/after states of switches
- Error states: Include screens showing error messages
- Loading states: Indicate when processing would occur
Testing with Paper Prototypes
Section titled “Testing with Paper Prototypes”Facilitation Tips
Section titled “Facilitation Tips”Set Expectations: Explain to users that they’re testing an early concept and should use imagination
Think Aloud: Encourage users to verbalize their thoughts and expectations
Natural Interaction: Let users point where they would tap rather than actually touching paper
Take Notes: Document user reactions, confusion points, and suggestions
Observer Benefits
Section titled “Observer Benefits”- Clear user behavior: Easy to see where users hesitate or get confused
- Immediate iteration: Can modify prototype during or immediately after testing
- Cost-effective insights: Identify major issues before digital development
- Stakeholder engagement: Observers can see user reactions firsthand
Paper prototypes serve as an excellent bridge between static wireframes and functional digital prototypes. They allow for rapid testing and iteration while keeping costs low and encouraging honest feedback from users and stakeholders.