Studio XIDExceptionally Intelligent Design

Lean Prototyping: Prototyping for

Lean UX ProcessJan 23rd, Tony Kim

studioXID all right reserved 2015copyright C

Tony Kim, 김수

2

• Studio XID CEO, Captain Design

• Google Interaction Designer

• Naver ChinaUX Manager

• KAISTIndustrial Design

studioXID all right reserved 2015copyright C

What I have done…

3

2006 2007 2008 2009 2010 2011 2012 2013 2014

Researcher Designer Captain

studioXID all right reserved 2015copyright C4

Original source: http://disney.wikia.com/wiki/Captain_America/Gallery

Captain Design

Prototype

studioXID all right reserved 2015copyright C

Sort of Prototype

• Fidelity: Lo-Fi vs. Mid-Fi vs. Hi-Fi

• Working: Static vs. Working (Interactive)

• Consumption: Throwaway vs. Evolutionary

• Object: Behavioral (Skin) vs. Structural (Bone)

6

studioXID all right reserved 2015copyright C

Comparison with other deliverables

7 Source: http://grahamtodman.co.uk/blog/category/sketches/

Sketch

studioXID all right reserved 2015copyright C

Comparison with other deliverables

8 Source: http://www.strangesystems.net/archives/2005/03/using_wireframe.php

Wireframe

studioXID all right reserved 2015copyright C

Comparison with other deliverables

9 Source: http://www.ac4d.com/2013/09/28/heartline-a-lifeline-to-your-loved-ones-storyboard/

Storyboard

studioXID all right reserved 2015copyright C

Comparison with other deliverables

10 Source: http://www.seekoften.com/portfolio/web/modern-website-mockup-in-photoshop.php

Mockup, Design

studioXID all right reserved 2015copyright C

Prototype on UX process

• Fidelity: Lo-Fi vs. Mid-Fi vs. Hi-Fi

• Working: Static vs. Working (Interactive)

• Consumption: Throwaway vs. Evolutionary

• Object: Behavioral (Skin) vs. Structural (Bone)

12

Welcome to Lean UX world!

studioXID all right reserved 2015copyright C

Lean UX Process

14 Source: http://welovelean.wordpress.com/2013/05/01/10-things-ive-learnt-about-lean-startup/

studioXID all right reserved 2015copyright C

Lean UX Process

15 Source: http://www.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/

studioXID all right reserved 2015copyright C

Lean vs. Waterfall

16 Source: http://irfanebrahim.com/2014/11/02/waterfall-vs-agile-vs-lean-explained-in-1-picture/

studioXID all right reserved 2015copyright C

Everyone goes to Lean!

17

Lean Waterfall

Source: Result from 1:1 interviews on June, July in 2014

studioXID all right reserved 2015copyright C

Deliverable on Lean UX

18 Source: Result from 1:1 interviews on June, July in 2014

“We don’t make wireframes at all.”

studioXID all right reserved 2015copyright C

Deliverables at Google

19

Concept definitionFeature definition

User scenarioWireframeMockup

Prototype

PM

Designer

Planner, IxD

VisD

studioXID all right reserved 2015copyright C

Deliverables at Google

20

Sketch(Lo-Fi)

Mockup(Hi-Fi)

Prototype(Hi-Fi)

studioXID all right reserved 2015copyright C

Deliverables at Google

22

studioXID all right reserved 2015copyright C

Project scope at Google

23 Source: http://wallpaperszoo.com/wp-content/uploads/2014/04/turtle-eating-strawberry.jpg

studioXID all right reserved 2015copyright C

Prototype at Google

• Prototype for One-bit feature

• Support Collaboration

• Communication Media

• Internal Comm.

• Feedback from customers

24

Issues on Prototyping

studioXID all right reserved 2015copyright C

Design Paradigm shifts…

26

Page base Interaction

Object base Interaction

Sensor aid Interaction

• By Apple • Page transition • Page level hierarchy

• By Google • Layer concept • Z-index

• By Facebook • Contextual input • Sensor signal

Clear

Interaction= Selling Point

Facebook Paper

Interaction= Identity

Microinteraction= Differentiation

Facebook Paper

studioXID all right reserved 2015copyright C

Hard to explain on 2D

30 Source: Wireframe for Naver Japanese dictionary handwriting feature

studioXID all right reserved 2015copyright C

Any Solution? Prototype!

• “86% of designers feel it is more difficult to design interaction than user interface.”*

• Any Tools?

31 * How designers design and program behaviours, HCII, CMU, Brad A. Myers, 2008

studioXID all right reserved 2015copyright C

Prototyping Tools

32

Limited Interactions

Sophisticated Interactions

Sensor aid Interactions

Wireframing Tool Prototyping Tool

Communication Tool

studioXID all right reserved 2015copyright C

Origami

33 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/

studioXID all right reserved 2015copyright C

Framer

34 Source: http://framerjs.com/static/images/home/ss-framer.jpg

studioXID all right reserved 2015copyright C

Pixate

35 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/

SNAP

Closed Beta: April, 2015

TIPS for Prototyping

studioXID all right reserved 2015copyright C

Anatomy of Interaction

38 Source: http://microinteractions.com/what-is-a-microinteraction/

studioXID all right reserved 2015copyright C39 Source: http://billwscott.com/share/DragAndDropModules-InterestingMoments.pdf

studioXID all right reserved 2015copyright C

Heart of Smooth Movement: Acceleration

40 Source: http://cubic-bezier.com/

Recap

studioXID all right reserved 2015copyright C

How to do Lean Prototyping• One-bite project

• Forget documentation. Draw it. Make it.

• Prototype by yourself, then Share with others.

• Start roughly, then Do more iterations until Perfect.

• Choose a tool, which support Mid-Fi & Hi-Fi. (or, 1 Graphic tool + 1 Prototyping tool)

• Anatomy of Interaction

42

谢谢。

Tony Kim | CEO, Caption Design of Studio XID | tony.kim@studioxid.com