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

2. BEFORE WE START
3. LET ME APOLOGIZE
4. I KNOW, LUNCH IS AWESOME
5. HI I’LL KEEP IT SHORT :)
6. 180,000 10 1 Trees Years Boy 4 Hours (avg.) ABOUT ME
7. WORKING IN CONTEXT Rapid animated prototyping
8. “ Well, it's either a penis or a toe, I'm not 100% sure.
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
10. CONTEXT From Latin; contextus, to join together, to weave;
11. Culture, Gender, Hobbies, Career, demographic etc.. BACKGROUND CONTEXT 1
14. Whole scenario of the usage, sequence of events, surrounding words, spatial reference IMMEDIATE CONTEXT 2
15. ? Eschew “ For several years I was a heavy smoker but now that I have learned to Eschew cigarettes I feel much better.
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.
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
18. SO, WHAT DO WE DO?
19. SO, WHAT DO WE DO? MVP state of mind Proper research The flow
20. A serious of screens / Prototype that demonstrate the product THE FLOW
21. Invisionapp.com FLOW
22. ARTBOARDS https://www.invisionapp.com/do/ by https://www.designernews.co/
23. Rapid Animated Prototyping FLOW
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
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
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?
27. CASE STUDY Let’s create a music recording app
28. THE SETTING Complexity / Features Common iPhone music apps
29. GOAL 1. Something that we would use 2. We have to do it fast 3. Simplicity & Design as core values
30. VERSION 1
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
33. VERSION 2
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?
36. VERSION 3
38. WHAT WE LEARNED 1. Channel behaviour - almost there 2. Volume - yeahhh!!! 3. Settings + load songs - Yeahhhh!!
39. It’s time for design and refinements!
41. Intercom.IO
42. MVP for MVP’s
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?
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?
45. CRASH COURSE
46. CRASH COURSE Set docu
47. Set document size URSE
48. MOBILE!
61. It’s gotta be FAST
62. less than 30 sec. At least a few min. http://blog.invisionapp.com/animating-your-ui-designs-in-keynote/
63. Andrew Haskin
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
65. Jam Looper 1.0
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
67. Jam looper
68. Thanks!