Reply Labcamp: Test before you Invest, A Guide to Rapid Prototyping (Design Driven Development)

Jay Suthar [email protected]

Designer, Open Reply

Dylan Lewis [email protected]

iOS Developer, Open Reply

Introductions

Who you are? What you do? What are you working on? What you hope to take away from today?

Rapid Prototyping

1. What’s a Prototype? 2. Value of Prototyping 3. Types of Prototypes 4. How to Prototype 5. Workshop - Sketching + Marvel App

1. What’s a Prototype?

What’s a Prototype?“An approximation of a product (or system) or its components, in some form, for a definite purpose in its implementation”

Chua, Leong & Lim, Rapid Prototyping: Principles and Applications

“A visualisation of the requirements”

Arnowitz

“A prototype is a representative model or simulation of the final system. Unlike requirements documents and wireframes, prototypes go further than show and tell and actually let you experience the design.” Todd Zaki Warfel, Prototyping: A Practitioner's Guide

What’s a Prototype?Three Dimensions:

1. Scope (Distinct aspect → Entire Product/Service) 2. Form (Abstract → Tangible) 3. Fidelity (Rough → Exact)

2. Value of Prototyping

Value of Prototyping

1. Prototyping Is Generative

Evolve character silhouettes, Scott Flanders

Value of Prototyping

2. Communication & Collaboration (Reduces Misinterpretation)

Project Management Tree Swing Cartoon

Value of Prototyping

3. Check Feasibility + Reducing Waste

Dilbert, Scott Adams

Value of Prototyping

4. Test Usability Earlier

Why Prototyping Is Mandatory for Mobile

Rachel Hinman, the Nokia Research Center’s Senior UX Researcher

3. Types of Prototypes

LO-FIDELITY HI-FIDELITY

Quick

Simple

Rough estimate

Slower

Detailed

Tangible

Range of Prototypes

LO-FIDELITY HI-FIDELITY

Quick

Simple

Rough estimate

Slower

Detailed

Tangible

Range of Prototypes

Post-It Notes

Paper Sketches Interactive Demos Dynamic Demos

Paper

Marvel

Origami

Xcode

Adobe Muse

Initial Designs

Validate

Interactive

Tangible

Dynamic Content

HTML

Wireframes / Mockups

Plot Flow

Powerpoint

Keynote

Simulate

InVision

TYPE

AIMS

TOOLS

Paper Sketches

Wireframes / Mockups

Interactive Demos

Dynamic Demos

FIDELITY

TIME

Principles1. Know your audience and your goals

2. Involve the users (participatory design)

3. Focus on flows, interactions & user scenarios

4. You can sketch (it's a prototype - fake it)

5. Use prototypes for usability tests - reduce risk

6. Prototype only what you need – then stop

Examples

Tablet Native Application (Lo - Mid)

Homepage Kids Landing Page → Kids Category Listing

Parallax Idea 1 Idea 2 Idea 3

Adaptive Web Mobile Pages (Mid - Hi)

Pull down Overlay Reachability Extra controls

iOS App - Flight Search (Mid - Hi)

4. How to Prototype

Determine Needs

BuildEvaluate

GoodBad

Missing

New ideas generated?

Navigation Controller Hamburger Menu

< Back Title

Section 1

Section 2

Section 3

Section 4

Section 5

Action Bar Navigation Drawer

Mobile Guidelines

Tab 1 Tab 2 Tab 3 Tab 4 Tab 5

View One View Two

Segmented Control

Navigation Tabs

Tab Bar

Mobile Guidelines

< Back Title

Tab 1 Tab 2 Tab 3 Tab 4 Tab 5

iOS Android

< Title

View One View TwoSection 1

Section 2

Section 3

Section 4

Section 5

Platform Guidelines

< Back Title < Back Title < Back Title

CloseTitlePush Modal

Transition Guidelines

Gestures

Tab Double Tab Touch&hold Horizontal scroll Vertical scroll

2x Tab 2x Double Tab 2x Flick Right 2x Flick Left 2x Room In

Spread Rotate Drag 3x Tab Camera

5. Workshop: Paper

creativebloq: How to prototype websites on paper

Make a great mobile ecom fashion product page• What is the product, what does it do. • Product Image / Video • Image Gallery • Primary CTA: Buy button, Secondary CTAs: Add to Wish List, Social Share, In

Store Collect, Email, Email me when in-stock • Product/tech specifications • Reviews • Video review (depends on the product) • Product rating • User reviews (if possible) • Pricing with discount • What does the buyer get? - product + accessories • Packing, warranty, shipping and return details. • Limited stock • Breadcrumb navigation

PersonasWorking mom, financially responsibleAugust

iOS, iPhone 5s

Business Project Manager

Tech Novice, simplicity

Never! Too busy

August is May’s mom, 43 years-old. She works as a business project manager. She is focused, goal-oriented within a strong leadership role. Very professional. One of her concerns is maintaining quality across all output of programs. Loves traveling and exploring in her spare time.

Job situation

Mobile device

Mobile skills

Social meda

Motivations 1 Professional style

Motivations 2 Track delivery

Goal Stress free, shopping experience

Context of use Mobile, Tablet

Search terms Track delivery, Work outfits for work

MayShopper, stylist

Job situation

Mobile device

Mobile skills

Social meda

Student, Mathematics

Formerly iOS, now Android, Nexus 7

Tech savvy, expert

Avid user of Twitter, FB, Vine

Amanda is a 19 year-old teenager who is tech-savvy and loves shopping for clothes. She reads leading fashion magazines and enjoys choosing her own outfits. Enjoys variety and is most social on weekends. Has part-time job and a bank account.

Motivations 1 Stay trendy, new outfit each month

Motivations 2 New ranges coming soon

Goal Kept in loop about latest ranges

Context of use Mobile

Search terms New lines, latest styles

5. Workshop: Paper

creativebloq: How to prototype websites on paper

Workshop: Get Feedback

Workshop: Marvel App

Conclude / Q&A