The web enables many things. Also the ability to liquify your brand and its values. Brand building and establishing and securing are getting more and more important, as we are running towards a generation of multi digital output devices. This presentation creates awareness for that topic, explores how User Experience Design and Documentation can contribute to a cohesive brand experience across all channels.

1. The
Impact
of
User
Experience
Documenta6on
–
crea%ve
processes
used
to
develop
effec%ve
guidelines
for
brand
communica%on
and
user
experience
design.
from
a
brand’s
perspec/ve
Prepared
by
Marc-­‐Oliver
Gern,
Vancouver
©2010
1

2. Ques6on
is:
Does
User
Experience
Documenta%on
have
any
impact
on
the
brand?
2

3. This
presenta6on
was
part
of
a
workshop
I
gave
for
the
User
Experience
Design
Group
in
Vancouver
(VanUE),
BC
Canada,
Sept.
16th
2010.
This
work
is
licensed
under
a
Crea6ve
Commons
ATribu6on-­‐Noncommercial-­‐No
Deriva6ve
Works
2.5
Canada
License.
Permissions
beyond
the
scope
of
this
license
may
be
available
at
Marc-­‐Oliver.
hTp://www.vanue.com/calendar/14334934/
3

4. So,
in
the
next
40min.-­‐ish...
Insights
of
a
highly
crea%ve
interac%ve
Overview
of
agency
Neue
Digitale/
u
from
Some
outprct
for
Razorfish
h
my
resea chestra®
T-­‐Mobile
Or
Touching
on
o
n
Style
Guide line
Developm an
AD/IA
The
work
of
t
and
Documenent due
ta%on
Some
other
What ’s
D
crea%ve
work Brand
Mut igital
a%on?
Experience
Brand
Usert
BIG
thing
is
the
nex
4

5. So,
in
a
nutshell
1.
Brand
(Design)
and
UX
(Concept)
must
go
together
2.
Create
Adap6ve
Experiences
3.
Write
BUX
Guidelines
Design
–
Regulate
–
Inspire
5

6. Just
recently...
“ The
Agency
of
the
Future”
hSp://www.narrowdesign.com/future/
6

7. Some
highlights...
hSp://www.narrowdesign.com/future/
7

8. rand
M uta6on
D igital
B
8

9. Part
1
Crea6ng
Awareness
Currently,
new
digital
devices
are
pushing
brands
to
unfamiliar
environments.
“The
ux
design
process
itself
provides
a
huge
poten/al
to
contribute
posi/vely
to
a
brand,
across
all
media.”
9

10. LiTle
bit
about
me
10

11. Freelance
Work
11

12. 12

13. 13

14. 14

15. 15

16. Agency
Work
16

17. The
playground
–
Neue
Digitale
/
Razorfish
We
were
lead
agency
(digital)
for
adidas
Originals,
T-­‐Mobile,
Germanwings,
Olympus
Europe,
Yellostrom,
Audi,
...
17

18. My
main
responsibili6es
• Extending
the
overall
brand
experience
• Overseeing
digital
brand
ac%vi%es
• Developing
guidelines
to
establish
a
cohesive
brand
experiences
across
all
media
18

19. The
Dynamic
Duo
Experience
Brand
19

20. Time
spent
on
...
21%
No
Idea
(MeeEngs?) 30 %
Research
Which
went
into...
49 %
Client
Work
20

21. Gonna
talk
later
about
this:
21

22. Gonna
talk
later
about
this:
22

23. 23

24. 24

25. 25

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

33. 33

34. Branding
Tools
UX
Design
&
Documenta6on
Content
Design
Logic Marke6ng
Strategy
Strategy
Products
&
Services
Visual
Brand Strategic
Brand
Ethics Guidelines Values
Logo Package
Design
Corporate
Brand
Phylosophy Communica6on
Corporate
Guidelines Wording
Brand
Visions
Compe66ve
Posi6on
34

35. Your
brand
liquifies
in
a
waterfall
of
new
digital
touch
points.
NaEve
Apps Smartphones
APIs
Brand
Web
Tablets
Games
Terminals
Digital
TV
35

36. Difficult
to
keep
regularity
MulEplaQorm
Process
Design
Your
brand
gets
more
and
more
involved
into
processes
with
your
customers
that
need
to
be
guided
and
directed.
36

37. Ques6on
is:
Do you want to create mutiple processes for each and any upcoming
device? or Do you want to create guidelines for processes that can be
adopted on different platforms?
iPhone Blackberry Android
37

38. Hidden
costs
38

39. A
scenario....
Your
Brand/Website
39

40. 3
months
later...
New
brand
manager
comes
along
Your
Brand/Website
We
updated
some
brand
elements,
the
web
has
to
reflect...
40

41. 4
months
later...
Agency
put
a
new
designer
on
the
project
Your
Brand/Website
The
naviga/on
looks
so
outdated,
let’s
op/mize
it,
we
can
implement
XZY
technology...
41

42. 6
months
later...
UX
experts
gathered
new
insights
Your
Brand/Website
People
need
another
entry
concept.
Let’s
rearrange
the
HOME...
42

43. 7
months
later...
All
agree:
Let’s
open
a
shop.
Your
Brand/Website
The
elements
used
on
the
site
are
not
flexible
enough
-­‐
we
need
new
ones...
43

44. 12
months
later...
The
sales
dep
discovers
new
channels...Suddenly,
3
other
companies
work
on
your
brand
but
honestly;
have
no
idea...
Your
Brand/Website
Tablet
Smartphone
44

45. Possible
Reason
for
muta%on
Agency
• Time
• New
people
work
on
the
site
• Bad
Documenta/on Client
• Agile
and
Rapid
Prototyping
provide
no
/me
for
solid
• Mo/va/on
for
updates
declines
documenta/on (“FB
makes
it
so
much
easier
and
it
• Costs
-­‐
ROI? always
looks
good)
• CMS
is
too
complex
–
features
instead
of
solu/ons
• No
money/costs
Others...
• Technology
is
converging
(Na/ve
apps
vs.
Web
Apps,
etc.)
• Other
“experts”
start
working
on
the
brand
and
new
digital
outlets
45

46. New
Branding
Tools
UX
Design
&
Documenta6on
Design
Logic Marke6ng
Strategy
Content
Strategy
Products
&
Services
UX
Design
&
Documenta6on
Shif
UX
ore
Visual
Brand Strategic
Brand
towards
the
Ethics Guidelines Values center!
Logo Package
Design
Corporate
Brand
Phylosophy Communica6on
Corporate
Guidelines Wording
Brand
Visions
Compe66ve
Posi6on
46

47. The
new
dream
team
Your
Brand
Experience
(Concept)
Brand
(Design)
Brand
(Management)
47

48. The
ul6mate
goal:
To
design
every
connec%on
with
the
brand.
To
enable
interac%ve
regularity
and
(visual)
brand
consistency.
48

49. New
tools
Brand
User
Experience
Transferable
Meta
Guidelines
Design
Guidelines
?
Process Brand
Filter
Libraries UX
Archetypes Matrix
InteracEve
Adap6ve
Brand
Elements
Experiences Brand
consistent
InteracEon
Events
49

50. Some
Field Transi6onal
(Smartphone)
Research
Public
Sta6on
(Terminal)
Desktop
Computer
50

51. Some
Field
Research
Website,
Booking
Process Facebook,
Booking
Process
51

52. DELTA’s
360
degree
brand
experience
52

53. A&W
Digital
Experience
53

54. More
field
research
leads
to
a
key
finding:
54

55. Once
a
project
is
online,
the
real
crea6ve
process
starts.
Telus,
Styles
of
BuTons
55

56. Forms
56

57. Naviga6on
A
57

58. Naviga6on
B
58

59. NewsleTer
59

60. Fini
–
Part
1#
60

61. Part
2
Inspira6on
“You
as
a
UX/IA
designer
can
influence
any
design
decision.”
“You
have
to
handover
tools
that
help
people
who
later
work
on
your
site
to
accomplish
their
goals
within
the
ux
framework
you
developed.”
61

62. YelloEnergy–
Relaunch
and
BUX
Design
62

63. Main
Goals
for
AD/IA
Team
• Develop
interac%ve
brand
elements
(Naviga%on,
Layout,
BuSons,
Visual
Taxonomy,
...)
• Process
op%miza%on
• UX
and
online
brand
documenta%on
• ...
and
to
layout
the
“mental
model
for
the
brand
online”
63

64. At
the
beginning...
64

65. Results
65

66. Adap6ve
Layout
m1
m2
m2
m3
m1
m3
m2 m4
m5
m1
m1
m4 m3
m5
66

67. Adap6ve
Brand • Scalable
BuFons,
headlines,
Experience navigaAon
elements,
Images
• Standards
for
forms,
length
of
text,
navigaAon
(items,
size,
etc.)
1
• Flexible
Grid
and
guidelines
for
addiAonal
layouts
in
3
diverse
media
outlets,
screen
resoluAons
etc.
2
• Process
libraries,
element
and
modul
lists
4
67

68. Another
Example
Media
Queries
2nd
develop
this
1st
this
68

69. The
“ Tools”
we
created
Visual
Taxonomie
Doc
Brand
Filter
Matrix
Brand
Portal
Online
Stylecards,
Lists,
Design
PaTerns
69

70. Visual
Taxonomy
Doc
70

71. Brandfiltermatrix
online
71

72. Brandfiltermatrix
online
72

73. Stylecards
and
Modul
List
73

74. Distribu6on
74

75. T-­‐Mobile
Relaunch
&
Webstyleguide
75

76. Main
Goals/Challenges
for
AD/IA
Team
• Adapts
the
offline
style
guide
for
the
web
to
be
consistent
in
all
channel
communica6ons
across
all
markets
• [...]
and
delivers
a
branded
digital
framework
not
only
for
look
and
feel,
but
also
for
informa%on
architecture,
interac%on
design,
and
informa%on
design
• [...]
allows
for
quick
modular
design
introduc%on
for
NatCo
websites,
even
in
varying
roll-­‐out
and
requirement
capture
phases
• [...]
defines
a
framework
for
a
consumer-­‐centric
User
Experience
and
the
T-­‐Mobile
eBusiness
Strategy
Principles
uid elines
and
Develop
G nd
brand
• makes
the
T-­‐Mobile
brand
come
alive
online based
on
brand
values
a
uidelines.
commu nica6on
g
76

77. At
the
beginning...
77

78. The
output
78

79. The
output Concept
behind
it Process
Flows
Sitemap
Wireframes Templates Modul
List
and
Classes
79

80. The
output
Styleguide
Doc
ith
231
Now
w
Design
f
pages
ond
a s
UX
Guideline
80

81. The
output
81

82. How
we
started
82

83. How
we
started
83

84. How
we
started
84

85. How
we
started
85

86. The
next
9
months...
86

87. The
next
9
months...
87

88. Single
element
88

89. Varia6ons
89

90. Couple
more
varia6ons
90

91. Let’s
brake
it
down
liTle
bit
more...
91

92. Let’s
brake
it
down
liTle
bit
more...
92

93. Guidelines
for
UX
designers
• keep
the
flow
–
make
it
highly
goal-­‐driven
• move
people
to
take
ac/on
with
verbs
verbs
verbs
• create
processes/streams
whenever
possible
• limit
choices,
less
room
for
interpreta/ons
• use
the
most
accurate
and
effec/ve
words/sentences
• every
element
on
a
website
is
part
of
a
process.
• make
it
personal
93

94. Regula6ons
for
Wireframes
!"#$%&(& !"#$%&'&
!"#$%&)& !"#$%&)& !"#$%&)&
Design
–
Regulate
–
Inspire
• Make
everything
BIG
• The
rules
of
3
(Max
3
Calls-­‐to-­‐
Ac/on,
Max
3
Content
Moduls,
Max
3
Right
Hand
Column
Mod
on
sites
with
Forms
• Use
font
size
14+,
1
font
type
• Keep
every
element
within
1024x768
(not
for
Temp
“C”)
94

95. Regula6ons
for
Modules...
Design
–
Regulate
–
Inspire
• Right
Hand
Column
Moduls:
2nd
Hierarchy
of
Ac/on
(Group
!"#$%&'& !"#$%&'& elements)
• Module
headlines:
110
characters
max.
• 1
Call-­‐to-­‐ac/on
• 1
Text
link
• Conduct
copywriter
for
headlines
!"#$%&'&
95

96. Layout
Principles
for
buTons
AcEon
1 AcEon
1
Pro-­‐Ac6on
AcEon
2 AcEon
2
Passive
Re-­‐Ac6on
AcEon
3 AcEon
3
Guided
Selec6on
Based
on
size Based
on
color other
ATributes
96

97. What’s
next?
97

98. Thank
you.
“Poetry
is
when
you
make
new
things
familiar
and
familiar
things
new.”
Quote
unknown,
prob
Rory
Sutherland
98