TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Â
AIA2019 - Zaid Haque - Paper & Digital Prototyping
1. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
PAPER & DIGITAL
PROTOTYPING
Arab Innovation Academy
07 January 2019, Doha, Qatar
Zaid Haque | @zaidhaque | zaidhaque@gmail.com
1
2. Hi, Iâm Zaid.
Red Dot Award: Bilingual Flight Info Display System 2 FastCompany's World Changing Ideas Award - Finalist
3. ARAB 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
9. ARAB 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
CHEAP/QUICK
LOOKS GOOD!
SOLVES
PROBLEMS
COST
FORM
FUNCTION
10. if you analyze the FUNCTION of an object,
its FORM often
becomes obvious.
- F. A. Porsche
11.
12. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
PROTOTYPING
The art of quick building for testing purposes
Fake it till you make it!
12
14. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 14
WHAT HAPPENS WHEN YOU DONâT TEST
HBOâs Silicon Valley
15. 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
15
16. 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.
16
17. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
WHATâS THE
DIFFERENCE?
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!
17
18. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
FIDELITY IN
PROTOTYPING
18
19. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
WHY LOW-FI?
focus on whatâs important ïŹrst
interaction vs. branding/colors/fonts
19
Cost
Function
20. 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
20
21. 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, if something needs
to be changed.
IDEA
STORYBOARD
PAPER
PROTOTYPE
DIGITAL
PROTOTYPE
FINISHED
PRODUCT
21
FEEDBACK
total effort/cost
ïŹdelity
22. 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.
22
IDEA
STORYBOARD
PAPER
PROTOTYPE
DIGITAL
PROTOTYPE
FEEDBACK
ADDED
EFFORT
total effort/cost
ïŹdelity
23. 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.
IDEA
STORYBOARD
PAPER
PROTOTYPE
DIGITAL
PROTOTYPE
FINISHED
PRODUCT
23
FEEDBACK
total effort/cost
ïŹdelity
24. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
EXPECTATION
Youâll expect to take a linear
path to your ïŹnal solutionâŠ
IDEA
STORYBOARD
PAPER
PROTOTYPE
DIGITAL
PROTOTYPE
FINISHED
PRODUCT
24
25. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
REALITY
What would happen is
probably something more like
this. Not all paths are straight,
but as long as you learn from
your experience youâll head
in the right direction.
IDEA
FINISHED
PRODUCT
25
26. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
REALITY
What would happen is
probably something more like
this. Not all paths are straight,
but as long as you learn from
your experience youâll head
in the right direction.
IDEA
FINISHED
PRODUCT
26
27. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE 27
WHAT HAPPENS WHEN YOU SKIP ALL THE STEPS
HBOâs Silicon Valley
28. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
CRAZY EIGHTS
Rapid idea generation
28
29. 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!
29
30. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
STORYBOARDING
To better understand your narrative
30
31. 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?
31
32. 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.
32
35. 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.
35
36. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
UI STENCILS
They help make the drawing
process quicker and cleaner.
You can get UI stencils for
practically anything.
Keep listening to see how
you could win one!
36
37. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
VALIDATION!
Youâve made your ïŹrst set of prototypes. âš
Now itâs time to test them out.
37
38. ARAB 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?
38
39. ARAB 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 ïŹow
of information?
- Do you ïŹnd it easy to use?
39
40. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
AVOID OPEN
ENDED QS
- âDo you like this?â
- âWhat do you want the
product to do?â
40
41. ARAB 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?â
41
42. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
BUT MORE IMPORTANTLY
Observe them! Sometimes you will ïŹnd hidden
problems that they donât realize.âš
Watch their facial expressions. Listen to how they
talk. Try to understand their feelings.
42
46. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
CONSIDERATIONS
âą Learning Curve
âą Usage/Device
âą High-ïŹdelity/low-ïŹdelity
support
âą Sharing functionality
âą Cost
46
âBorrowedâ from Mr. Alar Kolk, Arab Innovation Academy 2018 :)
47. 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
47
48. ARAB 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!
48
49. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
DEMONSTRATION
Using Adobe XD for rapid digital prototyping
49
50. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
CASE STUDY
UberELEVATE - Airport Arrivals Flow
50
51. 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.
!51
Elevate
53. 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.
!53
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
54. 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.
!54
55. 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.
!55
56. 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.
!56
57. 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.
!57
58. 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.
!58
59. 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.
!59
60. 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.
!60
61. 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).
!61
62. 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.
!62
63. 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.
!63
64. 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
!64
65. 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.
!65
66. Uber ATC Design Challenge - Airport Arrivals Flow
Splash Screen
App branding + possibility
of displaying a personalized
welcome message for
airport.
!66
67. 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.
!67
68. Uber ATC Design Challenge - Airport Arrivals Flow
Expanded view
Upon clicking on the
Baggage card, it is
expanded to show more
information
!68
69. Uber ATC Design Challenge - Airport Arrivals Flow
Home Screen
Upon clicking again, map
and extra information hides
again.
!69
70. 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â.
!70
71. 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â
!71
72. 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.
!72
73. 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.
!73
74. 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.
!74
75. 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.
!75
76. 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).
!76
77. 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).
!77
82. ARAB 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.
82
83. ARAB 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?
83
84. ARAB 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!
84
89. ARAB 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.
89
90. ARAB 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.
90
91. ARAB 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?
91
92. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
QUIZ TIME!
Get out your phones/laptops.
Actually you probably already have them out lolz.
92
93. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
KEEP VALIDATING, âš
KEEP ITERATING
And best of luck!
93
94. ARAB INNOVATION ACADEMY - PAPER & DIGITAL PROTOTYPING | ZAID HAQUE
PAPER & DIGITAL
PROTOTYPING
Arab Innovation Academy
07 January 2019, Doha, Qatar
Zaid Haque | @zaidhaque | zaidhaque@gmail.com
+1 (347) 515-0934
94