Paper and Digital Prototyping @ Arab Innovation Academy

1. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE PAPER & DIGITAL PROTOTYPING Arab Innovation Academy 03 January 2018, Education City Doha, Qatar Zaid Haque | @zaidhaque | zaidhaque@gmail.com 1

2. Hi, I’m Zaid. Red Dot Award: Bilingual Flight Info Display SystemMy Website 2

3. UX = User Experience What makes an ‘experience’? How can you leverage that to create a powerful app? 3

4. Cost FormFunction Product Parameters Money, Manpower, effort, etc. Aesthetics, Beauty Performance, Features

5. Cost FormFunction Corporate Managers Everyone has different views on what is important. Product Parameters

6. Cost Form Function Software Engineers Everyone has different views on what is important. Product Parameters

7. Cost Form Function “Designers” - closer to Artists Everyone has different views on what is important. Product Parameters

8. Cost FormFunction Try to balance these out! Product Parameters

9. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE PROTOTYPING The art of quick building for testing purposes 9

10. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE WHY PROTOTYPE? 10

11. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 11 WHAT HAPPENS WHEN YOU DON’T TEST

12. ARAB 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 12

13. ARAB 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. 13

14. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE DIFFERENCE BETWEEN THEM? TRACTION. The ﬁrst example shows you’re building towards something, modularly, but the second example shows something that can already be used, i.e. a prototype! 14

15. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE FIDELITY IN PROTOTYPING 15

16. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE WHY LOW-FI? focus on what’s important ﬁrst interaction vs. branding/colors/fonts 16

17. ARAB 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 ﬁdelity IDEA STORYBOARD PAPER PROTOTYPE DIGITAL PROTOTYPE FINISHED PRODUCT 17

18. ARAB 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 ﬁdelity IDEA STORYBOARD PAPER PROTOTYPE DIGITAL PROTOTYPE FINISHED PRODUCT 18 FEEDBACK

19. ARAB 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 ﬁdelity 19 IDEA STORYBOARD PAPER PROTOTYPE DIGITAL PROTOTYPE FEEDBACK ADDED EFFORT

20. ARAB 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. total effort/cost ﬁdelity IDEA STORYBOARD PAPER PROTOTYPE DIGITAL PROTOTYPE FINISHED PRODUCT 20 FEEDBACK

21. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 21 WHAT HAPPENS WHEN YOU SKIP ALL THE STEPS

22. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE CRAZY EIGHTS Rapid idea generation 22

23. ARAB 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 ﬁlling each box with an idea/feature of your product. That’s 40s per box! 23

24. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE STORYBOARDING To better understand your narrative 24

25. ARAB 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? 25

26. ARAB 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. 26

27. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE PAPER PROTOTYPING 27

28. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 28

29. ARAB 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. 29

30. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE DIGITAL PROTOTYPING 30

32. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE Considerations  Learning Curve  How long will it take me to learn this tool? Usage Which device will it be used on? Web, mobile, desktop?  Fidelity Will it showcase layout structure or complex interactions?   Sharing Can I collaborate with others on the prototype?  Cost How much am I prepared to pay for this tool? 32

33. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE CodeClick-ThroughSignal FlowTimeline 33

35. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 35 Timeline Mac OS X Linear outcomes Create vector assets Design user interfaces Mobile | Web Sketch

36. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 36 Timeline Collaboration with teams Live sharing Design user interfaces Mobile | Web Figma

37. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 37 Click-through Live sharing Collaboration with teams Supports PNG, JPG, GIF, PSD Clickable interactive prototypes InVision

38. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 38 Code based CoﬀeeScript, JavaScript High ﬁdelity Interactions + Animations Mobile | Web Framer

39. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 39 Code based High ﬁdelity Web, mobile WordPress Integrations Mobile | Web Pinegrow

40. ARAB 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 40

41. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE CASE STUDY UberELEVATE - Airport Arrivals Flow 41

42. 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. 42 Elevate

43. Uber ATC Design Challenge - Airport Arrivals Flow Project + Considerations 43

44. 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. 44 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

45. 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. 45

46. 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. 46

47. 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. 47

48. 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. 48

49. 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. 49

50. 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. 50

51. 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. 51

52. 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). 52

53. 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. 53

54. 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. 54

55. Uber ATC Design Challenge - Airport Arrivals Flow 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 55

56. Uber ATC Design Challenge - Airport Arrivals Flow 56

57. 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. 57

58. Uber ATC Design Challenge - Airport Arrivals Flow Splash Screen App branding + possibility of displaying a personalized welcome message for airport. 58

59. 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. 59

60. Uber ATC Design Challenge - Airport Arrivals Flow Expanded view Upon clicking on the Baggage card, it is expanded to show more information 60

61. Uber ATC Design Challenge - Airport Arrivals Flow Home Screen Upon clicking again, map and extra information hides again. 61

62. 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’. 62

63. 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” 63

64. 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. 64

67. 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. 67

68. 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). 68

69. 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). 69

70. Uber ATC Design Challenge - Airport Arrivals Flow 70 Overview

71. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE CASE STUDY Rendezvous - Finding a time to meet your team 71

72. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE SKETCH FILE 72

74. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE PAPER & DIGITAL PROTOTYPING Arab Innovation Academy 03 January 2018, Education City Doha, Qatar Zaid Haque | @zaidhaque | zaidhaque@gmail.com 74

75. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE DEMONSTRATION Using Apple’s Keynote App for rapid digital prototyping 75

Paper and Digital Prototyping @ Arab Innovation Academy

You are reading a preview.

Check these out next

Paper and Digital Prototyping @ Arab Innovation Academy

More Related Content

Slideshows for you (15)

Similar to Paper and Digital Prototyping @ Arab Innovation Academy (20)

More from Zaid Haque (12)

Recently uploaded (20)