A major pitfall of wireframing in the early design process is to focus too much on the visual layout of the design. The priority guide is a content-first alternative approach that avoids this pitfall. In this workshop hosted at the Mirabeau headquarters, we discussed the limitations of wireframes, and how priority guides can overcome these limitations. Under our guidance, attendees from the Amsterdam UX community created their first priority guide, and afterwards pitched their process and results.

1. Priority Guidesthe alternative to wireframes
Heleen van Nues Lennart Overkamp 20 December 2017

2. Heleen van Nues Lennart Overkamp
Interaction Designer
at Garage by Innogy
Interaction Designer at Mirabeau
@OverkampLennart

4. Creative
Consultants
Interaction
Designers
Visual
Designers
Front-end
Developers
UX

6. Wireframes

7. “
”
The wireframe is a visual guide that represents the
skeletal framework of a website or app.
It depicts the page layout or arrangement
of the website’s content, including
interface elements and navigational systems.
Source: adapted from Wikipedia

8. Low-fidelity wireframe

9. High-fidelity wireframe

10. Advantage #1:
Great for
sketching &
exploration

11. Advantage #2:
Good way to
communicate
ideas

12. Advantage #3:
Easy to test
early in the
design process

13. Disadvantage #1:
They provide
an illusion of
final design

14. Disadvantage #2:
They can
kill creativity

15. Disadvantage#3:
Inconvenient
for Testers
& Developers

16. Priority Guides

17. The priority guide contains
content and elements for a mobile screen,
sorted by hierarchy from top to bottom,
and without layout specifications.

18. “
”
Continuously ask yourself ‘Why?’
while making a priority guide.

20. Crew on flight
Close
Full list - Flight Preperation screen
Name: Tony Martinez
Rank: Senior purser
PSN: 1234567
Crew
details no
filter active
o Show reporting time
o Show who hops on
o Show who hops off
o Show FDP and rest time
Only one filter at a
time can be active
Filters/
toggles
Crew details +
“show reporting
time” filterName: Tony Martinez
Crew details +
“who hops on”
filterName: Ivar van den Broek
PSN: 1234567
Rank: CA 1
Previous flight: KL1234
Arrival date: 10-12-2016
Crew details +
“who hops off”
filterName: Ivar van den Broek
PSN: 1234567
Rank: CA 1
Next flight: KL1266
1
2
3
5
6

21. 4 Tips voor efficiënt
de was drogen
afbeelding
icoon besparing
Besparing per jaar € 25*
icoon C02
C02 besparing 1kg
icoon bekeken
Aantal keer bekeken 189
Lees meer
* Deze besparingen zijn op
jaarbasis en gebaseerd op een
gemiddeld Nederlands
huishouden.
Een wasdroger slurpt enorm veel
energie. Schijnt het zonnetje?
Hang dan de was liever buiten
op aan de lijn of bij…..
Titel
Pagina header
Tip
eigenschappen
Content box
Content box
Link naar tooltip
Afbeelding
Icoon
Tekst
Icoon
Tekst
Icoon
Tekst
icoon of thumbnailBeeld
(i)i button voor
disclaimer tekst
Disclaimer tip
besparing
Link
Tekst
Wist je dat?
Een oude droger vaak de
grootste energieverbruiker is in
een Nederlands huishouden?
Tekst
Hoe hoger de centrifugesnelheid
(1600 toeren per minuut), hoe
droger de was en hoe korter de
droogtijd.
Tekst
Tip box01 Hoge centrifugesnelheidTitel: nummer
tip + tekst
De ‘strijkdroog’ stand kost
minder energie dan
‘kreukherstellend’ of ‘kast
droog’.
Tekst
02 StrijkdroogTitel: nummer
tip + tekst
Lang drogen op een lage
temperatuur is voordeliger dan
kort drogen op een hoge
temperatuur.
Tekst
03 Lang drogen op lage tempTitel: nummer
tip + tekst
04 Volle droger met lage tempTitel: nummer
tip + tekst
Link naar
tooltip

22. Advantage #1:
Design for
responsiveness

23. 4 Tips voor efficiënt
de was drogen
afbeelding
icoon besparing
Besparing per jaar € 25*
icoon C02
C02 besparing 1kg
icoon bekeken
Aantal keer bekeken 189
Lees meer
* Deze besparingen zijn op
jaarbasis en gebaseerd op een
gemiddeld Nederlands
huishouden.
Een wasdroger slurpt enorm veel
energie. Schijnt het zonnetje?
Hang dan de was liever buiten
op aan de lijn of bij…..
Titel
Pagina header
Tip
eigenschappen
Content box
Link naar tooltip
Afbeelding
Icoon
Tekst
Icoon
Tekst
Icoon
Tekst
icoon of thumbnailBeeld
(i)i button voor
disclaimer tekst
Disclaimer tip
besparing
Link
Tekst
Wist je dat?
Een oude droger vaak de
grootste energieverbruiker is in
een Nederlands huishouden?
Tekst
Hoe hoger de centrifugesnelheid
(1600 toeren per minuut), hoe
droger de was en hoe korter de
droogtijd.
Tekst
01 Hoge centrifugesnelheidTitel: nummer
tip + tekst
De ‘strijkdroog’ stand kost
minder energie dan
‘kreukherstellend’ of ‘kast
droog’.
Tekst
02 StrijkdroogTitel: nummer
tip + tekst
Lang drogen op een lage
temperatuur is voordeliger dan
kort drogen op een hoge
temperatuur.
Tekst
03 Lang drogen op lage tempTitel: nummer
tip + tekst
04 Volle droger met lage tempTitel: nummer
tip + tekst

24. Advantage #2:
Focus on solving
problems &
serving needs

25. Advantage #3:
No time wasted
on aesthetics
& layout

26. Advantage #4:
Visual designers
own their
playground

27. Advantage #5:
FED get
“HTML” early in
the process

28. 4 Tips voor efficiënt
de was drogen
afbeelding
icoon besparing
Besparing per jaar € 25*
icoon C02
C02 besparing 1kg
icoon bekeken
Aantal keer bekeken 189
Lees meer
* Deze besparingen zijn op
jaarbasis en gebaseerd op een
gemiddeld Nederlands
huishouden.
Een wasdroger slurpt enorm veel
energie. Schijnt het zonnetje?
Hang dan de was liever buiten
op aan de lijn of bij…..
Titel
Pagina header
Tip
eigenschappen
Content box
Content box
Link naar tooltip
Afbeelding
Icoon
Tekst
Icoon
Tekst
Icoon
Tekst
icoon of thumbnailBeeld
(i)i button voor
disclaimer tekst
Disclaimer tip
besparing
Link
Tekst
Wist je dat?
Een oude droger vaak de
grootste energieverbruiker is in
een Nederlands huishouden?
Tekst
Hoe hoger de centrifugesnelheid
(1600 toeren per minuut), hoe
droger de was en hoe korter de
droogtijd.
Tekst
Tip box01 Hoge centrifugesnelheidTitel: nummer
tip + tekst
De ‘strijkdroog’ stand kost
minder energie dan
‘kreukherstellend’ of ‘kast
droog’.
Tekst
02 StrijkdroogTitel: nummer
tip + tekst
Lang drogen op een lage
temperatuur is voordeliger dan
kort drogen op een hoge
temperatuur.
Tekst
03 Lang drogen op lage tempTitel: nummer
tip + tekst
04 Volle droger met lage tempTitel: nummer
tip + tekst
Link naar
tooltip

29. Advantage #6:
Checklist
for testers

30. How to?

31. Baselines:
real content
mobile size
no layout elements
not a deliverable

32. Step #1:
Determine the goal
of the screen(s)
Determine the goals of users,
clients and stakeholders.

33. Step #2:
Research your user
Interviews
Observations
Desk research
Personas
Customer Journeys
Statistics

34. Step #3:
Determine the
content topics
Based on goals and research
Involve clients & stakeholders

35. Titel tip
afbeelding
Besparing in geld
Besparing in C02
Aantal keer bekeken
Tekst met uitleg over de
besparingen.
Introductie over de
desbetreffende tip
afbeelding of icoon
Feitje over het tip onderwerp
Uitleg van tip
01 Mini tip
Uitleg van tip
02 Mini tip
Uitleg van tip
03 Mini tip
Uitleg van tip
04 Mini tip
Uitleg van tip
05 Mini tip
Step #4:
Create a high-level
priority guide
Start on paper for flexibility
Prioritise the content topics
Keep goals and users in mind
Continuously ask yourself ‘Why?’

36. 4 Tips voor efficiënt
de was drogen
afbeelding
icoon besparing
Besparing per jaar € 25*
icoon C02
C02 besparing 1kg
icoon bekeken
Aantal keer bekeken 189
Lees meer
* Deze besparingen zijn op
jaarbasis en gebaseerd op een
gemiddeld Nederlands
huishouden.
Een wasdroger slurpt enorm veel
energie. Schijnt het zonnetje?
Hang dan de was liever buiten
op aan de lijn of bij…..
Titel
Pagina header
Tip
eigenschappen
Content box
Content box
Link naar tooltip
Afbeelding
Icoon
Tekst
Icoon
Tekst
Icoon
Tekst
icoon of thumbnailBeeld
(i)i button voor
disclaimer tekst
Disclaimer tip
besparing
Link
Tekst
Wist je dat?
Een oude droger vaak de
grootste energieverbruiker is in
een Nederlands huishouden?
Tekst
Hoe hoger de centrifugesnelheid
(1600 toeren per minuut), hoe
droger de was en hoe korter de
droogtijd.
Tekst
Tip box01 Hoge centrifugesnelheidTitel: nummer
tip + tekst
De ‘strijkdroog’ stand kost
minder energie dan
‘kreukherstellend’ of ‘kast
droog’.
Tekst
02 StrijkdroogTitel: nummer
tip + tekst
Lang drogen op een lage
temperatuur is voordeliger dan
kort drogen op een hoge
temperatuur.
Tekst
03 Lang drogen op lage tempTitel: nummer
tip + tekst
04 Volle droger met lage tempTitel: nummer
tip + tekst
Link naar
tooltip
Step #5:
Create a detailed
priority guide
Start on paper for flexibility
Use detailed/real content to fill in
the priority guide
Add functionality

37. Step #6:
Validate & iterate!
Test with users, client
and stakeholders
Reprioritise

38. “
”
Experiment and find out what works for you!

40. 4 Tips voor efficiënt
de was drogen
afbeelding
icoon besparing
Besparing per jaar € 25*
icoon C02
C02 besparing 1kg
icoon bekeken
Aantal keer bekeken 189
Lees meer
* Deze besparingen zijn op
jaarbasis en gebaseerd op een
gemiddeld Nederlands
huishouden.
Een wasdroger slurpt enorm veel
energie. Schijnt het zonnetje?
Hang dan de was liever buiten
op aan de lijn of bij…..
icoon of thumbnail
(i)
Wist je dat?
Een oude droger vaak de
grootste energieverbruiker is in
een Nederlands huishouden?
Hoe hoger de centrifugesnelheid
(1600 toeren per minuut), hoe
droger de was en hoe korter de
droogtijd.
01 Hoge centrifugesnelheid
De ‘strijkdroog’ stand kost
minder energie dan
‘kreukherstellend’ of ‘kast
droog’.
02 Strijkdroog
Lang drogen op een lage
temperatuur is voordeliger dan
kort drogen op een hoge
temperatuur.
03 Lang drogen op lage temp
04 Volle droger met lage temp

41. Workshop

42. Assignment:
Create a priority guide for an online page that
provides information about an (upcoming) flight.

43. Assignment #1:
As a passenger with flight anxiety, I
want to feel reassured about my
upcoming flight.
Passenger needs
• I want to know the process of flying.
• I want the flight to be over quickly.
• I want to be understood and taken seriously.
Airline’s goal
As an airline, I want to have returning customers.

44. Assignment #2:
As a frequent flyer going on holiday,
I want to know what I can do at my
holiday destination during my stay.
Flyer needs
• I only need the bare minimum flight information.
• I want to be able to decide quickly on activities.
Airline’s goal
As an airline, I want to have customers book tours, guides,
and activities via our preferred partners.

45. Content suggestions:
Introductory text
Media (pictures/video)
Aircraft information
Holiday activities
Filters

46. 1. Determine the goal ✓
2. Research your user ✓
3. Determine the content
4. Create high-level priority guide
5. Create detailed priority guide
6. Pitch your priority guide!

47. Time’s up!

48. Pitch!
describe your process
explain your choices

49. Conclusion

51. “
”
Priority guides and wireframes complement each other.
It is important to know when to use which tool!