prototype jujutsu - prototyping mobile apps without coding

61
Mobile Prototyping Jujutsu (Prototyping mobile apps without code) Pek Pongpaet

Upload: pek-pongpaet

Post on 16-Apr-2017

6.384 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Mobile Prototyping Jujutsu(Prototyping mobile apps without code)

Pek Pongpaet

Page 2: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Outline1. Intro

2. Why?

3. Tools & Techniques

4. Demo

Page 3: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

@pekpongpaetPek Pongpaet

Page 4: Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Page 5: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Best Entertainment AppiPadDevCamp Hackathon

Chicago, May 2010

Page 6: Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Page 7: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Write about UX

“...your article has been our most popular article on the

site since it ran.”-Tiffany Hampton, UX Mag

Page 8: Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Page 9: Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Page 10: Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Page 11: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

6 Mortal Kombat Games

Page 12: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

The Talk

Page 13: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

What I’m talking about

Page 14: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

http://fldt.st/13zlx82

Page 15: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Why???

Page 16: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

NOBODY READS THESE

Page 17: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

hard to imagine

Page 18: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Wireframes generally useless in getting feedback

Page 19: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Prototypes can be

Page 20: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Cheap

Page 21: Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Page 22: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Fast

Page 23: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

No Hold Ups

Page 24: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Unveil Usability Problems

Page 25: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Original Design

Hands Need to Move to Reach Far

impossible to reachwithout

lifting hand

Page 26: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

New Design

Everything is within reach

Page 27: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Uncover Problems Earlier

Page 28: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

design looks fine

Page 29: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

but in normal usage, content is obscured by hand

Page 30: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Especially importantif n00b to mobile

Page 31: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Typical WorkflowRequirements Gathering

Proposal

Design

Develop

Deliver

Not quite what they want

Reiterate

Page 32: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

New Workflow

Requirements Gathering

Proposal Prototype

Client Feedback

Pixel Perfect Prototype

Hand-off to dev team

Page 33: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Pixel Perfect Prototypes?

Page 34: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

It feels real

Page 35: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Woah, that’s deep

Page 36: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Ressan Numba One:

Poor Man’s Prototype

Page 37: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Photos is Your Friend

http://www.flickr.com/photos/53225371@N05/5972087523/

Page 38: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Regular Notebooks

Page 39: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Step 1: Draw

Page 40: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Step 2: Take Picture

Page 41: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Step 3: Enjoy

Page 42: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Works for Phone Apps Too

Page 43: Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Page 44: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Ressan Numba Two:

Weapons

Page 45: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Balsamiq

Page 46: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Mockingbird

Page 47: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Konigi Wireframe Stencils

Page 48: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Keynotopia

Page 49: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Photoshop Templates

Page 50: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Invision

Page 51: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

FieldTest

Page 52: Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Page 53: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Ressan Numba Tree:Edge Cases

Page 54: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

Error States

Page 55: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

No internet

Page 56: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

No GPS

Page 57: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

OK, I’m ready to kick some ass

Page 58: Prototype Jujutsu - Prototyping Mobile Apps Without Coding
Page 59: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

http://fldt.st/1ub5jt

Page 60: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

follow me on twitter

@pekpongpaet

Page 61: Prototype Jujutsu - Prototyping Mobile Apps Without Coding

For more reading on designhttp://shelfluv.com/pekpongpaet/design