Paper and Digital Prototyping @ Arab Innovation Academy

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

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

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

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

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

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

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

Cost
FormFunction
Try to balance these out!
Product Parameters

PROTOTYPING
The art of quick building for testing purposes
9

WHY PROTOTYPE?
10

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

NARRATIVE COMPLETE
PRODUCT (NCP)
Minimum? Viable? what’s viable and what’s not? too
subjective, even for your investors
12

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

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

FIDELITY IN
PROTOTYPING
15

WHY LOW-FI?
focus on what’s important ﬁrst
interaction vs. branding/colors/fonts
16

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

LOGICAL PROGRESSION
need to be changed.
total effort/cost
ﬁdelity
IDEA
STORYBOARD
PAPER
PROTOTYPE
DIGITAL
PROTOTYPE
FINISHED
PRODUCT
18
FEEDBACK

LOGICAL PROGRESSION
need to be changed.
total effort/cost
ﬁdelity
19
IDEA
STORYBOARD
PAPER
PROTOTYPE
DIGITAL
PROTOTYPE
FEEDBACK
ADDED
EFFORT

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

WHAT HAPPENS WHEN YOU SKIP ALL THE STEPS

CRAZY EIGHTS
Rapid idea generation
22

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

STORYBOARDING
To better understand your narrative
24

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

EASY DRAWING
Don’t overcomplicate this
process! Focus on the story
and not on the art. Make
your people as simple as
possible.
26

PAPER PROTOTYPING
27

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

DIGITAL PROTOTYPING
30

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

CodeClick-ThroughSignal FlowTimeline
33

Timeline

Mac OS X

Linear outcomes

Create vector assets

Design user interfaces

Mobile | Web
Sketch

Timeline

Collaboration with teams

Live sharing

Design user interfaces

Mobile | Web
Figma

Click-through

Live sharing

Collaboration with teams

Supports PNG, JPG, GIF, PSD

Clickable interactive prototypes
InVision

Code based

CoﬀeeScript, JavaScript

High ﬁdelity

Interactions + Animations

Mobile | Web
Framer

Code based

High ﬁdelity

Web, mobile

WordPress Integrations

Mobile | Web
Pinegrow

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

CASE STUDY
UberELEVATE - Airport Arrivals Flow
41

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

Project +
Considerations
43

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

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

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

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

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

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

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

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

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

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

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

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

Uber ATC Design Challenge - Airport Arrivals Flow 56

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

Splash Screen
App branding + possibility
of displaying a personalized
welcome message for
airport.
58

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

Expanded view
Upon clicking on the
Baggage card, it is
expanded to show more
information
60

Home Screen
Upon clicking again, map
and extra information hides
again.
61

At Carousel
Once passenger is at
carousel, relevant
information changes to
show ‘wait time’ instead of
‘walk time’.
62

At Carousel
After wait time is over
and bags are on carousel,
status changes to display
“Bags on Carousel”
63

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

At Carousel
report.
65

At Carousel
report.
66

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

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

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

Uber ATC Design Challenge - Airport Arrivals Flow 70
Overview

CASE STUDY
Rendezvous - Finding a time to meet your team
71

SKETCH FILE
72

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

DEMONSTRATION
Using Apple’s Keynote App
for rapid digital prototyping
75

Paper and Digital Prototyping @ Arab Innovation Academy

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Similar to Paper and Digital Prototyping @ Arab Innovation Academy

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

More from Zaid Haque

More from Zaid Haque (12)

Recently uploaded

Recently uploaded (20)

Paper and Digital Prototyping @ Arab Innovation Academy