Lean prototyping - Talk @ Alibaba UED

  • Published on
    28-Jul-2015

  • View
    349

  • Download
    3

Transcript

1. Studio XIDExceptionally Intelligent Design Lean Prototyping: Prototyping for Lean UX Process Jan 23rd, Tony Kim 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 5. Prototype 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. 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 12. Welcome to Lean UX world! 13. 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/ 14. 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/ 15. 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/ 16. studioXID all right reserved 2015copyright C Everyone goes to Lean! 17 Lean Waterfall Source: Result from 1:1 interviews on June, July in 2014 17. studioXID all right reserved 2015copyright C Deliverable on Lean UX 18 Source: Result from 1:1 interviews on June, July in 2014 We dont make wireframes at all. 18. studioXID all right reserved 2015copyright C Deliverables at Google 19 Concept denitionFeature denitionUser scenarioWireframeMockupPrototype PM Designer Planner, IxD VisD 19. studioXID all right reserved 2015copyright C Deliverables at Google 20 Sketch(Lo-Fi) Mockup(Hi-Fi) Prototype(Hi-Fi) 20. studioXID all right reserved 2015copyright C Deliverables at Google 22 21. studioXID all right reserved 2015copyright C Project scope at Google 23 Source: http://wallpaperszoo.com/wp-content/uploads/2014/04/turtle-eating-strawberry.jpg 22. studioXID all right reserved 2015copyright C Prototype at Google Prototype for One-bit feature Support Collaboration Communication Media Internal Comm. Feedback from customers 24 23. Issues on Prototyping 24. 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 25. Clear Interaction= Selling Point 26. Facebook Paper Interaction= Identity 27. Microinteraction= Dierentiation Facebook Paper 28. studioXID all right reserved 2015copyright C Hard to explain on 2D 30 Source: Wireframe for Naver Japanese dictionary handwriting feature 29. studioXID all right reserved 2015copyright C Any Solution? Prototype! 86% of designers feel it is more dicult to design interaction than user interface.* Any Tools? 31 * How designers design and program behaviours, HCII, CMU, Brad A. Myers, 2008 30. studioXID all right reserved 2015copyright C Prototyping Tools 32 Limited Interactions Sophisticated Interactions Sensor aid Interactions Wireframing Tool Prototyping Tool Communication Tool 31. studioXID all right reserved 2015copyright C Origami 33 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/ 32. studioXID all right reserved 2015copyright C Framer 34 Source: http://framerjs.com/static/images/home/ss-framer.jpg 33. studioXID all right reserved 2015copyright C Pixate 35 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/ 34. SNAP Closed Beta: April, 2015 35. TIPS for Prototyping 36. studioXID all right reserved 2015copyright C Anatomy of Interaction 38 Source: http://microinteractions.com/what-is-a-microinteraction/ 37. studioXID all right reserved 2015copyright C39 Source: http://billwscott.com/share/DragAndDropModules-InterestingMoments.pdf 38. studioXID all right reserved 2015copyright C Heart of Smooth Movement: Acceleration 40 Source: http://cubic-bezier.com/ 39. Recap 40. 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 41. Tony Kim | CEO, Caption Design of Studio XID | tony.kim@studioxid.com