2. studioXID all right reserved 2015copyright C
Tony Kim, 김수
2
• Studio XID
CEO, Captain Design
• Google
Interaction Designer
• Naver China
UX Manager
• KAIST
Industrial Design
3. studioXID all right reserved 2015copyright C
What I have done…
3
2006 2007 2008 2009 2010 2011 2012 2013 2014
Researcher Designer Captain
4. studioXID all right reserved 2015copyright C4
Original source: http://disney.wikia.com/wiki/Captain_America/Gallery
Captain Design
6. 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
7. studioXID all right reserved 2015copyright C
Comparison with other
deliverables
7 Source: http://grahamtodman.co.uk/blog/category/sketches/
Sketch
8. studioXID all right reserved 2015copyright C
Comparison with other
deliverables
8 Source: http://www.strangesystems.net/archives/2005/03/using_wireframe.php
Wireframe
9. 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
10. 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
11.
12. 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
14. 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/
15. 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/
16. 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/
17. studioXID all right reserved 2015copyright C
Everyone goes to Lean!
17
Lean Waterfall
Source: Result from 1:1 interviews on June, July in 2014
18. 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.”
19. studioXID all right reserved 2015copyright C
Deliverables at Google
19
Concept definition
Feature definition
User scenario
Wireframe
Mockup
Prototype
PM
Designer
Planner,
IxD
VisD
20. studioXID all right reserved 2015copyright C
Deliverables at Google
20
Sketch
(Lo-Fi)
Mockup
(Hi-Fi)
Prototype
(Hi-Fi)
23. studioXID all right reserved 2015copyright C
Project scope at Google
23 Source: http://wallpaperszoo.com/wp-content/uploads/2014/04/turtle-eating-strawberry.jpg
24. studioXID all right reserved 2015copyright C
Prototype at Google
• Prototype for One-bit feature
• Support Collaboration
• Communication Media
• Internal Comm.
• Feedback from customers
24
26. 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
30. studioXID all right reserved 2015copyright C
Hard to explain on 2D
30 Source: Wireframe for Naver Japanese dictionary handwriting feature
31. 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
32. studioXID all right reserved 2015copyright C
Prototyping Tools
32
Limited
Interactions
Sophisticated
Interactions
Sensor aid
Interactions
Wireframing Tool Prototyping Tool
Communication Tool
33. studioXID all right reserved 2015copyright C
Origami
33 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
34. studioXID all right reserved 2015copyright C
Framer
34 Source: http://framerjs.com/static/images/home/ss-framer.jpg
35. studioXID all right reserved 2015copyright C
Pixate
35 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
42. 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
43. 谢谢。
Tony Kim | CEO, Caption Design of Studio XID | tony.kim@studioxid.com