white-boarding & paper prototyping

“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

Task Flow

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

Wireframe Prototyping

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!

achin.simhal@synerzip.comvishal.chauhan@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