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.

Paper & Digital Prototyping and Validation, European Innovation Academy 2018

384 views

Published on

Slide deck for a keynote presentation at European Innovation Academy, presented in Summer 2018 in Turin, Italy and Cascais, Portugal.

European Innovation Academy, www.inacademy.eu, World's Largest Startup Accelerator. EIA educational programs are developed together with professionals of world class partner universities and companies: UC Berkeley, Stanford, Google, Amazon, Amadeus, IBM, CA and many others. Future entrepreneurs are immersed in a multicultural ecosystem of 4000 students, speakers, mentors and venture capitalists from 65 different nationalities.

Published in: Design
  • Be the first to comment

Paper & Digital Prototyping and Validation, European Innovation Academy 2018

  1. 1. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE PAPER & DIGITAL PROTOTYPING European Innovation Academy 13 July 2018, Turin, Italy Zaid Haque | @zaidhaque | zaidhaque@gmail.com 1
  2. 2. Hi, I’m Zaid. Red Dot Award: Bilingual Flight Info Display System 2 FastCompany's World Changing Ideas Award - Finalist
  3. 3. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE UX = USER EXPERIENCE What makes an ‘experience’? How can you leverage that to create a powerful app? 3
  4. 4. Cost FormFunction Product Parameters Money, Manpower, effort, etc. Aesthetics, Beauty Performance, Features
  5. 5. Cost Form Function Corporate Managers Everyone has different views on what is important. Product Parameters
  6. 6. Cost Form Function Software Engineers Everyone has different views on what is important. Product Parameters
  7. 7. Cost Form Function “Designers” - closer to Artists Everyone has different views on what is important. Product Parameters
  8. 8. Cost FormFunction Try to balance these out! Product Parameters
  9. 9. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE PRIORITIZE PROPERLY In a startup environment, you don’t have much money or time, but you want to build something functional and good looking. 9 LOW COST LOOKS GOOD! SOLVES PROBLEMS
  10. 10. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE PROTOTYPING The art of quick building for testing purposes Fake it till you make it! 10
  11. 11. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE WHY PROTOTYPE? 11
  12. 12. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 12 WHAT HAPPENS WHEN YOU DON’T TEST HBO’s Silicon Valley
  13. 13. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE NARRATIVE COMPLETE PRODUCT (NCP) Minimum? Viable? what’s viable and what’s not? too subjective, even for your investors 13
  14. 14. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE BUILDING AN NCP At every step of the way, consider building something that’s ‘narrative complete’— ask yourself, ‘can my customer use this?’ As soon as they can use it, they can give you FEEDBACK. 14
  15. 15. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE WHAT’S THE DIFFERENCE? TRACTION. The first example shows you’re building towards something, modularly, but the second example shows something that can already be used, i.e. a prototype! 15
  16. 16. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE FIDELITY IN PROTOTYPING 16
  17. 17. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE WHY LOW-FI? focus on what’s important first interaction vs. branding/colors/fonts 17 Cost Function
  18. 18. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE LOGICAL PROGRESSION Through prototyping, you can incrementally build on your product while saving on effort and cost, should something need to be changed. total effort/cost fidelity IDEA STORYBOARD PAPER PROTOTYPE DIGITAL PROTOTYPE FINISHED PRODUCT 18
  19. 19. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE LOGICAL PROGRESSION Through prototyping, you can incrementally build on your product while saving on effort and cost, if something needs to be changed. IDEA STORYBOARD PAPER PROTOTYPE DIGITAL PROTOTYPE FINISHED PRODUCT 19 FEEDBACK total effort/cost fidelity
  20. 20. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE LOGICAL PROGRESSION Through prototyping, you can incrementally build on your product while saving on effort and cost, should something need to be changed. 20 IDEA STORYBOARD PAPER PROTOTYPE DIGITAL PROTOTYPE FEEDBACK ADDED EFFORT total effort/cost fidelity
  21. 21. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE WITHOUT PROTOTYPES Skipping all these steps means that if and when the feedback comes, chances are you’ll need to start again from scratch. IDEA STORYBOARD PAPER PROTOTYPE DIGITAL PROTOTYPE FINISHED PRODUCT 21 FEEDBACK total effort/cost fidelity
  22. 22. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 22 WHAT HAPPENS WHEN YOU SKIP ALL THE STEPS HBO’s Silicon Valley
  23. 23. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE CRAZY EIGHTS Rapid idea generation 23
  24. 24. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE CRAZY EIGHTS Fold a piece of paper into half, then fold that into half and half again. You’ll open it to get 8 boxes. Spend 5 minutes filling each box with an idea/feature of your product. That’s 40s per box! 24
  25. 25. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE STORYBOARDING To better understand your narrative 25
  26. 26. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE STORYBOARDING If you wrote a TV show episode about your app, what would happen in it? How is your product found? What is your narrative?
 How does your app solve their problem?
 What is their reaction? 26
  27. 27. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE EASY DRAWING Don’t overcomplicate this process! Focus on the story and not on the art. Make your people as simple as possible. 27
  28. 28. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE PAPER PROTOTYPING 28
  29. 29. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 29
  30. 30. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE AS SIMPLE AS POSSIBLE Use markers, post-its, anything it takes to lay out your screens as simply as possible. Your user touches a fake ‘button’ on your paper, and you carry out the designated interaction, e.g. by putting another paper with a new screen in front of them. 30
  31. 31. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE VALIDATION! You’ve made your prototypes. 
 Now it’s time to try it out. 31
  32. 32. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE WHAT DO YOU NEED TO KNOW? - Are you solving your customer’s problems? - Are you making it easy? - Are you making it enjoyable? 32
  33. 33. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE QUESTIONS TO ASK - Does my app/website/ product do what you thought it does? - Do you understand the flow of information? - Do you find it easy to use? 33
  34. 34. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE AVOID OPEN ENDED QS - “Do you like this?” - “What do you want the product to do?” 34
  35. 35. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE AVOID LEADING QS - “You like my app, right?” - “Isn’t this feature helping you become better at your job?” 35
  36. 36. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE BUT MORE IMPORTANTLY Observe them! Sometimes you will find hidden problems that they don’t realize.
 Watch their facial expressions. Listen to how they talk. Try to understand their feelings. 36
  37. 37. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 37
  38. 38. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE DIGITAL PROTOTYPING 38
  39. 39. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 39
  40. 40. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE CONSIDERATIONS • Learning Curve • Usage/Device • High-fidelity/low-fidelity support • Sharing functionality • Cost 40 “Borrowed” from Mr. Alar Kolk, Arab Innovation Academy 2018 :)
  41. 41. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE I USE APPLE KEYNOTE. - Apple Keynote was designed/ prototyped in…. Apple Keynote! (WWDC ’16) - Easy to manipulate images, make simple layouts, and carry out transitions (‘magic move’ transition is your best friend) - UberELEVEVATE case study demonstrates what’s possible with Keynote 41
  42. 42. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE ADOBE XD (EXPERIENCE DESIGN) - Free (!) for both Mac and PC - Easily create repetitive elements and placeholders - Create interactions and share your prototype! 42
  43. 43. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE DEMONSTRATION Using Adobe XD for rapid digital prototyping 43
  44. 44. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE CASE STUDY UberELEVATE - Airport Arrivals Flow 44
  45. 45. Uber ATC Design Challenge - Airport Arrivals Flow Introduction Uber recently released a whitepaper about a blue- sky future where we would be able to be transported by air, on- demand. Although that may not be the intent of this design challenge - for this exercise I have made a fictional “Uber Elevate” app - which could potentially be a universal airport app. !45 Elevate
  46. 46. Uber ATC Design Challenge - Airport Arrivals Flow Project + Considerations !46
  47. 47. Uber ATC Design Challenge - Airport Arrivals Flow Hierarchy of Needs Throughout the airport experience, we would need to understand what our passengers’s priorities are. It goes without saying that the main priority is to travel, but as frequent travelers we understand other needs as well. The app should reflect an understanding of these needs. !47 Travel! Depart/Arrive, and all associated steps/touchpoints (e.g. check-in, baggage etc) Routine needs Restrooms, children’s rooms, other such facilities/amenities Food Cafes + Restaurants Entertainment Shopping/Exploring
  48. 48. Uber ATC Design Challenge - Airport Arrivals Flow Passengers are stressed Passengers are generally stressed about being late for a flight, or confused by the information overload around them. Given that an airport facility caters to many thousands of individuals per day, there will surely be information overload. This app is an opportunity to reduce the information to show what’s relevant to the individual, rather than cater to all passengers. !48
  49. 49. Uber ATC Design Challenge - Airport Arrivals Flow Passengers are busy Apart from passengers’ minds being busy, their hands are also busy. They are generally carrying bags and may only have one hand free. We need to minimize taps and minimize engagement in general - the faster we can pass information to the passenger, the more successful the app would be. !49
  50. 50. Uber ATC Design Challenge - Airport Arrivals Flow Exploration The first step involved looking at a couple of different concepts and trying to see which ones would fit best with the considerations listed on the previous slides. !50
  51. 51. Uber ATC Design Challenge - Airport Arrivals Flow 5 Design Concepts I started with 5 ideas on how to communicate baggage information to passengers. The next slides explains each in more detail. !51
  52. 52. Uber ATC Design Challenge - Airport Arrivals Flow AR Directions What if you were able to pick up your phone and point it around to see which direction to go in? While this seems to be an idea AR enthusiast dub to be great for wayfinding, it would not fair well in an airport. Apart from requiring too much engagement (passenger needs to carry it around in hand) - it could be considered a security threat to be carrying a camera phone around in that manner. Hardware deficiencies may also limit the success of such a product. !52
  53. 53. Uber ATC Design Challenge - Airport Arrivals Flow Airport Maps Providing a nice looking map of the airport to help passengers with directions. Maps of new places can be difficult to understand for everyone - and chances are for something as simple as ‘baggage claim’ there would be enough signs in the airport and enough people walking in the same direction for a passenger to experience less cognitive load by simply following the crowd. !53
  54. 54. Uber ATC Design Challenge - Airport Arrivals Flow Walk times only The other option is to go minimal and remove directionality information completely. Although an app like this could provide all the basic information a passenger would need, it wouldn’t warrant enough reason to take one’s phone out of the pocket just to look at this information. !54
  55. 55. Uber ATC Design Challenge - Airport Arrivals Flow Complete Status On the other hand, we could provide our passengers with all information pertaining to their bags. This would be on the other end of the spectrum - and may be too much information that the passenger does not need. Could be a secondary function - after pressing a ‘more information’ button. 
 However airports are not authorized to provide too much detail on these things for security reasons (see disclosure p. 5). !55
  56. 56. Uber ATC Design Challenge - Airport Arrivals Flow Process Flow What if baggage information could be a ‘card’ on a page which has multiple cards depending on the passenger information? If this app showed one screen which contained the individuals’ complete itinerary, including all the touch points in the passenger journey, it could possibly both provide a low cognitive load, but also enough relevant information on one page for the user to understand the entire journey with a glance. !56
  57. 57. Uber ATC Design Challenge - Airport Arrivals Flow Final design I explored the idea of using cards to showcase touchpoints in the passenger flow. Each card would have information about a certain point, and could be expanded to show more details if required. The idea was that if the passenger is only interested in getting from A to B, all the information is on one screen. !57
  58. 58. Uber ATC Design Challenge - Airport Arrivals Flow Digital Prototype Created in a combination of Illustrator, Sketch and Adobe XD. Whereas the final designs were produced in XD, some elements were easily manipulated in Illustrator/Sketch instead. Transitions done in Keynote. Watch interaction video here !58
  59. 59. Uber ATC Design Challenge - Airport Arrivals Flow Notification The app starts off with a notification. For most people, this would be enough information so there would be no need to proceed. Opening the app reveals more information. !59
  60. 60. Uber ATC Design Challenge - Airport Arrivals Flow Splash Screen App branding + possibility of displaying a personalized welcome message for airport. !60
  61. 61. Uber ATC Design Challenge - Airport Arrivals Flow Home Screen Shows information on the passenger’s flight, as well as all relevant touchpoints. Since we are currently looking at a domestic arrivals passenger, the only information showed is baggage info and exit info. Exit info provides options to ride with uber, get a rental or choose public transit as well. Baggage info provides minimum relevant detail, but can be tapped to show more. !61
  62. 62. Uber ATC Design Challenge - Airport Arrivals Flow Expanded view Upon clicking on the Baggage card, it is expanded to show more information !62
  63. 63. Uber ATC Design Challenge - Airport Arrivals Flow Home Screen Upon clicking again, map and extra information hides again. !63
  64. 64. Uber ATC Design Challenge - Airport Arrivals Flow At Carousel Once passenger is at carousel, relevant information changes to show ‘wait time’ instead of ‘walk time’. !64
  65. 65. Uber ATC Design Challenge - Airport Arrivals Flow At Carousel After wait time is over and bags are on carousel, status changes to display “Bags on Carousel” !65
  66. 66. Uber ATC Design Challenge - Airport Arrivals Flow At Carousel Once the last bag is on the carousel, there is a possibility that the passenger’s bag did not turn up. They can press the ‘information’ button to file a missing bag report. !66
  67. 67. Uber ATC Design Challenge - Airport Arrivals Flow At Carousel Once the last bag is on the carousel, there is a possibility that the passenger’s bag did not turn up. They can press the ‘information’ button to file a missing bag report. !67
  68. 68. Uber ATC Design Challenge - Airport Arrivals Flow At Carousel Once the last bag is on the carousel, there is a possibility that the passenger’s bag did not turn up. They can press the ‘information’ button to file a missing bag report. !68
  69. 69. Uber ATC Design Challenge - Airport Arrivals Flow At Exit Once the baggage process is over, the baggage information is no long shown on the screen. Now the passenger has the ability to access exit information only. !69
  70. 70. Uber ATC Design Challenge - Airport Arrivals Flow Alternative screens Based on the passenger profile, the initial screen could show different information. Shown here are screens for Transiting passengers (left) and international arriving passengers (right). !70
  71. 71. Uber ATC Design Challenge - Airport Arrivals Flow Alternative screens Based on the passenger profile, the initial screen could show different information. Shown here are screens for Transiting passengers (left) and international arriving passengers (right). !71
  72. 72. Uber ATC Design Challenge - Airport Arrivals Flow !72 Overview
  73. 73. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE SKETCH FILE 73
  74. 74. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 74
  75. 75. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE WHAT IF I’M NOT MAKING AN APP/WEBSITE? There are still many ways to prototype your product. 75
  76. 76. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE “WIZARD OF OZ” Having a hidden person do the things your computer will be programmed to do. <- Ghost driver imitating a driverless car. Can you see the human? 76
  77. 77. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE “WIZARD OF OZ” Having a hidden person do the things your computer will be programmed to do. <- Ghost driver imitating a driverless car. Can you see the human? Here he is! 77
  78. 78. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 78
  79. 79. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 79
  80. 80. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 80
  81. 81. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 81
  82. 82. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE AS ALWAYS… Ask us questions! If you don’t know how to build a prototype for your product, we are here to help. 82
  83. 83. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE REPEAT VALIDATION! Now that you have a digital or physical prototype, try validating again. This will happen next week. 83
  84. 84. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE WHAT DO YOU NEED TO KNOW? - Are you solving your customer’s problems? - Are you making it easy? - Are you making it enjoyable? 84
  85. 85. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE KEEP VALIDATING, 
 KEEP ITERATING And best of luck! 85
  86. 86. EUROPEAN INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE PAPER & DIGITAL PROTOTYPING European Innovation Academy 13 July 2018, Turin, Italy Zaid Haque | @zaidhaque | zaidhaque@gmail.com 86

×