Lean prototyping - Talk @ Alibaba UED
Transcript of Lean prototyping - Talk @ Alibaba UED
![Page 1: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/1.jpg)
Studio XIDExceptionally Intelligent Design
Lean Prototyping: Prototyping for
Lean UX ProcessJan 23rd, Tony Kim
![Page 2: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/2.jpg)
studioXID all right reserved 2015copyright C
Tony Kim, 김수
2
• Studio XID CEO, Captain Design
• Google Interaction Designer
• Naver ChinaUX Manager
• KAISTIndustrial Design
![Page 3: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/3.jpg)
studioXID all right reserved 2015copyright C
What I have done…
3
2006 2007 2008 2009 2010 2011 2012 2013 2014
Researcher Designer Captain
![Page 4: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/4.jpg)
studioXID all right reserved 2015copyright C4
Original source: http://disney.wikia.com/wiki/Captain_America/Gallery
Captain Design
![Page 5: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/5.jpg)
Prototype
![Page 6: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/6.jpg)
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
![Page 7: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/7.jpg)
studioXID all right reserved 2015copyright C
Comparison with other deliverables
7 Source: http://grahamtodman.co.uk/blog/category/sketches/
Sketch
![Page 8: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/8.jpg)
studioXID all right reserved 2015copyright C
Comparison with other deliverables
8 Source: http://www.strangesystems.net/archives/2005/03/using_wireframe.php
Wireframe
![Page 9: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/9.jpg)
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
![Page 10: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/10.jpg)
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
![Page 11: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/11.jpg)
![Page 12: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/12.jpg)
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
![Page 13: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/13.jpg)
Welcome to Lean UX world!
![Page 14: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/14.jpg)
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/
![Page 15: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/15.jpg)
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/
![Page 16: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/16.jpg)
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/
![Page 17: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/17.jpg)
studioXID all right reserved 2015copyright C
Everyone goes to Lean!
17
Lean Waterfall
Source: Result from 1:1 interviews on June, July in 2014
![Page 18: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/18.jpg)
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.”
![Page 19: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/19.jpg)
studioXID all right reserved 2015copyright C
Deliverables at Google
19
Concept definitionFeature definition
User scenarioWireframeMockup
Prototype
PM
Designer
Planner, IxD
VisD
![Page 20: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/20.jpg)
studioXID all right reserved 2015copyright C
Deliverables at Google
20
Sketch(Lo-Fi)
Mockup(Hi-Fi)
Prototype(Hi-Fi)
![Page 21: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/21.jpg)
![Page 22: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/22.jpg)
studioXID all right reserved 2015copyright C
Deliverables at Google
22
![Page 23: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/23.jpg)
studioXID all right reserved 2015copyright C
Project scope at Google
23 Source: http://wallpaperszoo.com/wp-content/uploads/2014/04/turtle-eating-strawberry.jpg
![Page 24: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/24.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
![Page 25: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/25.jpg)
Issues on Prototyping
![Page 26: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/26.jpg)
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
![Page 27: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/27.jpg)
Clear
Interaction= Selling Point
![Page 28: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/28.jpg)
Facebook Paper
Interaction= Identity
![Page 29: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/29.jpg)
Microinteraction= Differentiation
Facebook Paper
![Page 30: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/30.jpg)
studioXID all right reserved 2015copyright C
Hard to explain on 2D
30 Source: Wireframe for Naver Japanese dictionary handwriting feature
![Page 31: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/31.jpg)
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
![Page 32: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/32.jpg)
studioXID all right reserved 2015copyright C
Prototyping Tools
32
Limited Interactions
Sophisticated Interactions
Sensor aid Interactions
Wireframing Tool Prototyping Tool
Communication Tool
![Page 33: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/33.jpg)
studioXID all right reserved 2015copyright C
Origami
33 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
![Page 34: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/34.jpg)
studioXID all right reserved 2015copyright C
Framer
34 Source: http://framerjs.com/static/images/home/ss-framer.jpg
![Page 35: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/35.jpg)
studioXID all right reserved 2015copyright C
Pixate
35 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
![Page 36: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/36.jpg)
SNAP
Closed Beta: April, 2015
![Page 37: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/37.jpg)
TIPS for Prototyping
![Page 38: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/38.jpg)
studioXID all right reserved 2015copyright C
Anatomy of Interaction
38 Source: http://microinteractions.com/what-is-a-microinteraction/
![Page 39: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/39.jpg)
studioXID all right reserved 2015copyright C39 Source: http://billwscott.com/share/DragAndDropModules-InterestingMoments.pdf
![Page 40: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/40.jpg)
studioXID all right reserved 2015copyright C
Heart of Smooth Movement: Acceleration
40 Source: http://cubic-bezier.com/
![Page 41: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/41.jpg)
Recap
![Page 42: Lean prototyping - Talk @ Alibaba UED](https://reader034.fdocuments.us/reader034/viewer/2022052317/55b6a702bb61eb23368b47ec/html5/thumbnails/42.jpg)
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