Slides from my talk at Cambridge Usability Group on the 12th of May 2014
http://www.eventbrite.co.uk/e/designing-better-ux-deliverables-tickets-11542298325
Needing to produce some kind of deliverables throughout a project is inevitable: it might be user research reports to inform senior stakeholder; usability test results to communicate to developers; sketches and wireframes to pass on to web designers.
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.
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. Happy clown via Shutterstock
Only joking.
Thatâs not what this â¨
presentation will look like
4. If it did, I wouldnât blame youâ¨
if you looked like this
www.flickr.com/photos/dm-set/4200811849
9. It justâ¨
doesnât sell it
âSeriously?!â
âLazy!ââThis
lady just
doesnât
careâ
âThis will be 1 hour Iâll
never get back of my lifeâ
âIâm out of hereâ
âBoring!â
10. Today weâll look at...
1. A bit of background
2. Adapting to the reader, project & situation
3. Good examples
4. Guiding principles with DOs & DONâTs
5. Practice
6. Q & A
14. From tax applications to â¨
campaigns & large website redesigns
www.flickr.com/photos/9731367@N02/6988157282 www.flickr.com/photos/jpott/6214176279
30. It still is: the value of UX, â¨
collaboratively working & being involved from
start to finish is not a given everywhere
www.flickr.com/photos/donsolo/2888908733
38. Which can resultâ¨
in these kind of situations
www.flickr.com/photos/ansik/205993142
Not enough budget Brought in too late
Not enough time allocated
No budget
allocated
The client doesnât
prioritise it
Not included in
meetings
The company
doesnât prioritise it
Deliverables & timelines are
promised without consulting us
No direct contact
with the client
I just donât know how
to make it tangible
39. www.flickr.com/photos/jmsmith000/3169546564
â You need to understand where your peers in
other disciplines are coming from and communicate
the message of UX to them in terms they can
understand.â
- Pabini Gabriel-Petit, UX Matters
40. Where we work
Who the deliverable is for
Why we do it
How itâs going to be used
!
impacts how to approach it
42. www.flickr.com/photos/jmsmith000/3169546564
â You need to 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... â
- John Gibbardâ¨
Associate Planning Directorâ¨
Dareâ¨
43. www.flickr.com/photos/jmsmith000/3169546564
â A good UX deliverable clearly communicates its
purpose and what itâs trying to achieve. It anticipates
any questions / scenarios which may be posed. â
!
- Nick Haleyâ¨
Head of User Experienceâ¨
Guardian News and Media
44. www.flickr.com/photos/jmsmith000/3169546564
â Itâs not something 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. â
!
- Nick Haleyâ¨
Head of User Experienceâ¨
Guardian News and Media
47. www.flickr.com/photos/jmsmith000/3169546564
â In the past 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.
There needs to be 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. â
!
- Alex Matthewsâ¨
Head of Creative Technologyâ¨
BBH, London
48. www.flickr.com/photos/jmsmith000/3169546564
â Instead we should 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. â
!
- Alex Matthewsâ¨
Head of Creative Technologyâ¨
BBH, London
50. www.flickr.com/photos/helga/3952984450
I asked Alex: â¨
â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?â
53. www.flickr.com/photos/jmsmith000/3169546564
â Rule for my team: 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. â
!
- Nick Haleyâ¨
Head of User Experienceâ¨
Guardian News and Media
54. www.flickr.com/photos/jmsmith000/3169546564
â UX is about delivery, 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.
So if you're focussing on making pretty
deliverables, youâre focussing on the wrong thing. â
!
- Andy Buddâ¨
Co-founder & CEOâ¨
Clearleft
55. www.flickr.com/photos/jmsmith000/3169546564
â That being said, 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. â
!
- Andy Buddâ¨
Co-founder & CEOâ¨
Clearleft
57. www.flickr.com/photos/jmsmith000/3169546564
â Make them f****** appropriate
Practitioners love to pretend that they only need to
fart/cough near a client and they understand whatâs
inferred, but that's nonsense. â
- Jonty Sharplesâ¨
Design Directorâ¨
Albion
58. www.flickr.com/photos/jmsmith000/3169546564
â The truth is 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. â
- Jonty Sharplesâ¨
Design Directorâ¨
Albion
61. www.flickr.com/photos/jmsmith000/3169546564
â The best UX works collaboratively and considers
the whole customer journey/experience as well as
satisfying the business requirements in the context of
the overall digital strategy. â
- Stephanie Win-Hamerâ¨
Proposition Managerâ¨
Barclays
62. www.flickr.com/photos/jmsmith000/3169546564
â Good 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 should not be in the form of long
winded manuals, which often remain unread, and
become time-consuming to maintain. â
!
- Scott Byrne-Fraserâ¨
Creative Directorâ¨
BBC User Experience & Designâ¨
Sport & Live
63. www.flickr.com/photos/jmsmith000/3169546564
â A good piece of 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.â
- Steve Whittingtonâ¨
Design Director â¨
Dareâ¨
65. www.flickr.com/photos/jmsmith000/3169546564
â The best deliverables 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. â
- Emma Lawsonâ¨
Freelance Senior Copywriter â¨
& Former Head of Copyâ¨
101. ⢠make documents skimmable & easy to read
⢠remove fluff & get to the point
⢠pullout key points & actions
⢠add some delight to keep the reader engaged
01 Create something â¨
people want to read
104. www.flickr.com/photos/pinkpurse/5355919491
⢠aredthread is crucial & makes your work more engaging
⢠consistency in numbering & titles matters
⢠include page numbers, particularly if presenting over the
phone
03Make it easy
to follow & understand
106. www.flickr.com/photos/jmsmith000/3169546564
â Narrative is the key thing. 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).
It's only really when people tell stories that people
feel engaged and connected with how a UX
practitioner practices.
The ones that don't have narrative come across
as samey, lumpy and can make you assume the
practitioner lacks passion. â
- Be Kalerâ¨
Directorâ¨
Futureheads Recruitment â¨
107. www.flickr.com/photos/pinkpurse/5355919491
⢠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
⢠helpsavoid having to go back & adjust every instance later
⢠setup document templates that can be reused
⢠alloftheabove saves time & ensures you spend yours wisely
04Make things
reusable between projects
108. www.flickr.com/photos/pinkpurse/5355919491
⢠setup&automate document info (logos, page numbers, titles, version, file location, etc)
⢠ifsoftwareallows, place them on a shared canvas/ layer
⢠ensures they are on every page & no manual update is needed
⢠uselayers/sharedcanvases for consistent elements
⢠&for keeping your document organised (great if someone else needs to pick it up)
05Avoid unnecessary
updates & maintenance
110. www.flickr.com/photos/jmsmith000/3169546564
â UX is a critical part 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, it is vital 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. â
- Hannah Hilberyâ¨
Board Account Directorâ¨
Leo Burnettâ¨
111. www.flickr.com/photos/pinkpurse/5355919491
⢠helpsdraw the userâs eye & guide the reader to what matters
⢠useful for grouping information
⢠addsdelight & makes your documents a pleasure to the eye
⢠reallysimple & takes very little time
07Use a mixture of
colours, white space, fonts & styling
114. www.flickr.com/photos/pinkpurse/5355919491
⢠images tend to come in certain ratios
⢠typography needs to be big enough to read
⢠betrue - making your wireframes bigger, or modules smaller
wonât make the content fit in real life
02Donât create
unrealistic wireframes
117. www.flickr.com/photos/pinkpurse/5355919491
For summer a client has asked you to design & build an app
around whatâs happening in Cambridge. Theyâve shared what
theyâd like to include:
TheBRIEF
⢠About the app
⢠List of offers from stores
⢠List of events
⢠Map of Cambridge (with events etc)
⢠Latest news
⢠Login & registration
⢠Ability to share
118. www.flickr.com/photos/pinkpurse/5355919491
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 the app
⢠List of offers from stores
⢠List of events
⢠Map of Cambridge (with events etc)
⢠Latest news
⢠Login & registration
⢠Ability to share
120. Tools for sketching â¨
www.flickr.com/photos/snogglemedia/6254591338
www.flickr.com/photos/lucamascaro/4941101192
www.flickr.com/photos/lucamascaro/4941102534
www.flickr.com/photos/adactio/5441449605
121. www.flickr.com/photos/pinkpurse/5355919491
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 the app
⢠List of offers from stores
⢠List of events
⢠Map of Cambridge (with events etc)
⢠Latest news
⢠Login & registration
⢠Ability to share
124. Detailedâ¨IA & UX deliverablesHigh levelâ¨
Brandâ¨
Source: Mark Bell, Dare
Info or taskâ¨Aim of experience
Less formal UX deliverables
but more creatively led
UX led with more formal &
extensive IA & UX deliverables
126. Detailedâ¨IA & UX deliverablesHigh levelâ¨
Limitedâ¨Experience in visual design teamExtensiveâ¨
Less formal UX deliverables
but more creatively led
UX led with more formal &
extensive IA & UX deliverables
Source: Mark Bell, Dare
128. Detailedâ¨IA & UX deliverablesHigh levelâ¨
Brand⨠Info or taskâ¨Aim of experience
Limitedâ¨Experience in visual design teamExtensiveâ¨
Less formal UX deliverables
but more creatively led
UX led with moreformal&
extensiveIA&UXdeliverables
Source: Mark Bell, Dare
137. www.flickr.com/photos/jmsmith000/3169546564
I ďŹrmly believe 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. â
- Steve Whittingtonâ¨
Design Director â¨
Dareâ¨