Design visualisations are information products that communicate how new products or services will work. The way they do this is by showing the new product or service in action, using a combination of text and pictures to tell the story of the future user experience.

1. Visualising design
Darren Menachemson

2. the problem
Humans’ ability to make a rational
This is not decision is inversely proportional
to the complexity of the
your audience. information upon which the
decision is based.

3. the problem
“You can’t eat an elephant in one
So why do we bite”
do this? - Some Guy
“We need a smaller elephant.”
- Me
“That’s like 200 pages of high-
level design. Um, do you know
what high-level actually means?”
- Anon

4. Defining the “design” bit
Strategic design
Business architecture
Interaction design
Information architecture
Aesthetic

5. the solution
What is a visualisation?
Shows the future solution in operation
Scope is as big as it needs to be
Narrative is led by an experience set
Uses visual language

6. the solution
What is a visualisation
Shows the future solution in operation
Construction
complete
Deployment
complete
System
in use
Jan Jul Jan Jul
Time
Scope is as big as it needs to be
Narrative is led by an experience set
Uses visual language

7. the solution
What is a visualisation
Shows the future solution in operation
Scope is as big as it needs to be
people things channels process location Time & messaging Systems &
sequence tech
Narrative is led by an experience set
Uses visual language

8. the solution
What is a visualisation
Shows the future solution in operation
Scope is as big as it needs to be
Narrative is led by an experience set
Uses visual language

9. the solution
What is a visualisation
Shows the future solution in operation
Scope is as big as it needs to be
Narrative is led by an experience set
Uses visual language
From http://www.kwikpoint.com

10. Reuse
factor
Who are they for?
Bridesmaid
Execs – decision making dress
Stakeholders – consultations
Users – design walkthroughs
Other project teams – shared vision
Comms, training, etc, etc
Jeans

11. Some examples…
Simple one-pager…tells a story in a
single page, describing key people,
systems, processes, UI features,
business outcomes.
Don’t just tell the design decision
makers – show them, warts and all.
Get beyond the hype and the
confusion!

12. Some examples…
Simple one-pager…tells a story in a
single page, describing key people,
systems, processes, UI features,
business outcomes.
Don’t just tell the design decision
makers – show them, warts and all.
Get beyond the hype and the
confusion!

13. Some examples…
Full scenario spelling out
the design, including:
• High-level overview
• Persona
• Stepped process
• User impact lenses

14. Some examples…
Comic book, focussing
on a user experience.
From http://www.boxesandarrows.com

15. Some examples…
Hand drawn systems,
post-it messages and
play-actor actors…
nager Service user
Client ma
Lo-fi works too!
CRM
Register Inbox

16. How much detail
is enough?
A. As much as is
needed (sorry)
Simple, Somewhat complex, Very complex, highly detailed.
unambiguous. detailed, informative. Some Specialist analysis required.
understanding and analysis
required
Very simple Very complex

17. Principles for getting the right pitch…
• Show what you need ‘em to know
• Generate the right discussion
• Let them walk away with clarity
Discuss
business
outcome Abstract an Demonstrate a
interaction strategic risk
set eventuating
Show a
service desk
interaction
Examine the
user’s outcome
Show a
message flow
Highlight
a bit of UI

18. The process of visualising
Understand the context
Learn about the context, systems, users, and the desired
business outcomes
Find the senior sponsor
Understand the issues and solve them, review regularly,
escalate, add value
Pick the right brains
Facilitated workshops, interviews, project meetings,
documentation, user discovery
Partner with the team
Build strong relationships, share the work, build a sense
of contribution and ownership
Have a deadline
Get something out EARLY, and an event
Senior stakeholder commitment
review, iterate, repeat v. important

19. Visual ideas
Know your “style”
Branding, recognition, consistency
Gather your resources
(photos, icons, abstract people etc)
Have techniques for dealing with issues
(breakouts, post-its, zooms, relationships/groupings)

20. A visualisation workbench
Source images Edit images Layout visualisation
www.istockphoto.com Photoshop/Illustrator PowerPoint
Others:
• Adobe Flash
• Plasq Comic Life
• Etc

21. A visualiser
! ! The offspring of a talented BA, a passionate user
experience architect and a mad information designer
(process mapping + design)
! ! Very strong communicator (including storytelling,
facilitation)
! ! Able to facilitate and build relationships with senior
people
! An understanding of IT concepts and business
Hard to find, sometimes
hard to hold onto.
architecture
! Preferably people and project management
experience
! Ability to help lead and shape solutions, championing
the user and the business outcome

22. The “maybe we
should visualise
it” phase
The “Oh, hai, The “I’ve got to The “I’ve got real The “All these hard The “At last! The
nice to meet do a WHAT?” work to do and questions and nasty right conversation”
you” phase phase we’re drawing issues. I wish it were all phase
piccies?” phase still ambiguous!” phase

23. Drawbacks
Time-intensive
Specialist skills
Sounds “funky” until you see it
The fun doesn’t end after the event

24. What it avoids/provides
• Cultural/semantic misunderstanding
• “I didn’t think that’s what I agreed to”
• Early review at concept stage
• Contextualising issues
• Shaping the right solution

25. Try it…
Choose one of these
• Last meal you cooked…
• How you booked your last flight…
• Your last big shop at a supermarket…
Sketch up a rich visualisation showing the user experience,
process, channels, technology, data etc – either in-line or
layered (60 seconds)
Walk the person next to you through it (60 seconds)

26. Stories can bind complexity,
because stories are
fundamental to our
humanity.