lean prototyping: prototyping for lean process

We build a network of techie startups And build for forward-looking products

Lean Prototyping: Prototyping for Lean Process

Nov 27, Tony Kim

1

Tony Kim, 김수

• FuturePlay – Inventor in Residence

• Google – Interaction Designer

• Naver China – UX Manager

• KAIST – Industrial Design

2

뭘 했나요?

3

2006 2007 2008 2009 2010 2011 2012 2013 2014

연구원 디자이너 발명가?

프로토타입을 왜 만들어야할까?

어떻게 만들어야할까?

프로토타입의 종류

• 시각적 완성도에 따른 구분: Lo-Fi vs. Mid-Fi vs. Hi-Fi

• 작동 여부에 따른 구분: Static vs. Working (Interactive)

• 사용기간에 따른 구분: Throwaway vs. Evolutionary

• 구현 대상에 따른 구분: Behavioral(Skin) vs. Structural(Bone)

5

다른 디자인 산출물과의 비교

6

스케치(Sketch) Source: http://grahamtodman.co.uk/blog/category/sketches/

7

다른 디자인 산출물과의 비교

화면설계(Wireframe) Source: http://www.strangesystems.net/archives/2005/03/using_wireframe.php

8

다른 디자인 산출물과의 비교

스토리보드 (Storyboard) Source: http://www.ac4d.com/2013/09/28/heartline-a-lifeline-to-your-loved-ones-storyboard/

9

다른 디자인 산출물과의 비교

목업, 디자인 (Mockup, Design) Source: http://www.seekoften.com/portfolio/web/modern-website-mockup-in-photoshop.php

디자인 프로세스에서 협의의 프로토타입

10

디자인 프로세스에서 협의의 프로토타입

• 시각적 완성도에 따른 구분: Lo-Fi vs. Mid-Fi vs. Hi-Fi

• 작동 여부에 따른 구분: Static vs. Working (Interactive)

• 사용기간에 따른 구분: Throwaway vs. Evolutionary

• 구현 대상에 따른 구분: Behavioral(Skin) vs. Structural(Bone)

11

Welcome to Lean/Agile World!

우리는 모두 Agile/Lean으로 간다!

13

Agile Waterfall

* 해당 기업의 디자이너, 기획자 35명 인터뷰를 통한 상대적인 결과임

Lean UX Process에서 디자인 산출물

14

“화면설계는 하지 않습니다.”

Lean UX Process에서 디자인 산출물

15

• 문서작업은 최소화, 바로 디자인

• 팀원들이 함께 디자인

• 계속되는 수정작업

Google의 디자인 프로세스: 팀 구성

16

1 PM

1 Designer

1 Researcher

1 Tech Lead

6 Engineers

1 PM

1 Designer

1 Tech Lead

2 Engineers

Google의 디자인 프로세스: 팀 구성

17

PM

Designer

제품컨셉정의

기능정의

사용자 시나리오

화면설계

화면 디자인

프로토타입

기획자, UX

디자이너

18

Google의 디자인 프로세스: 프로젝트 규모

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

Google의 디자인 프로세스: 프로젝트 규모

19

• One-bite feature only

• 대신 빠르게, 완벽하게

• 글로벌 대상 서비스 (경우에 따라 순차적으로)

Google의 디자인 프로세스: 산출물

20

스케치 (Lo-Fi)

목업 (Hi-Fi)

프로토타입 (Hi-Fi)

21

Google의 디자인 프로세스: 산출물

22

Google의 디자인 프로세스: 산출물

Lean UX Process에서 Prototype

• One-bite feature에 대한 Prototype

• 협업을 지원

• 프로토타입은 커뮤니케이션 툴: 내부 협업/보고 & 고객으로부터

의 피드백

• MVP로써의 Prototype

23

MVP vs. Prototype

24

“The MVP is that version of a new product which allows a team to collect maximum amount of

validated learning about customers with the least effort”

“MVP는 팀이 최소한의 노력으로 고객에 대한 학습을 최대화할 수 있는 제품의 버전”

Eric Ries

“An MVP is not a minimal product, it is strategy and process directed toward making and selling a

product to customers. It is an iterative process of idea generation, prototyping, presentation, data

collection, analysis, and learning.”

“MVP는 최소화된 제품이 아니라 고객을 위한 제품을 만들고 고객에게 판매하기 위한 전략 및 프로세스이다. 여

기에는 아이디어, 프로토타이핑, 프리젠테이션, 데이터 수집, 분석, 학습이 포함되며 반복적인 프로세스이다.”

Jon Radoff

MVP vs. Prototype

25

MVP Prototype •  제품의 디자인/기능의 전체 혹

은 일부를 실제와 같이 구현

•  고객 혹은 팀원으로부터 피드

백을 얻음

•  제품의 가치를 학습하기

위한 모든 활동

•  고객으로부터 피드백을

얻음

Dropbox MVP

26

Lean UX 적용을 위한 당면 과제

문제는 디자인의 패러다임이 변하고 있다는 점…

28

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

인터랙션 = 세일즈 포인트

29

Clear

인터랙션 = 아이덴티티

30

Facebook Paper

Microinteractions

31

* Source: http://upload.wikimedia.org/wikipedia/commons/1/13/Facebook_like_thumb.png

2차원 평면에서는 표현하기 어려움

32

2차원 평면에서는 표현하기 어려움

33

해답은 Working Prototype뿐인가?

34

• 움직이는 것은 움직임을 보여주어야

• 하지만, 86% 디자이너는 움직임을 설계하는데 어려움을 느낌*

• 그렇다면 멋진 툴이 없을까?

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

프로토타이핑툴

35

Communication tool

Wireframing tool Prototyping tool

제한적인 인터랙션 지원

정교한 인터랙션 설계 가능

센서 기반 프로토타이핑

Origami (facebook.github.io/origami/)

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

Framer (framerjs.com)

37

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

Pixate (pixate.com)

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

SNAP (snap.so)

39

Private Beta Early Jan, 2015

정교한 프로토타이핑

인터랙션의 해부

41

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

인터랙션의 해부

42

* Based on Bill Scott’s “Trigger > Operation > Update” model

Trigger Object Response

인터랙션의 해부

43

인터랙션의 해부

44

* Source: http://cdn.iphonehacks.com/wp-content/uploads/2013/12/google-search-app.jpg

개인정보&메뉴

컬러로고

검색창

마이크 버튼

나우 카드1

배경

검색창

나우 카드1

나우 카드2

흰색로고

상태바

Trigger: 스와입 Object: 나우카드 1 Response: 위로 이동 Trigger: 위와 함께 Object: 마이크버튼 Response: 투명도 변경 Trigger: 위와 함께 Object: 검색창 Response: 위로 이동

.

.

.

부드러운 움직임의 핵심은 가속도

45 * Source: http://cubic-bezier.com/#.66,.3,.3,.8

정리하면…

Recap: How to do Lean Prototyping

• 필요한 수준을 미리 정의할 것, (단, 움직이는 건 움직이도록 만들 것)

• 문서 작성은 잊어버릴 것, 일단 그려보고 만들어볼 것

• 한사람이 만들어서 공유할 것

• 정교하게, 무한 반복

• 하나의 툴로 Mid-Fi, Hi-Fi를 할 수 있는 툴을 선택할 것

(혹은 그래픽툴 1 + 프로토타이핑툴 1)

• 인터랙션의 분해! 분해! 분해!

47

Thank you

Contact Tony Kim 김수

Inventor in Residence | Interaction Designer

tony.kim@futureplay.co