Embed Size (px)
Citation preview
“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
“
Whiteboarding & Paper Prototyping
Agenda
▧ Why it’s Important?
▧ Whiteboarding What is Whiteboarding? Significance of Whiteboarding? How we do it? The Framework
- Quadrants - Experience Samples Hands-on activity
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
Why it’s important?
Why it’s Important?
▧ Early Customer Feedback
▧ Validate Business Hypothesis
▧ Save wastage in MVP Development
Whiteboarding
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
Significance of Whiteboarding
▧ Highly Interactive
▧ Easy & Really Fast
▧ Low Cost
▧ Baseline for Prototype
How we do it?
Sketch
Think
Collaborate
brainstorm
evolve
communicate
The Framework
There are two parts to this framework
▧ The Quadrants
▧ Tasks Flow
Draw four quadrants on the whiteboard first
▧ User Needs
▧ Assumptions
▧ User Goals
▧ Constraints
The Quadrants
User-Needs Assumptions
User-Goals Constraints
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
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
Tom WujecWorks at AutodeskProfessor at Singularity University
Whiteboarding Samples
Screens - Task flow
Screens - Task flow
Tasks Flow
Mind Maps
Task Flow
Wireframe
Information Architecture
Hands-on Activity
Mr. Tom Sanders took a flight from San Francisco to New York City for a business conference.
Tom booked his stay at Hotel Transnational and looking out for a taxi to reach hotel.
After reaching “Hotel Transnational” in New York City...
▧ Which way is my room?
▧ How to get my WiFi activated?
▧ How can I go for sightseeing?
How to Solve this Problem?
Let’s Digitize..!
Let’s design a Mobile App which can assist the guest with his stay at
the hotel?
Define Quadrants
User-Needs Assumptions
User-Goals Constraints
Coffee Break!
“Just how do I design if not with Prototyping? An excellent question…
The short answer is ‘on paper.’
- Alan Cooper
“
Paper Prototyping
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
When is it required?
Brainstorming Outline workflows
Explore/validate layouts
Show basic app structure
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
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
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
Paper Prototyping Samples
Task Flow
Task Flow
Wireframe
Login Screen
Tab Structure
Myth of Paper Prototyping
“Myth #1
“I can't draw well enough to create a paper prototype.”
“Myth #2
“Wireframes are the same as paper prototypes.”
“Myth #3
“I can do it just as well with Visio.”
“Myth #4
“Whiteboarding is just as effective.”
“Myth #5
“Users behave differently with a paper prototype than with a
real system.”
“Myth #6
“It looks unprofessional.”
“Myth #7
“I can't prototype interactivity.”
“Myth #8
I Can’t test my prototype with overseas users?”
Prototyping Tools
Popular toolsBenefits:
● Sketch like look● Quick & Easy to use● Lo-Fi Prototypes
Popular tools
Benefits:
● Design Interactions● Hi-Fi Prototypes● Handle Virtual Data● Collaboration
Popular toolsBenefits:
● Web Tool● Simple & Effective UI● Design Interactions● Collaboration● Remote User Interviews
Popular tools
Benefits:
● Interactive Tool for Mobile App● Hi-Fi Prototypes● Completely Web Based● Realistic Mobile Interactions
Popular tools
Prototypes created using Tools
Created in Axure
Created in UXPIN
Created in Balsamiq
Wireframes
Wireframe Progression
Created in JsFramer
Hands-on Activity
Pitch Your Idea
▧ Value Proposition (Problem & Solution)
▧ Prototype Walkthrough
▧ Next Steps (Roadmap & Vision)
▧ Any Other Keypoint
Any Questions?
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
Thanks!
Happy Sketching!
[email protected]@synerzip.com
Credit for template goes to www.slidescarnival.com
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
