Working in Context: Rapid Animated Prototyping / Nir Kosover (UX Salon 2016)

Great products are all about a needed value and an appealing coherent story. We use prototypes to get a glimpse into that story, trying to bridge the context gap between ourselves and our users. Nir will present rapid animated prototyping as a way of working in context and creating those great coherent products.

Transcript

1. View Slide

2. BEFORE
   WE
   START
   

   View Slide

3. LET ME
   APOLOGIZE
   

   View Slide

4. I KNOW,
   LUNCH IS AWESOME
   

   View Slide

5. HI
   I’LL KEEP IT
   SHORT
   :)
   

   View Slide

6. 180,000
   10
   1
   Trees
   Years
   Boy
   4 Hours (avg.)
   ABOUT ME
   

   View Slide

7. WORKING IN CONTEXT
   Rapid animated prototyping
   

   View Slide

8. “
   Well, it's either a penis or a toe,
   I'm not 100% sure.
   

   View Slide

9. From Latin contextus,
   to join together, to weave;
   CONTEXTPenis / Toe ?
   “
   Well, it's either a penis or a toe,
   I'm not 100% sure.
   Dr. Grant Anderson
   

   View Slide

10. CONTEXT
    From Latin; contextus,
    to join together, to weave;
    

    View Slide

11. Culture, Gender, Hobbies, Career, demographic etc..
    BACKGROUND
    CONTEXT
    1
    

    View Slide

12. View Slide

13. View Slide

14. Whole scenario of the usage, sequence of events,
    surrounding words, spatial reference
    IMMEDIATE CONTEXT
    2
    

    View Slide

15. ?
    Eschew
    “
    For several years I was a
    heavy smoker but now that
    I have learned to Eschew
    cigarettes I feel much better.
    

    View Slide

16. For several years I was a
    heavy smoker but now that
    I have learned to Eschew
    cigarettes I feel much better.
    “
    ?
    Eschew
    = To avoid (something) especially because you do not think it is right, proper, etc.
    

    View Slide

17. What we ‘as planners’ know or think
    vs.
    what someone using the product actually know
    or how he is actually using the product
    CONTEXT GAP
    

    View Slide

18. SO, WHAT DO WE DO?
    

    View Slide

19. SO, WHAT DO WE DO?
    MVP state of mind
    Proper research
    The flow
    

    View Slide

20. A serious of screens / Prototype
    that demonstrate the product
    THE FLOW
    

    View Slide

21. Invisionapp.com
    FLOW
    

    View Slide

22. ARTBOARDS
    https://www.invisionapp.com/do/ by https://www.designernews.co/
    

    View Slide

23. Rapid Animated Prototyping
    FLOW
    

    View Slide

24. THE ESSENCE
    Defining & designing products should be flow driven
    & should include basic contextual animations
    1. Research
    2. Decide on your most common flow, and start with
    3. Use a tool that can auto-animate between screens
    4. Test as you go
    5. Iterate - learning is the key
    METHOD
    

    View Slide

25. 1. Research
    2. Decide on your most common flow, and start with it
    3. Use a tool that can auto-animate between screens *
    4. Test as you go
    5. Iterate - learning is the key
    METHOD
    * Highly recommended
    ENCE
    g & designing products should be flow driven
    hould include basic contextual animations
    

    View Slide

26. 1. Everything is a flow, a sequence
    2. Motion is the narrator, it tells the story of that sequence
    3. We can “wireframe” motion just like we wireframe design
    MOTIVATION?
    

    View Slide

27. CASE STUDY
    Let’s create a music recording app
    

    View Slide

28. THE SETTING
    Complexity / Features
    Common iPhone music apps
    

    View Slide

29. GOAL
    1. Something that we would use
    2. We have to do it fast
    3. Simplicity & Design as core values
    

    View Slide

30. VERSION
    1
    

    View Slide

31. View Slide

32. WHAT WE LEARNED
    1. You don’t really need a screen for each channel
    2. The shapes don’t make sense..
    3. Missing basic features - volume, settings
    

    View Slide

33. VERSION
    2
    

    View Slide

34. View Slide

35. WHAT WE LEARNED
    1. Channels are still a bit awkward
    2. Mute, pause /play, volume need some work
    3. Is recording next channel clear?
    

    View Slide

36. VERSION
    3
    

    View Slide

37. View Slide

38. WHAT WE LEARNED
    1. Channel behaviour - almost there
    2. Volume - yeahhh!!!
    3. Settings + load songs - Yeahhhh!!
    

    View Slide

39. It’s time for design and refinements!
    

    View Slide

40. View Slide

41. Intercom.IO
    

    View Slide

42. MVP for MVP’s
    

    View Slide

43. 1. It’s easy to consume more time with animations
    2. Tools shortcomings (Hover states, scroll, etc..)
    3. Falling in love with the animations - loose focus..
    CON’s?
    

    View Slide

44. 1. Work in context (full usage scenraio, immediate feedback loop)
    2. Test your ideas very early in the process
    3. Treat animations as an integral part of the product
    4. Get buy-in for ideas
    PRO’s?
    

    View Slide

45. CRASH COURSE
    

    View Slide

46. CRASH COURSE
    Set docu
    

    View Slide

47. Set document size
    URSE
    

    View Slide

48. MOBILE!
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. It’s gotta be
    FAST
    

    View Slide

62. less than 30 sec.
    At least a few min.
    http://blog.invisionapp.com/animating-your-ui-designs-in-keynote/
    

    View Slide

63. Andrew Haskin
    

    View Slide

64. 1. Context
    2. Bridging the context gap
    3. Full usage flows, like vertical slices, best to test assumptions
    4. Keynote crash course
    QUICK SUMMARY
    

    View Slide

65. Jam Looper
    1.0
    

    View Slide

66. Silent launch on March 1st
    3500 users
    126 states
    45% returning users
    Avg. use time of 7 min.
    Avg. of 3 channels per Jam
    

    View Slide

67. Jam
    looper
    

    View Slide

68. Thanks!
    

    View Slide

69. View Slide