Page 1
“If I had an hour to solve a problem and my life depended on the answer, I would spend the first 55 minutes figuring out the proper questions to ask.
For if I knew the proper questions, I could solve the problem in less than 5 minutes.
- Albert Einstein
“
Page 2
Whiteboarding & Paper Prototyping
Page 3
Agenda
▧ Why it’s Important?
▧ Whiteboarding What is Whiteboarding? Significance of Whiteboarding? How we do it? The Framework
- Quadrants - Experience Samples Hands-on activity
Page 4
Agenda ...cont
▧ Paper Prototyping What are paper prototypes?
When is it required? Significance of paper prototyping : Quick, Cost effective, Expressive How we do it?
Whiteboarding vs Prototyping Samples Myths of Paper Prototyping
Popular Prototyping tools Hands-on Activity
▧Recommended Readings
▧References
Page 5
Why it’s important?
Page 6
Why it’s Important?
▧ Early Customer Feedback
▧ Validate Business Hypothesis
▧ Save wastage in MVP Development
Page 8
What is Whiteboarding?
It’s a technique where an idea is presented to a group of people willing to criticize, encourage, or add to that idea.
Better VisualizationThinking Aloud Quick Collaboration
Page 9
Significance of Whiteboarding
▧ Highly Interactive
▧ Easy & Really Fast
▧ Low Cost
▧ Baseline for Prototype
Page 10
How we do it?
Sketch
Think
Collaborate
brainstorm
evolve
communicate
Page 11
The Framework
There are two parts to this framework
▧ The Quadrants
▧ Tasks Flow
Page 12
Draw four quadrants on the whiteboard first
▧ User Needs
▧ Assumptions
▧ User Goals
▧ Constraints
The Quadrants
User-Needs Assumptions
User-Goals Constraints
Page 13
The Quadrant
User-Needs Assumptions
User-Goals Constraints
● Age at parents buys Toys for their kids● Need Easy buying options● Should be trustworthy
● I want to customize the Toy color● Comparison is required● If I don’t like the product, easy
replacement
● Age Group is 5-10 Years
● We don’t have mobile expertise on board
Page 14
Now that you have majority of the research done about our user
▧ Draw interaction design flow
▧ Visualize the whole journey as a user
Task Flow
Page 15
Tom WujecWorks at AutodeskProfessor at Singularity University
Page 17
Whiteboarding Samples
Page 18
Screens - Task flow
Page 19
Screens - Task flow
Page 24
Information Architecture
Page 25
Hands-on Activity
Page 26
Mr. Tom Sanders took a flight from San Francisco to New York City for a business conference.
Page 27
Tom booked his stay at Hotel Transnational and looking out for a taxi to reach hotel.
Page 28
After reaching “Hotel Transnational” in New York City...
Page 31
▧ Which way is my room?
▧ How to get my WiFi activated?
▧ How can I go for sightseeing?
Page 32
How to Solve this Problem?
Page 33
Let’s Digitize..!
Page 34
Let’s design a Mobile App which can assist the guest with his stay at
the hotel?
Page 35
Define Quadrants
User-Needs Assumptions
User-Goals Constraints
Page 38
“Just how do I design if not with Prototyping? An excellent question…
The short answer is ‘on paper.’
- Alan Cooper
“
Page 39
Paper Prototyping
Page 40
What is Paper Prototyping?
A technique that allows to create and test user interfaces rapidly. It's an easier way to create realistic prototypes just by paper.
It’s in practice since 1980.
Usability TestingCommunicate Idea
Page 41
When is it required?
Brainstorming Outline workflows
Explore/validate layouts
Show basic app structure
Page 42
Significance of Paper Prototyping▧ Quick Hypothesis Validation
▧ Fast & Cost Effective
▧ Honest & Unbiased Feedback
▧ Encourages Creativity
▧ Team Building
▧ No Design & Coding Skills Required
▧ Helps in Documentation
Page 43
How we do it?
1. What is required here?
2. Printer paper + Pencil
3. Prototype mobile-first
4. One sketch per screen
5. Iterate & Refine as Idea evolves
Page 44
Whiteboarding vs Paper Prototyping
Whiteboarding Paper Prototyping
Focus on usability perspective Help understand interactions and flows
Effective and Fast Collaboration Actualization of product
Team Brainstorming User Engagement
Create Product Outline Honest User Feedback
Page 45
Paper Prototyping Samples
Page 52
Myth of Paper Prototyping
Page 53
“Myth #1
“I can't draw well enough to create a paper prototype.”
Page 54
“Myth #2
“Wireframes are the same as paper prototypes.”
Page 55
“Myth #3
“I can do it just as well with Visio.”
Page 56
“Myth #4
“Whiteboarding is just as effective.”
Page 57
“Myth #5
“Users behave differently with a paper prototype than with a
real system.”
Page 58
“Myth #6
“It looks unprofessional.”
Page 59
“Myth #7
“I can't prototype interactivity.”
Page 60
“Myth #8
I Can’t test my prototype with overseas users?”
Page 61
Prototyping Tools
Page 62
Popular toolsBenefits:
● Sketch like look● Quick & Easy to use● Lo-Fi Prototypes
Page 63
Popular tools
Benefits:
● Design Interactions● Hi-Fi Prototypes● Handle Virtual Data● Collaboration
Page 64
Popular toolsBenefits:
● Web Tool● Simple & Effective UI● Design Interactions● Collaboration● Remote User Interviews
Page 65
Popular tools
Benefits:
● Interactive Tool for Mobile App● Hi-Fi Prototypes● Completely Web Based● Realistic Mobile Interactions
Page 67
Prototypes created using Tools
Page 70
Created in Balsamiq
Page 72
Wireframe Progression
Page 73
Created in JsFramer
Page 74
Hands-on Activity
Page 75
Wireframe Prototyping
Page 76
Pitch Your Idea
▧ Value Proposition (Problem & Solution)
▧ Prototype Walkthrough
▧ Next Steps (Roadmap & Vision)
▧ Any Other Keypoint
Page 78
Recommended Readings
▧ The Back of the Napkin : Solving Problems and Selling Ideas with Pictures - by Dan Roam
▧ Whiteboard Selling: Empowering Sales Through Visuals - by Corey Sommers & David Jenkins
Page 79
Thanks!
Happy Sketching!
[email protected] @synerzip.com
Credit for template goes to www.slidescarnival.com
Page 80
References
▧ Paper Prototyping - by Dr. David Travis
▧ Nielsen Norman Group
▧ Sketching Matters - by Paul Goode and Mark Kraemer
▧ Everything you need to know about Sketching - by Nick Vyhouski
▧ 7 Myths about paper prototyping - by David Travis