Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.


Storyboarding Slide 1 Storyboarding Slide 2 Storyboarding Slide 3 Storyboarding Slide 4 Storyboarding Slide 5 Storyboarding Slide 6 Storyboarding Slide 7 Storyboarding Slide 8 Storyboarding Slide 9 Storyboarding Slide 10 Storyboarding Slide 11 Storyboarding Slide 12 Storyboarding Slide 13 Storyboarding Slide 14 Storyboarding Slide 15 Storyboarding Slide 16 Storyboarding Slide 17 Storyboarding Slide 18 Storyboarding Slide 19 Storyboarding Slide 20 Storyboarding Slide 21 Storyboarding Slide 22 Storyboarding Slide 23 Storyboarding Slide 24 Storyboarding Slide 25 Storyboarding Slide 26 Storyboarding Slide 27 Storyboarding Slide 28 Storyboarding Slide 29 Storyboarding Slide 30 Storyboarding Slide 31
Upcoming SlideShare
What to Upload to SlideShare




Ario Jafarzadeh and Prarthana Johnson pair up to teach a class in sketching and storyboarding for interaction on March 20 2013 at MakerHaus.

Related Books

Free with a 30 day trial from Scribd

See all


  1. 1. and the various techniques to illustrate the interaction STORYBOARDING Presented By: Prarthana Panchal and informed by Jon Mann.
  2. 2. INTRODUCTION Concept Experience Design • Design • Develop compelling user experiences for hardware, software and services • Align • Work closely with Innovation Marketing and Product Development • Pitch • Create a synergistic vision and sell the product feasibility viability desirability HOME WEB MOBILE SERVICES
  3. 3. INTRODUCTION Moving from Synthesis to Ideation • Synthesize insights into solutions • Address market and user needs • Brainstorm ideas/concepts/features • Define your user(s) • Define user experience and interaction models
  4. 4. DEFINE YOUR DESIGN DEFINING YOUR PRODUCT The What, Why, Who, When and Where of it all
  5. 5. DEFINE YOUR DESIGN The What…A Mobile Experience • Always on, always on us • Linked to the cloud • Socially enabled • Shared (hand off your phone) • Sixth sense (and more coming) • Microphone, speaker, camera, gps accelerometer, compass, ambient light
  6. 6. DEFINE YOUR DESIGN Designing For Mobile • Optimized, quick, accessible, intelligent • Leverage prediction and probability to narrow down options (ambient awareness) • Multi-modal input: touch, keys, voice, gestures • Snack sized, not a buffet • Quick access window into a larger ecosystem • Context of use
  7. 7. DEFINE YOUR DESIGN The Why What is the Customer Value Proposition? • Why would they use it, what do they get? • What is the promise • Appeal to a core need What is the benefit to the company? • Does it align with a larger strategy • How do you differentiate • Does the company have credibility
  8. 8. DEFINE YOUR DESIGN Make Mantra Make Mantra * • What is the essence of your product • Bring clarity and simplicity to your goals • Your mantra is the compass (and filter) to direct your product features * From Guy Kawasaki’s “The Art of the Start”
  9. 9. DEFINE YOUR DESIGN Example Mantras • Authentic athletic performance (Nike) • Fun family entertainment (Disney) • Rewarding everyday moments (Starbucks) • Think (IBM) • Winning is everything (Vince Lombardiʼs Green Bay Packers)
  10. 10. DEFINE YOUR DESIGN Doing it Differently vsPS3 Technological marvel Amazing graphics Blue-ray player Hardcore gamers Wii Simple Accessible Accelerometers Non-gamers
  11. 11. DEFINE YOUR DESIGN The Who Target Users • Can come from research or marketing • Remember multiple use cases & users Personas • Can be simple or complex The Mobile Angle • Design for sharing
  12. 12. DEFINE YOUR DESIGN The Where & When The Mobile Angle • Inside vs outside (contrast) • Stationary vs moving (complexity) • Active vs passive control (proximity) • Other environmental limitations • Public vs private (alerts) • Other rules of etiquette
  13. 13. DEFINE YOUR DESIGN Let’s Put It All Together Mantra: Constantly pushing the limits What: • Record tricks (skater & recorder modes) • Learn/master tricks mode (AR & motion capture) • Upload & share tricks. Brag/comment/teach Users: • Skater: primary owner and user • Recorder/observer: secondary user Where/When • Skate parks and urban streets • Mostly day, some dusk (low light is an issue) Mobile Affordances: • Accelerometer + compass + gps for motion capture (passive recording) • Camera for recording + augmented reality overlay (active recording) • Upload data to cloud for sharing • Share recordings on-the-spot with friends (share phone) • Simplified UI during recording (w/ auto start/stop) Special Considerations: • Viewing in bright light • Use with safety equipment (helmet, gloves, etc)
  14. 14. DEFINE YOUR DESIGN DESIGNERS TOOLBOX Telling and selling your story
  16. 16. DESIGNERS TOOLBOX Why Storyboard/Sketch Refine the Design • Inform the interaction model + wireframes • Vet product concepts and interactions • Quick and iterative • Build out your use cases Sell Your Ideas • Convey product value proposition • Sell the vision and brand fit
  17. 17. DESIGNERS TOOLBOX Storyboarding/Sketching Principles DO • Focus on the high-level tasks/interactions • Focus on a couple of your primary use cases • Show the most likely user experience DON’T • Get bogged down in the detailed interactions. Save that for the wireframes
  18. 18. DESIGNERS TOOLBOX Storyboard: Experience/CVP
  19. 19. DESIGNERS TOOLBOX Storyboard: Motion Graphics
  20. 20. DESIGNERS TOOLBOX Design Sketching: Interactions
  21. 21. DESIGNERS TOOLBOX Design Sketching: Task Flows
  22. 22. DESIGNERS TOOLBOX Examples Who: People who are having trouble counting in their heads in accordance with specific note values in the music. Also, I’d like this app to motivate people to progress The first goal would be targeted to both older individuals and younger, while the latter competitive would be mainly targeted at younger students. What: This is an visual system that functions as the verbal counting mechanism that many individuals learn “one and two and three and four and one and…etc). Where: The concept could be embedded in the music stand, or the music itself. Also the instrument could be augmented in some way. When: The use would come while practicing at home away from a lesson or at an orchestra rehearsal when you have to be able to site read with the other players. A big challenge is remembering what you learned at your lesson and then applying those principals to your practice at home. Why: Learning an instrument is difficult. Most of the challenge is staying motivated to practice even when the going is slow. Many times students quite after a few months or even a couple of years, on the cusp of understanding. People quite just before they start to sound good on their instrument. How: I want this to be visual and not verbal because when I’m playing it’s very hard for me to talk or read things. Either this is a visual map that helps you get through the music or a device that records your progress and puts you head-to-head with another player.
  23. 23. DESIGNERS TOOLBOX Examples
  24. 24. DESIGNERS TOOLBOX Examples
  25. 25. DESIGNERS TOOLBOX Immersion Techniques Scenarios Act out the interaction Portray the interactions in the environmental contexts they would be used. Note: if you can live it for real, do it! Role Playing Act out the roles Portray the needs and perspectives of the players in the interaction. Personification Act out the personality Give personality to the inanimate qualities of the product, service or brand.
  26. 26. DESIGNERS TOOLBOX Tangibles Techniques Props Acting with the object Use props to investigate our physical and emotional interactions to the problem context. Rapid Prototyping Interacting with the object Build interactive props to experience the product/service/brand in use. Sensory Deprivation Expand beyond the object Introduce physical constraints (sight, hearing, dexterity) to promote more holistic solutions that cater to all the senses. IF YOU ARE THINKING NUI!
  27. 27. DESIGNERS TOOLBOX Simulated experience
  28. 28. DESIGNERS TOOLBOX AIGA Hive Workshops 28 Tangibles In Practice Kinetic UX AIGA Hive Workshops 2011
  30. 30. Make Mantra • Identify the customer value proposition and use as a compass Make it Mobile (or the platform you are working in) • Design for the unique affordances of mobile (platform) • Embrace the changing contexts of the mobile (platform) user Storyboard • Tell your story, sell your CVP • Sketch: quick and iterative Conclusion
  31. 31. Thank you.
  • AmberMarquez2

    Dec. 4, 2021
  • FilipeFilibox

    Aug. 18, 2019
  • amrsalahibrahim

    Aug. 13, 2019

Ario Jafarzadeh and Prarthana Johnson pair up to teach a class in sketching and storyboarding for interaction on March 20 2013 at MakerHaus.


Total views


On Slideshare


From embeds


Number of embeds