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, Heleen van Nues and I discussed the limitations of wireframes, and how priority guides can overcome these limitations. Under our guidance, attendees created their first priority guide, and afterwards pitched their process and results.

1. Priority Guides
Heleen van Nues Lennart Overkamp
the alternative to wireframes

2. Heleen van Nues Lennart Overkamp
Interaction Designer
hvannues@mirabeau.nl
Interaction Designer
loverkamp@mirabeau.nl

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 travel guide to Paris

43. Assignment #1:
As a user, I want to book a hotel
in the center of Paris
Needs
• I want to easily find hotels in the center.
• I want general information about Paris.
• I want a safe, convenient & affordable accommodation.
• I want hotel recommendations.

44. Assignment #2:
As a user, I want to know which
locations I can visit in Paris
Needs
• I want to easily find locations.
• I want general information about Paris.
• I want information about public transport.
• I want information about tourist attractions.

45. Content suggestions:
Introductory text
Media (pictures/video)
Accommodations
Ratings
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 in 1 minute

47. Time’s up!

48. In 1 minute:
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!

52. That’s it! Any questions? :)