More Related Content Similar to How to paper prototype a digital solution (20) How to paper prototype a digital solution1. © 2019 SPIRIT LINK GmbH. All rights reserved // 1
How to build
a paper prototype
2. © 2019 SPIRIT LINK GmbH. All rights reserved // 2
Test user experience
Win hearts or budgets
Test usability
Test major steps of the
user journey
Cheap & quick, but deep
Easy & collaborative –
everybody can participate
Give the answer to: could
this work like this?
Yes! No.
What a paper prototype can do
3. © 2019 SPIRIT LINK GmbH. All rights reserved // 3
M A T E R I A L
Whiteboard
& markers
M A T E R I A L
Pens, paper, ruler
& post-its
M A T E R I A L
Scissors & tape
O P T I O N A L M A T E R I A L
Cardboard frame
(to emulate smartphone or
laptop screen)
T E A M
2–4 people, ideally
different skills
K N O W I N G
The idea, the
targeted process &
the addressed users
What you will need
4. © 2019 SPIRIT LINK GmbH. All rights reserved // 4
How to proceed
01
Define the
one problem
02
On the
whiteboard
03
Make it with
paper
04
Get real &
test it
5. © 2019 SPIRIT LINK GmbH. All rights reserved // 5
You could start by filling out the following
worksheet.
Ask yourself: What is your key target, the
one problem you want to solve? What is
the benefit for your users – and how is it
delivered?
Define the one problem
Step 01
© 2019 SPIRIT LINK GmbH. All rights reserved // 5
7. © 2019 SPIRIT LINK GmbH. All rights reserved // 7© 2019 SPIRIT LINK GmbH. All rights reserved // 7
8. © 2019 SPIRIT LINK GmbH. All rights reserved // 8
Have a key target in
mind. The one problem
your solution shall
solve. Write it down in a
sentence.
© 2019 SPIRIT LINK GmbH. All rights reserved // 8
9. © 2019 SPIRIT LINK GmbH. All rights reserved // 9
From that, you should
be able to derive the
key benefit, obviously.
© 2019 SPIRIT LINK GmbH. All rights reserved // 9
10. © 2019 SPIRIT LINK GmbH. All rights reserved // 10
Then ask: What does
the solution do to
deliver that benefit?
© 2019 SPIRIT LINK GmbH. All rights reserved // 10
11. © 2019 SPIRIT LINK GmbH. All rights reserved // 11
Now you have two options:
Think the process through in theory,
which you probably have already done,
and define the steps. But here you have a
huge advantage from the prototyping
method: Just don’t do that!
On the whiteboard
Step 02
© 2019 SPIRIT LINK GmbH. All rights reserved // 11
12. © 2019 SPIRIT LINK GmbH. All rights reserved // 12© 2019 SPIRIT LINK GmbH. All rights reserved // 12
Just start scribbling the first
step on the whiteboard, even
without knowing what the
second would be.
13. © 2019 SPIRIT LINK GmbH. All rights reserved // 13© 2019 SPIRIT LINK GmbH. All rights reserved // 13
Imagine this in a real-world
case: What would be the first
(important) thing the solution
should do? That’s where to
start.
(Don’t think about “login”. That’s
something the tech needs you to do
– first focus on what you need.)
14. © 2019 SPIRIT LINK GmbH. All rights reserved // 14
And: Scribble. Start with the
frame and the key element
which needs to be seen. And
then add that one interaction
which allows the user to
proceed.
© 2019 SPIRIT LINK GmbH. All rights reserved // 14
15. © 2019 SPIRIT LINK GmbH. All rights reserved // 15
Then jump to the end. Ask:
When will the process end
within my solution? Scribble on
the far right side of the
whiteboard, what you think
should be seen here.
© 2019 SPIRIT LINK GmbH. All rights reserved // 15
16. © 2019 SPIRIT LINK GmbH. All rights reserved // 16
Now, looking back at the first scribble, follow the
“visual” logic to define the next step. What would
be the consequence of that click? That’s what
your next scribble will show. Again, try one key
element and one major interaction.
© 2019 SPIRIT LINK GmbH. All rights reserved // 16
17. © 2019 SPIRIT LINK GmbH. All rights reserved // 17© 2019 SPIRIT LINK GmbH. All rights reserved // 17
Stick with the “visual” logic flow. What would the
users see next, what would they want to do. Go
with the must-haves: What’s necessary to reach
the final screen? (You’ll probably have to redo that last
screen in the end – that’s quite normal.)
18. © 2019 SPIRIT LINK GmbH. All rights reserved // 18
Redrawing on paper is the first check of
validity: Does everything fit on the screen,
and how does this feel?
Make it with paper
Step 03
© 2019 SPIRIT LINK GmbH. All rights reserved // 18
19. © 2019 SPIRIT LINK GmbH. All rights reserved // 19© 2019 SPIRIT LINK GmbH. All rights reserved // 19
Draw it close to the original size.
Close means e.g.,: If you’re
doing an app, your paper screen
might have the doubled size of a
smartphone screen.
20. © 2019 SPIRIT LINK GmbH. All rights reserved // 20© 2019 SPIRIT LINK GmbH. All rights reserved // 20
The drawings here are of course
the showcase-take-your-time-
and-designer-level …
21. © 2019 SPIRIT LINK GmbH. All rights reserved // 21© 2019 SPIRIT LINK GmbH. All rights reserved // 21
… normally, they are more
likely to look like this.
And that’s totally ok!
22. © 2019 SPIRIT LINK GmbH. All rights reserved // 22© 2019 SPIRIT LINK GmbH. All rights reserved // 22
Ask yourself for each screen:
What is the solution’s benefit
we’re showing here? Write it
down. Some steps are just
necessary to continue the
journey with no special benefit
at all. Try to skip as many details
of those as possible – focus on
what brings value to users.
23. © 2019 SPIRIT LINK GmbH. All rights reserved // 23© 2019 SPIRIT LINK GmbH. All rights reserved // 23
When you’ve done all the
screens, highlight the
interactive parts. If you need
crucial changes on a screen to
happen, use post-its or tape
shreds of paper to fold/unfold.
(Don’t overuse!)
The task is: Make clear how to
proceed.
24. © 2019 SPIRIT LINK GmbH. All rights reserved // 24© 2019 SPIRIT LINK GmbH. All rights reserved // 24
If you’re not overcrowded yet,
now you have the possibility to
enrich with some secondary
benefits – which might not be
the primary value for your
users, but for those
stakeholders you’ll want to
convince.
Like: Here, they could use special offers of
our partners, or subscribe for updates.
25. © 2019 SPIRIT LINK GmbH. All rights reserved // 25
Congrats, you’re done! Now, test it! Show
it to someone who was not involved in
creating the thing.
Get real & test it
Step 04
© 2019 SPIRIT LINK GmbH. All rights reserved // 25
26. © 2019 SPIRIT LINK GmbH. All rights reserved // 26
How to
Let them pretend to use the
solution and speak loudly
what they think while they’re
on it. Do they understand
where to click and what it
does?
27. © 2019 SPIRIT LINK GmbH. All rights reserved // 27
How many
3–4 people will find 80% of the
major usability-mishaps,
regardless of how close they
are to the real process, as long
as they understand the one
path through the solution
should do for them.
28. © 2019 SPIRIT LINK GmbH. All rights reserved // 28
How to
Redo the screens which failed.
(If you’re unsure, you could
repeat testing with new
participants.)
If you failed hard, throw
everything away and start
completely over.
That’s why we’re doing this:
Rebooting the project will
never be as easy again as at
this moment!
29. © 2019 SPIRIT LINK GmbH. All rights reserved // 29© 2019 SPIRIT LINK GmbH. All rights reserved // 29
Tipps
30. © 2019 SPIRIT LINK GmbH. All rights reserved // 30© 2019 SPIRIT LINK GmbH. All rights reserved // 30
Tipps
31. © 2019 SPIRIT LINK GmbH. All rights reserved // 31© 2019 SPIRIT LINK GmbH. All rights reserved // 31
Tipps
32. © 2019 SPIRIT LINK GmbH. All rights reserved // 32© 2019 SPIRIT LINK GmbH. All rights reserved // 32
Tipps
33. © 2019 SPIRIT LINK GmbH. All rights reserved // 33© 2019 SPIRIT LINK GmbH. All rights reserved // 33
Tipps