Prototyping for Lean UX - NEXT

  • Published on
    06-Aug-2015

  • View
    155

  • Download
    4

Embed Size (px)

Transcript

1. Studio XIDExceptionally Intelligent Design Lean Prototyping: ? Mar 26th, 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 ? 3 2006 2007 2008 2009 2010 2011 2012 2013 2014 4. studioXID all right reserved 2015copyright C4 Original source: http://disney.wikia.com/wiki/Captain_America/Gallery Captain Design 5. ? ? 6. studioXID all right reserved 2015copyright C : Lo-Fi vs. Mid-Fi vs. Hi-Fi : Static vs. Working (Interactive) : Throwaway vs. Evolutionary : Behavioral (Skin) vs. Structural (Bone) 6 7. studioXID all right reserved 2015copyright C 7 Source: http://grahamtodman.co.uk/blog/category/sketches/ (Sketch) 8. studioXID all right reserved 2015copyright C8 Source: http://www.strangesystems.net/archives/2005/03/using_wireframe.php (Wireframe) 9. studioXID all right reserved 2015copyright C9 Source: http://www.ac4d.com/2013/09/28/heartline-a-lifeline-to-your-loved-ones-storyboard/ (Storyboard) 10. studioXID all right reserved 2015copyright C10 Source: http://www.seekoften.com/portfolio/web/modern-website-mockup-in-photoshop.php (Mockup, Design) 11. studioXID all right reserved 2015copyright C : Lo-Fi vs. Mid-Fi vs. Hi-Fi : Static vs. Working (Interactive) : Throwaway vs. Evolutionary : Behavioral (Skin) vs. Structural (Bone) 12 12. ? 13. studioXID all right reserved 2015copyright C Waterfall UX 14 Source: http://upload.wikimedia.org/wikipedia/commons/b/bf/Waterfall_model_revised.svg 14. studioXID all right reserved 2015copyright C Lean UX 15 Source: http://welovelean.wordpress.com/2013/05/01/10-things-ive-learnt-about-lean-startup/ 15. studioXID all right reserved 2015copyright C Lean UX 16 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 17 Source: http://irfanebrahim.com/2014/11/02/waterfall-vs-agile-vs-lean-explained-in-1-picture/ 17. studioXID all right reserved 2015copyright C Lean ! 18 Lean Waterfall Source: Result from 1:1 interviews on June, July in 2014 18. studioXID all right reserved 2015copyright C Lean UX 19 Source: Result from 1:1 interviews on June, July in 2014 19. studioXID all right reserved 2015copyright C 20 PM Designer , UX UI 20. studioXID all right reserved 2015copyright C 21 Sketch(Lo-Fi) Mockup(Hi-Fi) Prototype(Hi-Fi) 21. studioXID all right reserved 2015copyright C 23 22. studioXID all right reserved 2015copyright C 24 Source: http://wallpaperszoo.com/wp-content/uploads/2014/04/turtle-eating-strawberry.jpg 23. studioXID all right reserved 2015copyright C , 25 24. ? 25. studioXID all right reserved 2015copyright C 27 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 26. Clear = Selling Point 27. Facebook Paper = 28. = Facebook Paper 29. studioXID all right reserved 2015copyright C 2 31 Source: Wireframe for Naver Japanese dictionary handwriting feature 30. studioXID all right reserved 2015copyright C ? ! 86% UI .* ? 32 * How designers design and program behaviours, HCII, CMU, Brad A. Myers, 2008 31. studioXID all right reserved 2015copyright C 33 32. studioXID all right reserved 2015copyright C Origami 34 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/ 33. studioXID all right reserved 2015copyright C Framer 35 Source: http://framerjs.com/static/images/home/ss-framer.jpg 34. studioXID all right reserved 2015copyright C Pixate 36 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/ 35. SNAP Close Beta: 2015 4 36. ? 37. studioXID all right reserved 2015copyright C 39 Source: http://microinteractions.com/what-is-a-microinteraction/ 38. studioXID all right reserved 2015copyright C40 Source: http://billwscott.com/share/DragAndDropModules-InterestingMoments.pdf 39. studioXID all right reserved 2015copyright C : 41 Source: http://cubic-bezier.com/ 40. 41. studioXID all right reserved 2015copyright C . . . . . Mid-Fi Hi-Fi . (, + ) 43 42. Tony Kim | CEO, Caption Design of Studio XID | tony@studioxid.com .Q & A