TAKE THIS WORKSHOP ONLINE & GET 20% OFF WITH CODE 'SLIDESHARE'
https://school.uxfika.co/p/best-practice-for-ux-deliverables/?product_id=325265&coupon_code=SLIDESHARE
---
Slides from my 'Best practice for UX deliverables' workshop that I ran for Eventhandler in London on the 22nd of October.
http://www.eventhandler.co.uk/events/uxnightclass-uxdeliverables
---
Please note that for copyright reasons & client privacy the examples in this presentation are slightly different than from the workshop. The examples included are for reference only in terms of what I talked through in the 'Good examples' section.
-----
ABSTRACT
Whilst the work we do is not meant to be hanged on a wall for people to admire, nor is meant to be put in a drawer and forgotten about. Just as we make the products and services we design easy to use, the UX of UX is about communicating your thinking in a way that ensures that what you've defined is easy to understand for the reader. It's about adapting the work you do to the project in question and finding the right balance of making people want to look through your work whilst not spending unnecessary time on making it pretty.
Who is it for?
This workshop is suitable for anyone starting out in UX, or who's worked with it for a while but is looking to improve the way they present their work.
What you'll learn
In this hands on workshop we'll walk through real life examples of why the UX of UX deliverables matter. We'll cover how who the reader is effects the way we should present our work, both on paper and verbally, and how to ensure that the work you do adds value. Coming out of the workshop you'll have practical examples and hands on experience with:
// 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
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
1. B!"# pr$%#&%!
for UX deliverables
by Anna Dahlström | @annadahlstrom
www.flickr.com/photos/jmsmith000/3169546564
2. 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
3. O'() joking, that’s not
what this presentation will look like
www.flickr.com/photos/imagined_horizons/3669474121
4. If &# *&*, I wouldn’t blame you
if you looked like this
www.flickr.com/photos/dm-set/4200811849
10. 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
27. S&'%! #+!' I’ve made clients & internal
stakeholders & team members smile
www.flickr.com/photos/31878512@N06/4945216951/in/photostream
28. 6-0.+ that’s not what it’s about,
it was & continues to be one important aspect
www.flickr.com/photos/martinteschner/4569495912
29. C+$/p&-'&'. IA & UX internally as
well as with clients was a big part of my job
www.flickr.com/photos/ittybittiesforyou/3879998804
30. I# "#&(( &": the value of UX,
collaboratively working & being involved from
start to finish is not a given everywhere
www.flickr.com/photos/donsolo/2888908733
31. W+-!v!r our work is for,
we always need to sell it
www.flickr.com/photos/jox1989/5143301136
32. 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
33. 6$#’" w+$# we’re
going to be working on today
www.flickr.com/photos/suttonhoo22/2070700035
35. 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
36. I $"2!* a few people
in different roles what they considered
key with good UX deliverables
www.flickr.com/photos/helga/3952984450
37. “ 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
www.flickr.com/photos/jmsmith000/3169546564
38. “ 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
www.flickr.com/photos/jmsmith000/3169546564
39. “ 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$(!)
Head of User Experience
Guardian News and Media
www.flickr.com/photos/jmsmith000/3169546564
42. “ 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
www.flickr.com/photos/jmsmith000/3169546564
43. “ 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
www.flickr.com/photos/jmsmith000/3169546564
45. 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
47. 6&r* %-'%(0"&-':
what inhouse developers need is
different from if the build is outsourced
www.flickr.com/photos/ivanclow/4260762246
48. “ 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
www.flickr.com/photos/jmsmith000/3169546564
49. H-w!v!r, sometimes
we do need to hand things over
www.flickr.com/photos/martinteschner/4569495912
50. “ 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$(!)
Head of User Experience
Guardian News and Media
www.flickr.com/photos/jmsmith000/3169546564
51. “ 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
www.flickr.com/photos/jmsmith000/3169546564
52. “ 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
www.flickr.com/photos/jmsmith000/3169546564
53. F-r#+ %-'%(0"&-':
it’s not about pretty documents,
but about adding value
www.flickr.com/photos/ivanclow/4260762246
54. “ 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
www.flickr.com/photos/jmsmith000/3169546564
55. A" w! 2'-w,
not every client is the same
www.flickr.com/photos/martinteschner/4569495912
56. Fr-/ #w- *!$r -'!",
who have been both colleagues & clients
www.flickr.com/photos/jdhancock/4354438814
57. “ 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
www.flickr.com/photos/jmsmith000/3169546564
58. “ 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
www.flickr.com/photos/jmsmith000/3169546564
59. B0#, not every client
is UX minded
www.flickr.com/photos/martinteschner/4569495912
60. “ 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. ”
www.flickr.com/photos/jmsmith000/3169546564
- H$''$+ H&(b!r)
Board Account Director
Leo Burnett
61. O' #+! "0b4!%# -f keeping people’s attention
- a bit on building skills, presentations &
showing work
www.flickr.com/photos/carlosfpardo/6791950592
62. “ 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
www.flickr.com/photos/jmsmith000/3169546564
63. “ 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
www.flickr.com/photos/jmsmith000/3169546564
64. “ 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. ”
www.flickr.com/photos/jmsmith000/3169546564
- B! K$(!r
Director
Futureheads Recruitment
66. “ 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
www.flickr.com/photos/jmsmith000/3169546564
67. “ 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
www.flickr.com/photos/jmsmith000/3169546564
68. S- #r0!,
& so important
www.flickr.com/photos/jdhancock/4354438814
69. L$"# b0# '-# (!$"#,
we wouldn’t have anything
without content
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
70. “ 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
www.flickr.com/photos/jmsmith000/3169546564
73. 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
74. Ev!r) r!$*!r has given you their time.
Make the most of it & don’t waste it
www.flickr.com/photos/martinteschner/4569495912
75. 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
76. 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
www.flickr.com/photos/pinkpurse/5355919491
77. 6-0.+ it (mostly) should be,
it won’t always be YOU presenting YOUR work
www.flickr.com/photos/martinteschner/4569495912
78. 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
www.flickr.com/photos/pinkpurse/5355919491
79. 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)
www.flickr.com/photos/pinkpurse/5355919491
80. 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
www.flickr.com/photos/pinkpurse/5355919491
81. 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
www.flickr.com/photos/pinkpurse/5355919491
83. 01
•
•
•
•
Don’t be lazy
check spelling
ensure things are aligned
include spacing
always proof read
www.flickr.com/photos/pinkpurse/5355919491
84. 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
www.flickr.com/photos/pinkpurse/5355919491
85. 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
www.flickr.com/photos/pinkpurse/5355919491
117. F-0r 1!r%&"!" to work
through individually (or in pairs if preferred)
xxx
118. 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
www.flickr.com/photos/pinkpurse/5355919491
•
•
•
Latest news
Login & registration
Ability to share
119. 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
www.flickr.com/photos/pinkpurse/5355919491
•
•
•
Latest news
Login & registration
Ability to share
121. 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
www.flickr.com/photos/pinkpurse/5355919491
•
•
•
Uses iPhone, also has a tablet
First time in London
Novice iPhone user
Skeptical to sharing information
126. 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
www.flickr.com/photos/pinkpurse/5355919491
•
•
How do interactions work
Any key considerations
...and that it looks somewhat decent
129. 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
www.flickr.com/photos/pinkpurse/5355919491
Also consider...
• It needs to sell
• Be clear & concise
• Focus on key take aways
131. 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
www.flickr.com/photos/jmsmith000/3169546564
132. 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. ”
www.flickr.com/photos/jmsmith000/3169546564
- N&%2 E//!(
Strategic Partner
133. 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
www.flickr.com/photos/jmsmith000/3169546564
139. Appr-$%+, #--(" & 8*!(&#) depends
on your project, budget and time frame
www.flickr.com/photos/75905404@N00/7126146307
140. 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
141. I# $("- *!p!'*" -'
the skills & experiences of your team
www.flickr.com/photos/jpott/6214176279
142. H&.+ (!v!(
IA & UX deliverables
Less formal UX deliverables
but more creatively led
9#!'"&v!
Source: Mark Bell, Dare
D!#$&(!*
UX led with more formal &
extensive IA & UX deliverables
Experience in visual design team
L&/&#!*
143. A'* &f &#’" b!&'. b0&(#
externally or internally
www.flickr.com/photos/booleansplit/8393134563/
144. Br$'*
H&.+ (!v!(
Aim of experience
IA & UX deliverables
Less formal UX deliverables
but more creatively led
9#!'"&v!
Source: Mark Bell, Dare
I'f- -r #$"2
D!#$&(!*
UX led with more formal &
extensive IA & UX deliverables
Experience in visual design team
L&/&#!*
145. If %(&!'#" (-r "-/!-'! !("!) don’t get it,
there is generally something to be improved in
how we work with them & present our work
www.flickr.com/photos/martinteschner/4569495912