reply labcamp: test before you invest, a guide to rapid prototyping (design driven development)
TRANSCRIPT
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