Truly Responsive Design Means Aligning to Business and User Goals

Perhaps the greatest sea-change in the industry since the “Web 2.0″ meme, Responsive Design has been the unavoidable theme of the web industry in 2011 and 2012. But too much of the focus in responsive design has been on the mechanics: media queries, responsive images, javascript polyfills, and techniques for progressive enhancement.

Not enough attention has been paid to how responsive sites and applications should be designed to take into account the needs and contexts of users. In short, we’ve been designing sites that respond to the needs (and capabilities) of *browsers* and *devices* rather than the desires and contexts of users.

In this talk I cover strategies and processes you can follow which help ensure your web applications are truly responsive to business goals and user needs, not just device capabilities.

Given at Design 4 Drupal 2013 in Cambridge MA

Transcript

1. #d4dBoston  #trulyresponsive     @jeckman   TRULY RESPONSIVE DESIGN John Eckman
2. #d4dBoston  #trulyresponsive     @jeckman   About ISITE Design Digital Experience Agency About the Agency Founded in 1997 70+ full time employees Boston & Portland, OR Customers 250+ clients including Siemens, Genzyme, Nike, Zipcar, Intel, Columbia Sportswear, New England Biolabs, Harvard Kennedy, Wharton Exec Ed.
3. #d4dBoston  #trulyresponsive     @jeckman  
4. #d4dBoston  #trulyresponsive     @jeckman   h9p://delight.us/  
5. #d4dBoston  #trulyresponsive     @jeckman   THE RISE OF RESPONSIVE DESIGN h9p://www.flickr.com/photos/redlinx/9072816774/  
6. #d4dBoston  #trulyresponsive     @jeckman   h9p://alistapart.com/arHcle/dao   “Now  is  the  Hme  for  the  medium  of  the  web  to   outgrow  its  origins  in  the  printed  page.  .  .  .  It  is  the   nature  of  the  web  to  be  flexible,  and  it  should  be   our  role  as  designers  and  developers  to  embrace   this  flexibility  .  .  .  The  journey  begins  by  lePng  go   of  control,  and  becoming  flexible.”  
7. #d4dBoston  #trulyresponsive     @jeckman   h9p://www.alistapart.com/arHcles/responsive-­‐web-­‐design/  
8. #d4dBoston  #trulyresponsive     @jeckman   Responsive Design
9. #d4dBoston  #trulyresponsive     @jeckman   “an  emergent  discipline  called   ‘responsive  architecture’  has  begun   asking  how  physical  spaces   can  respond  to  the  presence  of  people   passing  through  them.  .  .  .  rather  than   creaHng  immutable,  unchanging  spaces   that  define  a  parHcular  experience,   they  suggest  inhabitant  and  structure   can—and  should—mutually  influence   each  other”   h9p://www.alistapart.com/arHcles/responsive-­‐web-­‐design/   Responsive as in Respond
10. #d4dBoston  #trulyresponsive     @jeckman   Users ≠ Devices h9p://www.flickr.com/photos/brimley/6307761251/in/photostream/  
11. #d4dBoston  #trulyresponsive     @jeckman   BRAND/COMPANY LEVEL: CUSTOMER EXPERIENCE STRATEGY h9p://dilbert.com/strips/comic/2002-­‐09-­‐07/  
12. #d4dBoston  #trulyresponsive     @jeckman   Companies that are loved, win
13. #d4dBoston  #trulyresponsive     @jeckman   The Chief Customer Officer “The corporation does not live in rapport with its customers because the customer doesn’t experience a company through its silos. The customer experiences a company horizontally, across the silos”
14. #d4dBoston  #trulyresponsive     @jeckman   h9p://answerlab.com/resources/research/elevate-­‐customer-­‐experience-­‐in-­‐your-­‐company/   Customer  is  at  the  center     Designers,  product   managers  and  marketers   look  to  user  goals  as  the   driver  of  product   development  and   markeHng     Performance  is  measured   by  how  well  experiences   meet  users’  needs,  goals,   or  desires     Win  =  best  user   experience  and  posiHve   customer  reviews,  which   leads  to  revenue  growth  
15. #d4dBoston  #trulyresponsive     @jeckman   Align Imagine Map Getting there: AIM
16. #d4dBoston  #trulyresponsive     @jeckman   Align Imagine Map Customer & Business / Teams & Vision Journeys & Content / Technology & Processes Goals & Measurement Getting there: AIM
17. #d4dBoston  #trulyresponsive     @jeckman   Align Imagine Map Experience Principles / Ideation Touch point design / Co-creation Getting  there: AIM
18. #d4dBoston  #trulyresponsive     @jeckman   Imagine Map Align Service Blueprint / Roadmap Getting  there: AIM
19. #d4dBoston  #trulyresponsive     @jeckman   Understand customer journeys
20. #d4dBoston  #trulyresponsive     @jeckman   Prioritize for Impact, Effort
21. #d4dBoston  #trulyresponsive     @jeckman   Lessons from Zipcar •  Great experiences drive loyalty; loyalty drives growth. •  Observe and understand people. •  Understand and dissect journeys and supporting processes. •  Design internal experiences too. •  Use data. •  Conceptualize ideals. •  Design experiences, not features. h9p://delight.us/zipcar-­‐principles-­‐for-­‐designing-­‐great-­‐experiences/  
22. #d4dBoston  #trulyresponsive     @jeckman   PROJECT LEVEL: USER CENTERED DESIGN h9p://www.flickr.com/photos/kt/19925290/  
23. #d4dBoston  #trulyresponsive     @jeckman   Tools & Processes •  User Research –  Contextual Observation, Surveys, Interviews –  Mix Qualitative and Quantitative –  Establish Personas, Goals •  Listening –  Analytics –  Social –  Customer Service •  Content Strategy –  Content appropriate to customer journey, persona –  Format, style, tone, hierarchy
24. #d4dBoston  #trulyresponsive     @jeckman  
25. #d4dBoston  #trulyresponsive     @jeckman   Card  SorHng  
26. #d4dBoston  #trulyresponsive     @jeckman   UX Design in a RWD World Understand the What and Why –  Define business and user goals –  Make those goals the North Star for everyone on the team (including the client). –  Map these goals to an experience rather than a device
27. #d4dBoston  #trulyresponsive     @jeckman   UX Design in a RWD World Put Content First –  Banish lorem ipsum –  Define content strategy early in process –  Content hierarchy mockups > flat wireframes
28. #d4dBoston  #trulyresponsive     @jeckman   UX Design in a RWD World Think through Interactions –  Consider all use cases, even edge cases •  Interface vs. page, fluid vs. static •  Map out task flows –  Sketch first: Paper (or whiteboard) is your friend –  Show chrome: context in RWD is important –  Live Prototype: iterate early and often
29. #d4dBoston  #trulyresponsive     @jeckman   Sketch for Flexibility
30. #d4dBoston  #trulyresponsive     @jeckman  
31. #d4dBoston  #trulyresponsive     @jeckman   POST-LAUNCH: CONTINUOUS OPTIMIZATION h9p://getreadyforday2.com/  
32. #d4dBoston  #trulyresponsive     @jeckman   Your Website is NOT a Project •  Always Be Testing – A/B and Multivariate – User Testing – Beware local maximums – Archive and socialize knowledge •  Listen to users – Make friends with customer service – Publish a feedback mechanism h9p://www.flickr.com/photos/mightyohm/2729474646/in/photostream/    
33. #d4dBoston  #trulyresponsive     @jeckman   Continuous Optimization
34. #d4dBoston  #trulyresponsive     @jeckman   PARTING THOUGHTS
35. #d4dBoston  #trulyresponsive     @jeckman   What users want The real challenge isn’t finding out what users want. The real challenge is defending what users want against what the business wants, and developing a strategy whereby those conflicting needs/wants can be consistently and pragmatically balanced in a sustained ongoing fashion.
36. #d4dBoston  #trulyresponsive     @jeckman   We Know Better
37. #d4dBoston  #trulyresponsive     @jeckman   User-Driven vs User-Centric “When  I  first  talked  with  Doc  about   user-­‐driven  instead  of  user-­‐centric,  Jim   Carrey’s  The  Truman  Show  immediately   sprang  to  mind:  from  birth,  Truman  is   the  protagonist  in  a  huge  reality  show   revolving  around  him…  only  he  doesn’t   know  it.  .  .  .  Clearly  the  Truman  Show  is   Truman-­‐centric…  but  it  is  most  definitely   not  Truman-­‐driven.”  -­‐   h9p://blog.joeandrieu.com/ 2008/07/12/towards-­‐user-­‐driven-­‐ search/  
38. #d4dBoston  #trulyresponsive     @jeckman   Experiences > Marketing h9p://gapingvoid.com/2006/05/09/if-­‐you-­‐talked-­‐to-­‐people/  
39. #d4dBoston  #trulyresponsive     @jeckman   Q & A John Eckman @jeckman johneckman.com openparenthesis.org ISITE Design www.isitedesign.com delight.us www.cmsmyth.com