A talk I have gave during the first edition of UX Design Night, organised by the meetup group UX Ghent (www.uxghent.be). It outlines the process that made me change my approach to using wireframes in my work, from creating a deliverable to creating a shared understanding.

1. A Journey Through Prototyping
Clément Génin
UX Architect at ONE Agency
@ClemGn
From Aligning Boxes
To Aligning Visions
UX Ghent
www.uxghent.be | @UX_Ghent

2. Balsamiq Mockups

3. Omnigraffle

4. Omnigraffle

5. Wireframes as a document
Limitations:
Hard to explain interactions
Not optimised for changes
Not always clear for clients
Not adapted for responsive design

6. Other tools I tried

7. Paul Adams
Full talk (YouTube)

8. Paul Adams

9. Jeff Gothelf
“Getting Out Of The
Deliverables Business”
“Introduction to Lean UX” (SlideShare)

10. My conclusion
“How can I avoid wasting time aligning boxes?”
I decided to minimise/skip wireframes in my process.
Doing that forced me to compensate:

11. Sketches
Listen Sketch Document
Graphical design Code
Oral communication
Examples

12. Existing examples
Listen Sketch Document
Graphical design Code
Oral communication
Examples

13. Textual description
Listen Sketch Document
Graphical design Code
Oral communication
Examples

14. Conversations
Listen Sketch Document
Graphical design Code
Oral communication
Examples

15. Epiphany
None of these aspects work on its own.
The projects for which I had skipped/minimised wireframes
had poorer results.
It hit me: there nothing wrong with wireframes.
What matters is the intent:

16. Aligning visions
Sketch Document Gra. design
Diagrams
Examples
Wireframes PrototypeOral com.
You
PM
Client
Desi
gner Dev
Partner
Stake
holder
Content
team
You
PM
Client
Desi
gner Dev
Partner
Stake
holder
Content
team

17. 5 things I changed
Frame the problem first
Use real content
Annotate
Expose it
Keep it proto

18. Frame the problem
Hey Clément, can you quickly
make a wireframe of this page?
Sure, all I need is to know:
• who is the user
• in what situation they are
• what they want to achieve
• what their current options are
• how it fits in the business strategy
• if there are any constraints

19. Use real content

20. Annotate

21. Expose it early/often
YOU TEAM
STAKE
HOLDER
USERS

22. Keep it proto

23. Activity Flow
(work in progress)
Activity on screens
User context:
(Inter)Actions
Thoughts
Environment
Time
Business context:
Actors
(Inter)Actions
Environment
Time
Content
Activity name User goalBusiness goal

24. Thank you!
What do you think?
“Prototyping - A
Practitioner’s Guide” by
Todd Zaki Warfel