white-boarding & paper prototyping
TRANSCRIPT
![Page 1: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/1.jpg)
“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: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/2.jpg)
Whiteboarding & Paper Prototyping
![Page 3: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/3.jpg)
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: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/4.jpg)
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: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/5.jpg)
Why it’s important?
![Page 6: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/6.jpg)
Why it’s Important?
▧ Early Customer Feedback
▧ Validate Business Hypothesis
▧ Save wastage in MVP Development
![Page 7: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/7.jpg)
Whiteboarding
![Page 8: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/8.jpg)
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: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/9.jpg)
Significance of Whiteboarding
▧ Highly Interactive
▧ Easy & Really Fast
▧ Low Cost
▧ Baseline for Prototype
![Page 10: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/10.jpg)
How we do it?
Sketch
Think
Collaborate
brainstorm
evolve
communicate
![Page 11: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/11.jpg)
The Framework
There are two parts to this framework
▧ The Quadrants
▧ Tasks Flow
![Page 12: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/12.jpg)
Draw four quadrants on the whiteboard first
▧ User Needs
▧ Assumptions
▧ User Goals
▧ Constraints
The Quadrants
User-Needs Assumptions
User-Goals Constraints
![Page 13: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/13.jpg)
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: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/14.jpg)
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: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/15.jpg)
Tom WujecWorks at AutodeskProfessor at Singularity University
![Page 17: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/17.jpg)
Whiteboarding Samples
![Page 18: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/18.jpg)
Screens - Task flow
![Page 19: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/19.jpg)
Screens - Task flow
![Page 20: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/20.jpg)
Tasks Flow
![Page 21: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/21.jpg)
Mind Maps
![Page 22: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/22.jpg)
Task Flow
![Page 23: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/23.jpg)
Wireframe
![Page 24: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/24.jpg)
Information Architecture
![Page 25: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/25.jpg)
Hands-on Activity
![Page 26: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/26.jpg)
Mr. Tom Sanders took a flight from San Francisco to New York City for a business conference.
![Page 27: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/27.jpg)
Tom booked his stay at Hotel Transnational and looking out for a taxi to reach hotel.
![Page 28: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/28.jpg)
After reaching “Hotel Transnational” in New York City...
![Page 30: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/30.jpg)
![Page 31: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/31.jpg)
▧ Which way is my room?
▧ How to get my WiFi activated?
▧ How can I go for sightseeing?
![Page 32: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/32.jpg)
How to Solve this Problem?
![Page 33: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/33.jpg)
Let’s Digitize..!
![Page 34: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/34.jpg)
Let’s design a Mobile App which can assist the guest with his stay at
the hotel?
![Page 35: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/35.jpg)
Define Quadrants
User-Needs Assumptions
User-Goals Constraints
![Page 37: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/37.jpg)
Coffee Break!
![Page 38: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/38.jpg)
“Just how do I design if not with Prototyping? An excellent question…
The short answer is ‘on paper.’
- Alan Cooper
“
![Page 39: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/39.jpg)
Paper Prototyping
![Page 40: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/40.jpg)
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: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/41.jpg)
When is it required?
Brainstorming Outline workflows
Explore/validate layouts
Show basic app structure
![Page 42: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/42.jpg)
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: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/43.jpg)
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: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/44.jpg)
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: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/45.jpg)
Paper Prototyping Samples
![Page 46: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/46.jpg)
Task Flow
![Page 47: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/47.jpg)
Task Flow
![Page 48: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/48.jpg)
Wireframe
![Page 49: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/49.jpg)
Login Screen
![Page 50: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/50.jpg)
Tab Structure
![Page 52: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/52.jpg)
Myth of Paper Prototyping
![Page 53: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/53.jpg)
“Myth #1
“I can't draw well enough to create a paper prototype.”
![Page 54: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/54.jpg)
“Myth #2
“Wireframes are the same as paper prototypes.”
![Page 55: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/55.jpg)
“Myth #3
“I can do it just as well with Visio.”
![Page 56: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/56.jpg)
“Myth #4
“Whiteboarding is just as effective.”
![Page 57: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/57.jpg)
“Myth #5
“Users behave differently with a paper prototype than with a
real system.”
![Page 58: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/58.jpg)
“Myth #6
“It looks unprofessional.”
![Page 59: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/59.jpg)
“Myth #7
“I can't prototype interactivity.”
![Page 60: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/60.jpg)
“Myth #8
I Can’t test my prototype with overseas users?”
![Page 61: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/61.jpg)
Prototyping Tools
![Page 62: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/62.jpg)
Popular toolsBenefits:
● Sketch like look● Quick & Easy to use● Lo-Fi Prototypes
![Page 63: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/63.jpg)
Popular tools
Benefits:
● Design Interactions● Hi-Fi Prototypes● Handle Virtual Data● Collaboration
![Page 64: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/64.jpg)
Popular toolsBenefits:
● Web Tool● Simple & Effective UI● Design Interactions● Collaboration● Remote User Interviews
![Page 65: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/65.jpg)
Popular tools
Benefits:
● Interactive Tool for Mobile App● Hi-Fi Prototypes● Completely Web Based● Realistic Mobile Interactions
![Page 66: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/66.jpg)
Popular tools
![Page 67: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/67.jpg)
Prototypes created using Tools
![Page 68: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/68.jpg)
Created in Axure
![Page 69: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/69.jpg)
Created in UXPIN
![Page 70: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/70.jpg)
Created in Balsamiq
![Page 71: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/71.jpg)
Wireframes
![Page 72: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/72.jpg)
Wireframe Progression
![Page 73: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/73.jpg)
Created in JsFramer
![Page 74: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/74.jpg)
Hands-on Activity
![Page 76: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/76.jpg)
Pitch Your Idea
▧ Value Proposition (Problem & Solution)
▧ Prototype Walkthrough
▧ Next Steps (Roadmap & Vision)
▧ Any Other Keypoint
![Page 77: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/77.jpg)
Any Questions?
![Page 78: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/78.jpg)
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: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/79.jpg)
Thanks!
Happy Sketching!
[email protected]@synerzip.com
Credit for template goes to www.slidescarnival.com
![Page 80: White-boarding & Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042907/587e664b1a28ab2a538b6fcd/html5/thumbnails/80.jpg)
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