Lean prototyping - Talk @ Alibaba UED

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


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


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


Comparison with other deliverables

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

Sketch



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

Wireframe



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

Storyboard



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

Mockup, Design


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!


Lean UX Process

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


Lean UX Process

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


Lean vs. Waterfall

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


Everyone goes to Lean!

17

Lean Waterfall

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


Deliverable on Lean UX

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

“We don’t make wireframes at all.”


Deliverables at Google

19

Concept definitionFeature definition

User scenarioWireframeMockup

Prototype

PM

Designer

Planner, IxD

VisD



20

Sketch(Lo-Fi)

Mockup(Hi-Fi)

Prototype(Hi-Fi)



22


Project scope at Google

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


Prototype at Google

• Prototype for One-bit feature

• Support Collaboration

• Communication Media

• Internal Comm.

• Feedback from customers

24

Issues on Prototyping


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


Hard to explain on 2D

30 Source: Wireframe for Naver Japanese dictionary handwriting feature


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


Prototyping Tools

32

Limited Interactions

Sophisticated Interactions

Sensor aid Interactions

Wireframing Tool Prototyping Tool

Communication Tool


Origami

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


Framer

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


Pixate

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

SNAP

Closed Beta: April, 2015

TIPS for Prototyping


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


Heart of Smooth Movement: Acceleration

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

Recap


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 | [email protected]

Internet

Lean prototyping - Talk @ Alibaba UED