Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Impact of Brand User Experience Design

3,850 views

Published on

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.

The Impact of Brand User Experience Design

  1. 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. 2. Ques6on  is:  Does  User  Experience   Documenta%on  have  any  impact on  the  brand? 2
  3. 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. 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. 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. 6. Just  recently...  “ The  Agency  of  the  Future” hSp://www.narrowdesign.com/future/ 6
  7. 7. Some  highlights... hSp://www.narrowdesign.com/future/ 7
  8. 8. rand  M uta6on D igital  B 8
  9. 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. 10. LiTle  bit  about  me 10
  11. 11. Freelance  Work 11
  12. 12. 12
  13. 13. 13
  14. 14. 14
  15. 15. 15
  16. 16. Agency  Work 16
  17. 17. The  playground  –  Neue  Digitale  /  Razorfish We  were  lead  agency  (digital)  for  adidas   Originals,  T-­‐Mobile,  Germanwings,  Olympus   Europe,  Yellostrom,  Audi,  ...   17
  18. 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. 19. The  Dynamic  Duo Experience Brand 19
  20. 20. Time  spent  on  ... 21% No  Idea (MeeEngs?) 30 % Research Which  went  into... 49 % Client  Work 20
  21. 21. Gonna  talk  later   about  this: 21
  22. 22. Gonna  talk  later   about  this: 22
  23. 23. 23
  24. 24. 24
  25. 25. 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. 29
  30. 30. 30
  31. 31. 31
  32. 32. 32
  33. 33. 33
  34. 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. 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. 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. 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. 38. Hidden  costs 38
  39. 39. A  scenario.... Your  Brand/Website 39
  40. 40. 3  months  later... New  brand  manager  comes  along Your  Brand/Website We  updated  some   brand  elements,  the   web  has  to  reflect... 40
  41. 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. 42. 6  months  later... UX  experts  gathered  new  insights Your  Brand/Website People  need  another   entry  concept.  Let’s   rearrange  the  HOME... 42
  43. 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. 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. 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. 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. 47. The  new  dream  team Your  Brand Experience (Concept) Brand (Design) Brand   (Management) 47
  48. 48. The  ul6mate  goal: To  design  every  connec%on  with  the  brand.   To  enable  interac%ve  regularity  and  (visual)   brand  consistency. 48
  49. 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. 50. Some  Field Transi6onal  (Smartphone) Research Public  Sta6on  (Terminal) Desktop  Computer 50
  51. 51. Some  Field Research Website,  Booking  Process Facebook,  Booking  Process 51
  52. 52. DELTA’s  360  degree brand  experience 52
  53. 53. A&W  Digital  Experience 53
  54. 54. More  field  research  leads  to  a  key  finding: 54
  55. 55. Once  a  project  is  online,  the  real  crea6ve   process  starts. Telus,  Styles  of  BuTons 55
  56. 56. Forms 56
  57. 57. Naviga6on  A 57
  58. 58. Naviga6on  B 58
  59. 59. NewsleTer 59
  60. 60. Fini  –  Part  1# 60
  61. 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. 62. YelloEnergy–  Relaunch  and  BUX  Design 62
  63. 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. 64. At  the  beginning... 64
  65. 65. Results 65
  66. 66. Adap6ve  Layout m1 m2 m2 m3 m1 m3 m2 m4 m5 m1 m1 m4 m3 m5 66
  67. 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. 68. Another  Example Media  Queries 2nd  develop  this 1st  this 68
  69. 69. The  “ Tools”  we  created Visual  Taxonomie  Doc Brand  Filter  Matrix Brand  Portal  Online Stylecards,  Lists,   Design  PaTerns 69
  70. 70. Visual  Taxonomy  Doc 70
  71. 71. Brandfiltermatrix  online 71
  72. 72. Brandfiltermatrix  online 72
  73. 73. Stylecards  and  Modul  List 73
  74. 74. Distribu6on 74
  75. 75. T-­‐Mobile  Relaunch  &  Webstyleguide 75
  76. 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. 77. At  the  beginning... 77
  78. 78. The  output 78
  79. 79. The  output Concept  behind  it Process  Flows Sitemap Wireframes Templates Modul  List  and  Classes 79
  80. 80. The  output Styleguide  Doc ith  231     Now  w  Design f pages  ond a s UX  Guideline 80
  81. 81. The  output 81
  82. 82. How  we  started 82
  83. 83. How  we  started 83
  84. 84. How  we  started 84
  85. 85. How  we  started 85
  86. 86. The  next  9  months... 86
  87. 87. The  next  9  months... 87
  88. 88. Single  element 88
  89. 89. Varia6ons 89
  90. 90. Couple  more  varia6ons 90
  91. 91. Let’s  brake  it  down  liTle  bit  more... 91
  92. 92. Let’s  brake  it  down  liTle  bit  more... 92
  93. 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. 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. 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. 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. 97. What’s  next? 97
  98. 98. Thank  you. “Poetry  is  when  you  make  new  things   familiar  and  familiar  things  new.” Quote  unknown,  prob  Rory  Sutherland 98

×