SlideShare a Scribd company logo
1 of 98
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
Ques6on	
  is:	
  Does	
  User	
  Experience	
  
Documenta%on	
  have	
  any	
  impact
on	
  the	
  brand?




                                                   2
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
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
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
Just	
  recently...	
  “ The	
  Agency	
  of	
  the	
  Future”




hSp://www.narrowdesign.com/future/


                                                                 6
Some	
  highlights...




hSp://www.narrowdesign.com/future/


                                     7
rand	
  M uta6on
D igital	
  B




                                8
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
LiTle	
  bit	
  about	
  me




                              10
Freelance	
  Work




                    11
12
13
14
15
Agency	
  Work




                 16
The	
  playground	
  –	
  Neue	
  Digitale	
  /	
  Razorfish




 We	
  were	
  lead	
  agency	
  (digital)	
  for	
  adidas	
  
 Originals,	
  T-­‐Mobile,	
  Germanwings,	
  Olympus	
  
 Europe,	
  Yellostrom,	
  Audi,	
  ...	
  



                                                                  17
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
The	
  Dynamic	
  Duo

                        Experience


    Brand




                                     19
Time	
  spent	
  on	
  ...



                                21%
                               No	
  Idea
                             (MeeEngs?)                 30    %
                                                        Research
                                                                   Which	
  went	
  into...




                                       49           %
                                       Client	
  Work




                                                                                              20
Gonna	
  talk	
  later	
  
  about	
  this:




                             21
Gonna	
  talk	
  later	
  
  about	
  this:




                             22
23
24
25
26
27
28
29
30
31
32
33
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
Your	
  brand	
  liquifies	
  in	
  a	
  waterfall	
  of	
  new	
  
digital	
  touch	
  points.
                                      NaEve
                                      Apps             Smartphones
                    APIs




                                    Brand
          Web
                                                             Tablets




                                      Games

                  Terminals

                                                   Digital	
  TV




                                                                       35
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
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
Hidden	
  costs




                  38
A	
  scenario....

                    Your	
  Brand/Website




                                            39
3	
  months	
  later...
New	
  brand	
  manager	
  comes	
  along
                         Your	
  Brand/Website



                                                  We	
  updated	
  some	
  
                                                 brand	
  elements,	
  the	
  
                                                 web	
  has	
  to	
  reflect...




                                                                                 40
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
6	
  months	
  later...
UX	
  experts	
  gathered	
  new	
  insights
                           Your	
  Brand/Website



                                                    People	
  need	
  another	
  
                                                     entry	
  concept.	
  Let’s	
  
                                                   rearrange	
  the	
  HOME...




                                                                                      42
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
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
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
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
The	
  new	
  dream	
  team
                              Your	
  Brand
                                              Experience
                                               (Concept)


                  Brand
                 (Design)




                                                    Brand	
  
                                                 (Management)




                                                                47
The	
  ul6mate	
  goal:

To	
  design	
  every	
  connec%on	
  with	
  the	
  brand.	
  
To	
  enable	
  interac%ve	
  regularity	
  and	
  (visual)	
  
brand	
  consistency.




                                                                  48
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
Some	
  Field                   Transi6onal	
  (Smartphone)

 Research




Public	
  Sta6on	
  (Terminal)




                                                               Desktop	
  Computer




                                                                                     50
Some	
  Field
Research

Website,	
  Booking	
  Process   Facebook,	
  Booking	
  Process




                                                                   51
DELTA’s	
  360	
  degree
brand	
  experience




                           52
A&W	
  Digital	
  Experience




                               53
More	
  field	
  research	
  leads	
  to	
  a	
  key	
  finding:




                                                                 54
Once	
  a	
  project	
  is	
  online,	
  the	
  real	
  crea6ve	
  
process	
  starts.




        Telus,	
  Styles	
  of	
  BuTons




                                                                      55
Forms




        56
Naviga6on	
  A




                 57
Naviga6on	
  B




                 58
NewsleTer




            59
Fini	
  –	
  Part	
  1#




                          60
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
YelloEnergy–	
  Relaunch	
  and	
  BUX	
  Design




                                                   62
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
At	
  the	
  beginning...




                            64
Results




          65
Adap6ve	
  Layout
                     m1
                     m2



                                         m2
                          m3
                                    m1




                                         m3




     m2                                  m4

                                         m5
m1

                               m1




     m4         m3

     m5
                                              66
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
Another	
  Example
                                              Media	
  Queries
                     2nd	
  develop	
  this
                                                             1st	
  this




                                                                           68
The	
  “ Tools”	
  we	
  created
                                      Visual	
  Taxonomie	
  Doc




                                                                   Brand	
  Filter	
  Matrix
Brand	
  Portal	
  Online




          Stylecards,	
  Lists,	
  
          Design	
  PaTerns




                                                                                               69
Visual	
  Taxonomy	
  Doc




                            70
Brandfiltermatrix	
  online




                             71
Brandfiltermatrix	
  online




                             72
Stylecards	
  and	
  Modul	
  List




                                     73
Distribu6on




              74
T-­‐Mobile	
  Relaunch	
  &	
  Webstyleguide




                                               75
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
At	
  the	
  beginning...




                            77
The	
  output




                78
The	
  output   Concept	
  behind	
  it   Process	
  Flows




Sitemap




Wireframes      Templates                              Modul	
  List	
  and	
  Classes




                                                                                         79
The	
  output
                      Styleguide	
  Doc




                   ith	
  231	
   	
  
        Now	
  w 	
  Design
                   f
        pages	
  ond
                 a           s
         UX 	
  Guideline




                                          80
The	
  output




                81
How	
  we	
  started




                       82
How	
  we	
  started




                       83
How	
  we	
  started




                       84
How	
  we	
  started




                       85
The	
  next	
  9	
  months...




                                86
The	
  next	
  9	
  months...




                                87
Single	
  element




                    88
Varia6ons




            89
Couple	
  more	
  varia6ons




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




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




                                                          92
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
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
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
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
What’s	
  next?




                  97
Thank	
  you.




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




                                                                                             98

More Related Content

What's hot

How Invision Help Designers
How Invision Help DesignersHow Invision Help Designers
How Invision Help Designers
Ahmed Badran
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
Marcelo Graciolli
 

What's hot (20)

Ux design process&docmenteiton
Ux design process&docmenteitonUx design process&docmenteiton
Ux design process&docmenteiton
 
Experience Design Framework
Experience Design FrameworkExperience Design Framework
Experience Design Framework
 
Product Management in the shadow of User Experience creation Process
Product Management in the shadow of User Experience creation ProcessProduct Management in the shadow of User Experience creation Process
Product Management in the shadow of User Experience creation Process
 
Five parallel design sprints. What possibly can go wrong?
Five parallel design sprints. What possibly can go wrong?Five parallel design sprints. What possibly can go wrong?
Five parallel design sprints. What possibly can go wrong?
 
Storytelling: Selling a brilliant idea like a rock star
Storytelling: Selling a brilliant idea like a rock starStorytelling: Selling a brilliant idea like a rock star
Storytelling: Selling a brilliant idea like a rock star
 
How Invision Help Designers
How Invision Help DesignersHow Invision Help Designers
How Invision Help Designers
 
The stage of eCommerce implementation
The stage of eCommerce implementationThe stage of eCommerce implementation
The stage of eCommerce implementation
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
 
How To Break Into UX: What Is a UX Design Hiring Manager Thinking & Looking For?
How To Break Into UX: What Is a UX Design Hiring Manager Thinking & Looking For?How To Break Into UX: What Is a UX Design Hiring Manager Thinking & Looking For?
How To Break Into UX: What Is a UX Design Hiring Manager Thinking & Looking For?
 
GHA Lean UX presentation
GHA Lean UX presentationGHA Lean UX presentation
GHA Lean UX presentation
 
Prototyping for Interaction Design
Prototyping for Interaction DesignPrototyping for Interaction Design
Prototyping for Interaction Design
 
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
Rapid Prototyping  with Axure RP  Part 3 – Using Axure for Usability Testing Rapid Prototyping  with Axure RP  Part 3 – Using Axure for Usability Testing
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
Intro to UX Development Process
Intro to UX Development ProcessIntro to UX Development Process
Intro to UX Development Process
 
Balancing UX Consistency and Developer Productivity in a Design System
Balancing UX Consistency and Developer Productivity in a Design SystemBalancing UX Consistency and Developer Productivity in a Design System
Balancing UX Consistency and Developer Productivity in a Design System
 
Integrating Design and Development in Your Workflow
Integrating Design and Development in Your WorkflowIntegrating Design and Development in Your Workflow
Integrating Design and Development in Your Workflow
 
FLEXperience
FLEXperienceFLEXperience
FLEXperience
 
Skye Sant - NEW FEATURE case study (Sr UX)
Skye Sant - NEW FEATURE case study (Sr UX)Skye Sant - NEW FEATURE case study (Sr UX)
Skye Sant - NEW FEATURE case study (Sr UX)
 
Design Systems Operations
Design Systems OperationsDesign Systems Operations
Design Systems Operations
 
UX Presentation (1)
UX Presentation (1)UX Presentation (1)
UX Presentation (1)
 

Similar to The Impact of Brand User Experience Design

Piktochart App- infographics creator app
Piktochart App- infographics creator appPiktochart App- infographics creator app
Piktochart App- infographics creator app
Ai Ching
 
David Carruthers' portfolio
David Carruthers' portfolioDavid Carruthers' portfolio
David Carruthers' portfolio
David Carruthers
 
10 Things to know about experience design
10 Things to know about experience design10 Things to know about experience design
10 Things to know about experience design
Aynne Valencia
 
Prateek Agarwal Portfolio
Prateek Agarwal PortfolioPrateek Agarwal Portfolio
Prateek Agarwal Portfolio
Prateek Agarwal
 

Similar to The Impact of Brand User Experience Design (20)

UX for Startups - Nasscom Product Conclave
UX for Startups - Nasscom Product ConclaveUX for Startups - Nasscom Product Conclave
UX for Startups - Nasscom Product Conclave
 
Piktochart App- infographics creator app
Piktochart App- infographics creator appPiktochart App- infographics creator app
Piktochart App- infographics creator app
 
Mental Models, Service Design & The Problem With Convergence
Mental Models, Service Design & The Problem With ConvergenceMental Models, Service Design & The Problem With Convergence
Mental Models, Service Design & The Problem With Convergence
 
Stakeholder Persuasion - How to quantify your gut feeling
Stakeholder Persuasion - How to quantify your gut feelingStakeholder Persuasion - How to quantify your gut feeling
Stakeholder Persuasion - How to quantify your gut feeling
 
The Integrated Production
The Integrated ProductionThe Integrated Production
The Integrated Production
 
P-Camp 2008 - PM &amp; UX - Meghan Ede 2
P-Camp 2008 - PM &amp; UX - Meghan Ede 2P-Camp 2008 - PM &amp; UX - Meghan Ede 2
P-Camp 2008 - PM &amp; UX - Meghan Ede 2
 
Mountain Stream Group Overview Presentation
Mountain Stream Group Overview PresentationMountain Stream Group Overview Presentation
Mountain Stream Group Overview Presentation
 
Mountain Stream Group Overview Presentation
Mountain Stream Group Overview PresentationMountain Stream Group Overview Presentation
Mountain Stream Group Overview Presentation
 
David Carruthers' portfolio
David Carruthers' portfolioDavid Carruthers' portfolio
David Carruthers' portfolio
 
User Experience 2: Talk@Stabilo
User Experience 2: Talk@StabiloUser Experience 2: Talk@Stabilo
User Experience 2: Talk@Stabilo
 
iEnableU
iEnableUiEnableU
iEnableU
 
MDW NY | Matt Howell_New Teams and Process for Making Digital Work
MDW NY | Matt Howell_New Teams and Process for Making Digital WorkMDW NY | Matt Howell_New Teams and Process for Making Digital Work
MDW NY | Matt Howell_New Teams and Process for Making Digital Work
 
10 Things to know about experience design
10 Things to know about experience design10 Things to know about experience design
10 Things to know about experience design
 
Prateek Agarwal Portfolio
Prateek Agarwal PortfolioPrateek Agarwal Portfolio
Prateek Agarwal Portfolio
 
IA Summit 2011 Redux in Tokyo
IA Summit 2011 Redux in TokyoIA Summit 2011 Redux in Tokyo
IA Summit 2011 Redux in Tokyo
 
Symmetri Marketing Manufacturing Expertise
Symmetri Marketing Manufacturing ExpertiseSymmetri Marketing Manufacturing Expertise
Symmetri Marketing Manufacturing Expertise
 
20070328 Information Management
20070328 Information Management20070328 Information Management
20070328 Information Management
 
What's Next for UX - Refresh Chicago
What's Next for UX - Refresh ChicagoWhat's Next for UX - Refresh Chicago
What's Next for UX - Refresh Chicago
 
Yvan Teypaz Portfolio2009 Gb
Yvan Teypaz Portfolio2009 GbYvan Teypaz Portfolio2009 Gb
Yvan Teypaz Portfolio2009 Gb
 
Defrag Keynote: Social Computing and the Enterprise-Bridging the Gap
Defrag Keynote: Social Computing and the Enterprise-Bridging the GapDefrag Keynote: Social Computing and the Enterprise-Bridging the Gap
Defrag Keynote: Social Computing and the Enterprise-Bridging the Gap
 

More from Marc-Oliver Gern

UX Tools for Agile Teams – The Job Table
UX Tools for Agile Teams – The Job TableUX Tools for Agile Teams – The Job Table
UX Tools for Agile Teams – The Job Table
Marc-Oliver Gern
 
Digital Branding for Hydro Company
Digital Branding for Hydro CompanyDigital Branding for Hydro Company
Digital Branding for Hydro Company
Marc-Oliver Gern
 
Digital Branding for an Airline
Digital Branding for an AirlineDigital Branding for an Airline
Digital Branding for an Airline
Marc-Oliver Gern
 
Corporate Design, Brand Management
Corporate Design, Brand ManagementCorporate Design, Brand Management
Corporate Design, Brand Management
Marc-Oliver Gern
 

More from Marc-Oliver Gern (16)

Remote, unmoderated usability and user testing.
Remote, unmoderated usability and user testing.Remote, unmoderated usability and user testing.
Remote, unmoderated usability and user testing.
 
UX Tools for Agile Teams – The Job Table
UX Tools for Agile Teams – The Job TableUX Tools for Agile Teams – The Job Table
UX Tools for Agile Teams – The Job Table
 
Mobile Brand Experiences – Key Findings
Mobile Brand Experiences – Key FindingsMobile Brand Experiences – Key Findings
Mobile Brand Experiences – Key Findings
 
iPad App Development, Concept Stage
iPad App Development, Concept StageiPad App Development, Concept Stage
iPad App Development, Concept Stage
 
Twitter Task Flow Table
Twitter Task Flow TableTwitter Task Flow Table
Twitter Task Flow Table
 
The Future of Travelling: Top Social Media Options for Tour Operators
The Future of Travelling: Top Social Media Options for Tour OperatorsThe Future of Travelling: Top Social Media Options for Tour Operators
The Future of Travelling: Top Social Media Options for Tour Operators
 
Digital Branding for Hydro Company
Digital Branding for Hydro CompanyDigital Branding for Hydro Company
Digital Branding for Hydro Company
 
Digital Branding
Digital BrandingDigital Branding
Digital Branding
 
Digital Branding for an Airline
Digital Branding for an AirlineDigital Branding for an Airline
Digital Branding for an Airline
 
A dynamic Screensaver for Airlines 2
A dynamic Screensaver for Airlines 2A dynamic Screensaver for Airlines 2
A dynamic Screensaver for Airlines 2
 
A dynamic Screensaver for Airlines.
A dynamic Screensaver for Airlines.A dynamic Screensaver for Airlines.
A dynamic Screensaver for Airlines.
 
Social Media Playbook
Social Media PlaybookSocial Media Playbook
Social Media Playbook
 
Digital Portfolio Marc Oliver
Digital Portfolio Marc OliverDigital Portfolio Marc Oliver
Digital Portfolio Marc Oliver
 
Strategic Brand Development
Strategic Brand DevelopmentStrategic Brand Development
Strategic Brand Development
 
Brand Identity, Example for 1st Design Session
Brand Identity, Example for 1st Design SessionBrand Identity, Example for 1st Design Session
Brand Identity, Example for 1st Design Session
 
Corporate Design, Brand Management
Corporate Design, Brand ManagementCorporate Design, Brand Management
Corporate Design, Brand Management
 

The Impact of Brand User Experience Design

  • 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
  • 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
  • 12. 12
  • 13. 13
  • 14. 14
  • 15. 15
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 86. The  next  9  months... 86
  • 87. The  next  9  months... 87
  • 89. Varia6ons 89
  • 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
  • 98. Thank  you. “Poetry  is  when  you  make  new  things   familiar  and  familiar  things  new.” Quote  unknown,  prob  Rory  Sutherland 98