Organised and presented an introductory labcamp in the process of fast prototyping for mobile app development - outlining user needs, exploring layouts for necessary content, applying common user interface patterns, considering functionalities, features and validating designs. Devised hands-on group activity; using pen, paper and Marvel App to rapidly sketch and manipulate concepts for a mobile eCommerce fashion product detail page to test.

1. Jay Suthar
j.suthar@replyltd.co.uk
Designer, Open Reply
Dylan Lewis
d.lewis@replyltd.co.uk
iOS Developer, Open Reply

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

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

4. 1. What’s a Prototype?

5. 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

6. What’s a Prototype?
Three Dimensions:
1. Scope (Distinct aspect → Entire Product/Service)
2. Form (Abstract → Tangible)
3. Fidelity (Rough → Exact)

7. 2. Value of Prototyping

8. Value of Prototyping
1. Prototyping Is Generative
Evolve character silhouettes, Scott Flanders

9. Value of Prototyping
2. Communication & Collaboration (Reduces Misinterpretation)
Project Management Tree Swing Cartoon

10. Value of Prototyping
3. Check Feasibility + Reducing Waste
Dilbert, Scott Adams

11. Value of Prototyping
4. Test Usability Earlier

12. Why Prototyping Is
Mandatory for Mobile
Rachel Hinman, the Nokia Research Center’s Senior UX Researcher

13. 3. Types of Prototypes

14. LO-FIDELITY HI-FIDELITY
Quick
Simple
Rough estimate
Slower
Detailed
Tangible
Range of Prototypes

15. 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

16. Paper Sketches
Wireframes / Mockups
Interactive Demos
Dynamic Demos
FIDELITY
TIME

17. Principles
1. 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

18. Examples

19. Tablet Native Application (Lo - Mid)

20. Homepage Kids Landing Page → Kids Category Listing
Parallax Idea 1 Idea 2 Idea 3
Adaptive Web Mobile Pages (Mid - Hi)

21. Pull down Overlay Reachability Extra controls
iOS App - Flight Search (Mid - Hi)

22. 4. How to Prototype

23. Determine Needs
BuildEvaluate
Good
Bad
Missing
New ideas generated?

24. Navigation Controller Hamburger Menu
< Back Title
Section 1
Section 2
Section 3
Section 4
Section 5
Action Bar Navigation Drawer
Mobile Guidelines

25. Tab 1 Tab 2 Tab 3 Tab 4 Tab 5
View One View Two
Segmented Control
Navigation Tabs
Tab Bar
Mobile Guidelines

26. < 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

27. < Back Title < Back Title < Back Title
CloseTitlePush Modal
Transition Guidelines

28. 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

29. 5. Workshop: Paper
creativebloq: How to prototype websites on paper

31. 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

32. Personas
Working mom, financially responsible
August
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
May
Shopper, 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

33. 5. Workshop: Paper
creativebloq: How to prototype websites on paper

34. Workshop: Get Feedback

35. Workshop: Marvel App

36. Conclude / Q&A