Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013

B!"# pr$%#&%!
for UX deliverables
by Anna Dahlström | @annadahlstrom

www.flickr.com/photos/jmsmith000/3169546564

My name is Anna and today we’re
going to talk about:
•How to adapt and sell your UX deliverable to the

reader (from clients, your team, in house and outsourced
developers)
•Guiding principles for creating good UX deliverables
(both low and high fidelity)
•Best practice for presentations, personas, user
journeys, flows, sitemaps, wireframes and other
documents
•Simple, low effort but big impact tools for improving
the visual presentation of your UX deliverables

O'() joking, that’s not
what this presentation will look like

www.flickr.com/photos/imagined_horizons/3669474121

If &# *&*, I wouldn’t blame you
if you looked like this

www.flickr.com/photos/dm-set/4200811849

,r"# -f $((, it makes you
want to do this

www.flickr.com/photos/dm-set/4200811849

I#’" really
hard to read

Nbr!$#+&'.
"p$%&'.
L$%2 -f #1#
&'*!'# &
$(&.'/!'#
T-- /0%+ #1#

I# %-'#$&'"
unnecessary detail

I#’" #+! %($""
*!"%r&p#&-'
w-r* f-r
w-r*

I#’" /3# (&2!() w+$#
I’(( "$) $')w$)

I# 40"#
doesn’t sell it

“S!r&-0"()?!”
“6&" w&(( b! 3 +-0r" I’((
'!v!r .!# b$%2 -f /) (&f!”

“B-r&'.!”
“6&"
($*) 40"#
*-!"'’#
%$r!”

“L5)!”

“I’/ -0# -f +!r!”

T-*$) w!’(( (--2 $#...
1. A bit of background
2. Adapting to the reader, project & situation
3. Guiding principles with DOs & DON’Ts
4. Good examples
Br!$2

5. Practice x 4
6. Surgery + Q & A

2007

I started working agency side

M0%+ faster pace
than what I was used to

www.flickr.com/photos/22032337@N02/7427822420

Fr-/ -'! to many clients
& projects, at the same time

www.flickr.com/photos/jorgeq82/4732700819

Fr-/ #7 applications to
campaigns & large website redesigns


www.flickr.com/photos/jpott/6214176279

S#r$#!.&%
thinking & communication
+

S!((&'.

my work became very important

Cr!$#&v!

approach to UX deliverables
+

Op!'

with less set templates

Cr!$#&v!, communicative, & visually pleasing
documents were a breeze for them

www.flickr.com/photos/stickkim/7491816206

6!) /$*!
clients & internal people smile


F-r /!...
it took time

www.flickr.com/photos/snugglepup/4320372145

A*v$'%&'. my
wireframing skills was easy

www.flickr.com/photos/martinaphotography/7051511189

L!"" "- with the
strategic experience design documents

www.flickr.com/photos/sshb/3831637764

I +$* #- find
my own style

www.flickr.com/photos/msittig/610572129

Cr&#&q0!, w$(2-#+r-0.+" & #&p"
was the best thing for my development

www.flickr.com/photos/deathtogutenberg/6784150372

6$# & 1p!r&/!'#&'.
until I found my style


S&'%! #+!' I’ve made clients & internal
stakeholders & team members smile

www.flickr.com/photos/31878512@N06/4945216951/in/photostream

6-0.+ that’s not what it’s about,
it was & continues to be one important aspect

www.flickr.com/photos/martinteschner/4569495912

C+$/p&-'&'. IA & UX internally as
well as with clients was a big part of my job

www.flickr.com/photos/ittybittiesforyou/3879998804

I# "#&(( &": the value of UX,
collaboratively working & being involved from
start to finish is not a given everywhere

www.flickr.com/photos/donsolo/2888908733

W+-!v!r our work is for,
we always need to sell it

www.ﬂickr.com/photos/jox1989/5143301136

H-w /0%+ we need to put into it
H-w we need to sell it
T- w+-/ we need to sell it
this all varies

6$#’" w+$# we’re
going to be working on today

www.flickr.com/photos/suttonhoo22/2070700035

2. A*$p#&'. to the
reader, project & situation

W+!r! we work
W+- the deliverable is for
W+) we do it
H-w it’s going to be used
impacts how to approach it

I $"2!* a few people
in different roles what they considered
key with good UX deliverables

www.flickr.com/photos/helga/3952984450

“ Y-0 '!!* #- produce a deliverable that meets the
needs of the audience it's intended for: wireframes
that communicate to designers, copy writers and
technical architects... Experience strategy documents
that matter to digital marketeers... ”
- J-+' G&bb$r*
Associate Planning Director
Dare


“ A .--* UX *!(&v!r$b(! clearly communicates its
purpose and what its trying to achieve. It anticipates
any questions / scenarios which may be posed. ”
- N&%2 H$(!)
Head of User Experience
Guardian News and Media


“ I#" '-# "-/!#+&'. created for the sake of it. One
of the reasons we don’t do wireframes anymore is
because of this. Instead my team creates html
prototypes which live in a browser. I see developers
refer to them all the time, without consulting the
team. ”
- N&%2 H$(!)


O'! immediate
conclusion can be made

www.flickr.com/photos/ivanclow/4260762246

C(&!'# "&*! is different from +$v&'. %(&!'#"

“ I' #+! p$"# I’d look for reams of documents going
into great detail, but as a result of the proliferation in
devices creating documentation is becoming too
cumbersome.
6!r! '!!*" #- b! some initial though into journeys,
personas and use cases for sure, but the need for
wireframes I think is reduced to identify the priority of
content/functionality. ”
- A(1 M$##+!w"
Head of Creative Technology
BBH, London

“ I'"#!$* w! "+-0(* be wireframing in code using a
responsive framework so that we can immediately see
how everything looks on all devices, and rapidly
change how an element and its associated behaviours
looks across all these devices. ”
- A(1 M$##+!w"
Head of Creative Technology
BBH, London


S!%-'* %-'%(0"&-':
approaches & what’s needed differ
between companies


I $"2!* A(1:

“Would you agree though that the above works a lot
better if the teams are located together and work
collaboratively, and that the need for actual
wireframes with annotations increase, if the
development happens elsewhere?”

www.flickr.com/photos/helga/3952984450

6&r* %-'%(0"&-':
what inhouse developers need is
different from if the build is outsourced


“ UX "+-0(* '-# be a hander over, it should be part
of the full development cycle from product inception,
through to the MVP and each iteration beyond. ”
- S%-## B)r'!-Fr$"!r
Creative Director
BBC User Experience & Design
Sport & Live


H-w!v!r, sometimes
we do need to hand things over


“ R0(! f-r /) #!$/: I don’t care what you create or
how you create it, but it better be high quality.
A deliverable which isn’t used to move the project
forward is a waste of time. ”
- N&%2 H$(!)


“ UX &" $b-0# *!(&v!r), not deliverables. So the
best design artefacts are the ones that take the least
time to convey the most insight and meaning.
Conversations are better than sketches, sketches are
better than prototypes and prototypes are better than
think specifications.
S- &f )-0'r! f-%0""&'. -' making pretty
deliverables, you're focussing on the wrong thing. ”
- A'*) B0**
Co-founder & CEO
Clearleft

“ 6$# b!&'. "$&*, there are VERY RARE occasions
when creating a nice looking deliverable like a concept
map—to explain a difficult concept around a large
organisation—can pay dividends. But this is the
exception rather than the rule. ”
- A'*) B0**
Co-founder & CEO
Clearleft


F-r#+ %-'%(0"&-':
it’s not about pretty documents,
but about adding value


“ M$2! #+!/ f ****** $ppr-pr&$#!
Practitioners love to pretend that they only need to
fart/cough near a client and they understand what’s
inferred, but that's nonsense.
6! #r0#+ &" you need to communicate to lots of
different people at lots of different levels. Make sure
your deliverables (at whatever fidelity) are appropriate
for your audience. ”
- J-'#) S+$rp(!"
Design Director
Albion

A" w! 2'-w,
not every client is the same


Fr-/ #w- *!$r -'!",
who have been both colleagues & clients

www.flickr.com/photos/jdhancock/4354438814

“ 6! b!"# UX w-r2" collaboratively and considers
the whole customer journey/experience as well as
satisfying the business requirements in the context of
the overall digital strategy.
6!) pr-*0%! clear and annotated customer
journeys, sitemaps and detailed wireframes with
complete user and functionality notes and rationale
behind the proposed solution. ”
- S#!p+$'&! W&'-H$/!r
Proposition Manager
Barclays

“ G--* UX should demonstrate enough for
stakeholders to understand the essential details, for
developers to be able to build with minimum
questions, and for other UX designers to pick up the
project.
The deliverable "+-0(* '-# b! in the form of long
winded manuals, which often remain unread, and
become time-consuming to maintain. ”
- S%-## B)r'!-Fr$"!r
Creative Director
BBC User Experience & Design
Sport & Live

B0#, not every client
is UX minded


“ UX &" $ %r&#&%$( p$r# of any project but you'll
often find that clients sometimes don't understand
what they are looking at and/or are just itching to get
to the "pretty pictures" bit.
From my point of view therefore, &# &" v&#$( that the UX
is super clear, with detailed annotations and notes
written in laymen's terms - and if it can be visually
engaging to keep their attention, all the better.
Personally I am a big fan of sketches, particularly in
the early stages. ”

- H$''$+ H&(b!r)
Board Account Director
Leo Burnett

O' #+! "0b4!%# -f keeping people’s attention
- a bit on building skills, presentations &
showing work

www.flickr.com/photos/carlosfpardo/6791950592

“ I' b0&(*&'. #+! "2&((" -f /) #!$/ I'm looking for
them to produce beautiful, usable deliverables that
communicate their content appropriately in context. In
practical terms I 'd also hope that they're editable and
adaptable enough to evolve within and without the
project. ”
- J-+' G&bb$r*
Associate Planning Director
Dare


“ Pr!"!'#$#&-'" $r! f-r pr!"!'#&'., not reading.
R!$* $'* $*$p# #- #+! $0*&!'%!. When you see
people who have written a speech word-for-word read
it out, it never connects with the audience.
S$) (!"". People can take away (at best) 3 things
from an hour long presentation. Make sure you focus
so that the three things you want to be taken away
are taken away. ”
- N&%2 E//!(
Strategic Partner
Mr. President

“ N$rr$#&v! &" #+! 2!) #+&'.. A person needs to be
able to tell a good story about their deliverables and
why they made decisions, who they worked with along
the way and how they were produced (and for whom).
I#'" -'() r!$(() when people tell stories that people
feel engaged and connected with how a UX
practitioner practices.
6! -'!" #+$# *-''# +$v! '$rr$#&v! come across
as samey, lumpy and can make you assume the
practitioner lacks passion. ”

- B! K$(!r
Director
Futureheads Recruitment

Sp!$2&'. -f storytelling,
this is what visual design has to say

www.flickr.com/photos/carlosfpardo/6791950592

“ A .--* p&!%! -f UX has a narrative and clearly
tells a story, or at least part of a story on a particular
journey. As a designer - everything I do and make is
communicating something to someone. Therefore a
critical deliverable to establish that principle are good
personas.
I '!!* #- 0'*!r"#$'* who has to get what out of
the thing I'm designing and I'm only satisfied a visual
has been executed well once I'm confident it's telling
the right story to the right person in the right way. ”
- S#!v! W+&##&'.#-'
Design Director
Dare

“ J0"# $" *!"&.' shouldn't be paint by numbers, UX
shouldn't be build by boxes. The boundaries between
good content creation, well considered user
experience and effective design and layout are blurred.
I 8r/() b!(&!v! that for one to be successful - all
the disciplines need to sing together. Hence, the single
most important deliverable isn't a physical one, rather
a common understanding - a pool of knowledge developed when these key disciplines work together. ”
- S#!v! W+&##&'.#-'
Design Director
Dare

S- #r0!,
& so important

www.flickr.com/photos/jdhancock/4354438814

L$"# b0# '-# (!$"#,
we wouldn’t have anything
without content

www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592

“ 6! b!"# *!(&v!r$b(!" for a writer evidence a really
close understanding of our content so that there's
flexibility in wireframes for example, to fit more or
less words. Components can be useful in this respect.
6!r!'" '-#+&'. w-r"! than having to fill space
when there's nothing to say. I also find personas
helpful for adjusting the copy in places, but only if
they're sufficiently different from each other. ”
- E//$ L$w"-'
Freelance Senior Copywriter
& Former Head of Copy

3. G0&*&'. principles
with DOs & DON’Ts

,r"#
THE DOs

www.flickr.com/photos/withassociates/3795212591

01
•
•
•
•

Create something
people want to read

make documents skimmable & easy to read
remove fluff & get to the point
pull out key points & actions
add some delight to keep the reader engaged

Ev!r) r!$*!r has given you their time.
Make the most of it & don’t waste it


02

Ensure the reader
knows what they are looking at

• always include page titles
• use visual cues for what you reference in annotations
• pull out or highlight what has changed from prior version

www.flickr.com/photos/pinkpurse/5355919491

03

Make it easy
to follow & understand

• a red thread is crucial & makes your work more engaging
• consistency in numbering & titles matters
• include page numbers, particularly if presenting over the
phone


6-0.+ it (mostly) should be,
it won’t always be YOU presenting YOUR work


04
•
•
•
•
•
•

Make things
reusable between projects

use stencils & avoid continuously creating from scratch
keep assets organised (icons, visual elements, assets for devices, social media etc.)
spend some time setting up elements properly
helps avoid having to go back & adjust every instance later
set up document templates that can be reused
all of the above saves time & ensures you spend yours wisely


05
•
•
•
•
•

Avoid unnecessary
updates & maintenance

set up & automate document info (logos, page numbers, titles, version, file location, etc)
if software allows, place them on a shared canvas/ layer
ensures they are on every page & no manual update is needed
use layers/ shared canvases for consistent elements
& for keeping your document organised (great if someone else needs to pick it up)


06

Adapt to the
reader, project & situation

• applies to verbal presentation & walkthrough
• as well as visual presentation & polish
• adjust your focus & detail - what’s most important to them


07
•
•
•
•

Use a mixture of
colours, white space, fonts & styling

helps draw the user’s eye & guide the reader to what matters
useful for grouping information
adds delight & makes your documents a pleasure to the eye
really simple & not takes very little time


A'*
THE DON’Ts

www.flickr.com/photos/withassociates/3795212591

01
•
•
•
•

Don’t be lazy

check spelling
ensure things are aligned
include spacing
always proof read


02

Don’t create
unrealistic wireframes

• images tend to come in certain ratios
• typography needs to be big enough to read
• be true - making your wireframes bigger, or modules smaller
won’t make the content fit in real life


03

Don’t spend
unnecessary time polishing

• work with simple tools to improve your documents
• spend your time where it adds the most value
• practice & re-use to save time


P!r"-'$

www.flickr.com/photos/cannedtuna/4852756417

M-r! personas & pen portraits
www.ux-lady.com/wp-content/uploads/2013/06/
portada-DIY-personas.jpg
http://rolandsmart.com/wp-content/uploads/
2012/12/involver_personas5.jpg
http://peterspannagle.com/wp-content/uploads/
2013/05/OBC-personas.png
http://ucgd.com.au/course/wp-content/uploads/
2013/03/personas-4.jpg
www.pinterest.com/pin/186195765816951260/
www.smartinsights.com/wp-content/uploads/
2012/06/social-media-personas-600x2223.jpg
http://dannyhearn.me/images/porfolio/speedy/
screen_02.jpg
www.flickr.com/photos/st3f4n/4387291247

C0"#-/!r 9p!r&!'%! M$p

www.flickr.com/photos/_dchris/8524084981

C0"#-/!r 9p!r&!'%! M$p

www.flickr.com/photos/brandonschauer/3363169836

M-r! customer experience maps
http://productpad.in/blog/visualizing-an-e-commercecustomer-experience-map
http://wireframes.linowski.ca/2010/04/blueprint
www.adaptivepath.com/ideas/the-anatomy-of-anexperience-map
http://adaptivepath.com/uploads/documents/
RailEurope_AdaptivePath_CXMap_FINAL.pdf
www.ux-lady.com/experience-maps-user-journeyand-more-exp-map-layout
www.ux-lady.com/wp-content/uploads/2013/03/
time-line-exp-map-2.jpg
http://sarahdrummond.files.wordpress.com/2009/09/
saywomenjourneychart.jpg

S2!#%+!"

www.flickr.com/photos/saucef/7184615025

www.flickr.com/photos/lucamascaro/4941101192

T--(" f-r "2!#%+&'.

www.flickr.com/photos/snogglemedia/6254591338

www.flickr.com/photos/lucamascaro/4941102534

www.flickr.com/photos/adactio/5441449605

U"!r :-w

www.flickr.com/photos/hperticarati/6930388917

U"!r 4-0r'!)

www.flickr.com/photos/kaioshin/8357538337

F(-w *&$.r$/

www.flickr.com/photos/davidex/6447938785

F(-w *&$.r$/

www.flickr.com/photos/vfsdigitaldesign/5432269858

M-r! user journeys, flows & flow diagrams
http://wireframes.linowski.ca/tag/user-flow
http://uirockstar.com/images/portfolio/flows/large/
user-flow.jpg
www.boxuk.com/upload/img/user_journey_large.png
http://wiki.linkedgov.org/images/thumb/c/ce/
Developers_search_user_journeys_2v1.png/900pxDevelopers_search_user_journeys_2v1.png


S&#!/$p"

www.flickr.com/photos/inpivic/5205918163/

S&#!/$p"

www.flickr.com/photos/kaioshin/8350138704

S&#!/$p"

www.flickr.com/photos/laurajo/3893912478

S&#!/$p"

www.flickr.com/photos/hungrybrowser/4545494926

M-r! sitemaps
www.resexpo.com/images/sitemap_full.gif
http://dribbble.com/shots/1016777-Sitemapping/
attachments/121386
www.pinterest.com/pin/193232640234502158
http://dribbble.com/shots/645915-Sitemap?
list=popular&offset=141
http://dribbble.com/shots/493411-Sitemap


S2!#%+!" + "%r!!' :-w

www.flickr.com/photos/v222000/7042284563

S2!#%+!" & "%r!!' :-w

www.flickr.com/photos/hperticarati/6930388917

M-r! visual flows & story boards
www.guerillagirl.de/wordpress/wp-content/uploads/
2011/09/mobile-storyboard.jpg
http://paultrow.com/images/storyboard_itv2.jpg
http://wireframes.linowski.ca/wp-content/themes/
darwin/images/full232.jpg
http://dribbble.com/shots/1087622-PrototypingPLANiT/attachments/135624


W&r!fr$/!"

www.flickr.com/photos/rohdesign/3307873748

W&r!fr$/!"

www.flickr.com/photos/hirt/5553421982/

W&r!fr$/!"

www.flickr.com/photos/activeside/2192411612

W&r!fr$/!"

www.flickr.com/photos/brandonschauer/5054715729

M-r! wireframes
http://bradfrostweb.com/blog/post/entertainmentweekly/
http://dribbble.com/shots/978422-Wireframes?
list=popular&offset=180
http://dribbble.com/shots/967188-User-flow-iphoneapp
http://uxmag.com/sites/default/files/uploads/
evanswireframing/globalcruise5.png


Pr$%#&%! time,
but first...

www.flickr.com/photos/suttonhoo22/2070700035

F-0r 1!r%&"!" to work
through individually (or in pairs if preferred)

xxx

6! BRIEF
For Christmas a client has asked you to design & build an app
around what’s happening in London. They’ve shared target
audience insight & requirements on what to include:
•
•
•
•

About information
Christmas focused map
Offers from stores
List of events

•
•
•

Latest news
Login & registration
Ability to share

01 SKETCHING
As a first draft to the client, sketch a few of the sections
of the app & include key points on interactions, flow
between screens & main points around your thinking.
•
•
•
•

About information
Christmas focused maps
Offers from stores
List of events

•
•
•

Latest news
Login & registration
Ability to share

02 PEN PORTRAIT
Congrats! The client loved it. The next task is to create a pen
portrait summarising who this is for & what we need to
know about them, as well as what captures who they are.
•
•

Tourist, German, [xx] years old,
[gender]
Interested in Christmas markets,
concerts, likes shopping


•
•
•

Uses iPhone, also has a tablet
First time in London
Novice iPhone user
Skeptical to sharing information

03 WIREFRAME
Bad news. An external company will build the app. Based on
your sketches do a wireframe on your computer of the
home screen. Make sure the following is clear to the reader:
•
•
•
•

Which screen they are looking at
What this view does - purpose, goals
What’s the content on the screen
Where does interactions take the user


•
•

How do interactions work
Any key considerations

...and that it looks somewhat decent

04 PRESENTATION
This is the big one, selling it to the stakeholders. The client
wants you to do an executive summary that you will be
presenting, but can also be passed around. It should include:
•
•
•
•

The Brief
The process
Who the target audience is
The solution


Also consider...
• It needs to sell
• Be clear & concise
• Focus on key take aways

01

“ Pr!"!'#$#&-'" $r! f-r pr!"!'#&'., not reading.
If the information that you want to put across requires
detailed paragraphs or chunky tables for analysis, or
swirly complex user journeys - deliver the information
in a different way. ”
- N&%2 E//!(
Strategic Partner
Mr. President


02

“ R!$* $'* $*$p# #- #+! $0*&!'%!. When you
see people who have written a speech word-for-word
read it out, it never connects with the audience.
That's not because the material is bad, it is because it
is not being constantly adapted to the ever-changing
context, mood, or understanding. Stand-up comedians
are great presenters as they adapt and draw in their
audience. ”


- N&%2 E//!(
Strategic Partner

03

“ S$) (!"". When you are given a stage to show-off
your knowledge, the temptation is to waffle, digress
or delve far too deep into topics.
People can take away (at best) 3 things from an hour
long presentation. Make sure you focus so that the
three things you want to be taken away are taken
away. ”
- N&%2 E//!(
Strategic Partner
Mr. President


A') questions?

www.flickr.com/photos/perolofforsberg/6691744587

A') w-r2 you would like
to get feedback on?

www.flickr.com/photos/kalexanderson/5984187563

A f!w
final words...


Appr-$%+, #--(" & 8*!(&#) depends
on your project, budget and time frame


Br$'*

H&.+ (!v!(

Less formal UX deliverables
but more creatively led

Source: Mark Bell, Dare

Aim of experience

IA & UX deliverables

I'f- -r #$"2

D!#$&(!*

UX led with more formal &
extensive IA & UX deliverables

I# $("- *!p!'*" -'
the skills & experiences of your team

www.flickr.com/photos/jpott/6214176279

H&.+ (!v!(



9#!'"&v!


D!#$&(!*


Experience in visual design team

L&/&#!*

A'* &f &#’" b!&'. b0&(#
externally or internally

www.ﬂickr.com/photos/booleansplit/8393134563/

Br$'*

H&.+ (!v!(

Aim of experience



9#!'"&v!


I'f- -r #$"2

D!#$&(!*


Experience in visual design team

L&/&#!*

If %(&!'#" (-r "-/!-'! !("!) don’t get it,
there is generally something to be improved in
how we work with them & present our work


A" (-'. $"
you add value

www.flickr.com/photos/stevendepolo/4582437563

R!/!/b!r,
this is how I started out

www.flickr.com/photos/sshb/3831637764

L!$r' from others
& stick to the DOs & DON’Ts

www.flickr.com/photos/deathtogutenberg/6784150372

F-'#" & colours go a (-'. w$).

A'* have fun,
it will come across

www.flickr.com/photos/imagined_horizons/3669474121

6$'2 )-0
@annadahlstrom | anna.dahlstrom@gmail.com
www.annadahlstrom.com

Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013

More Related Content

What's hot

Viewers also liked

Similar to Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013

More from Anna Dahlström

Recently uploaded

Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013