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.

Truly Responsive Design Means Aligning to Business and User Goals

1,417 views

Published on

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.

Published in: Technology, Business
  • Be the first to comment

Truly Responsive Design Means Aligning to Business and User Goals

  1. 1. #d4dBoston #trulyresponsive @jeckmanTRULYRESPONSIVEDESIGNJohn Eckman
  2. 2. #d4dBoston #trulyresponsive @jeckmanAbout ISITE DesignDigital Experience AgencyAbout the AgencyFounded in 199770+ full time employeesBoston & Portland, ORCustomers250+ clients including Siemens, Genzyme, Nike,Zipcar, Intel, Columbia Sportswear, New EnglandBiolabs, Harvard Kennedy, Wharton Exec Ed.
  3. 3. #d4dBoston #trulyresponsive @jeckman
  4. 4. #d4dBoston #trulyresponsive @jeckmanhttp://delight.us/
  5. 5. #d4dBoston #trulyresponsive @jeckmanTHE RISE OF RESPONSIVE DESIGNhttp://www.flickr.com/photos/redlinx/9072816774/
  6. 6. #d4dBoston #trulyresponsive @jeckmanhttp://alistapart.com/article/dao“Now is the time for the medium of the web tooutgrow its origins in the printed page. . . . It is thenature of the web to be flexible, and it should beour role as designers and developers to embracethis flexibility . . . The journey begins by letting goof control, and becoming flexible.”
  7. 7. #d4dBoston #trulyresponsive @jeckmanhttp://www.alistapart.com/articles/responsive-web-design/
  8. 8. #d4dBoston #trulyresponsive @jeckmanResponsive Design
  9. 9. #d4dBoston #trulyresponsive @jeckman“an emergent discipline called‘responsive architecture’ has begunasking how physical spacescan respond to the presence of peoplepassing through them. . . . rather thancreating immutable, unchanging spacesthat define a particular experience,they suggest inhabitant and structurecan—and should—mutually influenceeach other”http://www.alistapart.com/articles/responsive-web-design/Responsive as in Respond
  10. 10. #d4dBoston #trulyresponsive @jeckmanUsers ≠ Deviceshttp://www.flickr.com/photos/brimley/6307761251/in/photostream/
  11. 11. #d4dBoston #trulyresponsive @jeckmanBRAND/COMPANY LEVEL:CUSTOMER EXPERIENCE STRATEGYhttp://dilbert.com/strips/comic/2002-09-07/
  12. 12. #d4dBoston #trulyresponsive @jeckmanCompanies that are loved, win
  13. 13. #d4dBoston #trulyresponsive @jeckmanThe Chief Customer Officer“The corporation does notlive in rapport with itscustomers because thecustomer doesn’t experiencea company through its silos.The customer experiences acompany horizontally, acrossthe silos”
  14. 14. #d4dBoston #trulyresponsive @jeckmanhttp://answerlab.com/resources/research/elevate-customer-experience-in-your-company/Customer is at the centerDesigners, productmanagers and marketerslook to user goals as thedriver of productdevelopment andmarketingPerformance is measuredby how well experiencesmeet users’ needs, goals,or desiresWin = best userexperience and positivecustomer reviews, whichleads to revenue growth
  15. 15. #d4dBoston #trulyresponsive @jeckmanAlign Imagine MapGetting there: AIM
  16. 16. #d4dBoston #trulyresponsive @jeckmanAlign Imagine MapCustomer & Business / Teams & VisionJourneys & Content / Technology & ProcessesGoals & MeasurementGetting there: AIM
  17. 17. #d4dBoston #trulyresponsive @jeckmanAlign Imagine MapExperience Principles / IdeationTouch point design / Co-creationGetting there: AIM
  18. 18. #d4dBoston #trulyresponsive @jeckmanImagine MapAlignService Blueprint / RoadmapGetting there: AIM
  19. 19. #d4dBoston #trulyresponsive @jeckmanUnderstand customer journeys
  20. 20. #d4dBoston #trulyresponsive @jeckmanPrioritize for Impact, Effort
  21. 21. #d4dBoston #trulyresponsive @jeckmanLessons from Zipcar• Great experiences drive loyalty; loyaltydrives growth.• Observe and understand people.• Understand and dissect journeys andsupporting processes.• Design internal experiences too.• Use data.• Conceptualize ideals.• Design experiences, not features.http://delight.us/zipcar-principles-for-designing-great-experiences/
  22. 22. #d4dBoston #trulyresponsive @jeckmanPROJECT LEVEL:USER CENTERED DESIGNhttp://www.flickr.com/photos/kt/19925290/
  23. 23. #d4dBoston #trulyresponsive @jeckmanTools & Processes• User Research– ContextualObservation, Surveys,Interviews– Mix Qualitative andQuantitative– Establish Personas,Goals• Listening– Analytics– Social– Customer Service• Content Strategy– Content appropriate tocustomer journey,persona– Format, style, tone,hierarchy
  24. 24. #d4dBoston #trulyresponsive @jeckman
  25. 25. #d4dBoston #trulyresponsive @jeckmanCard Sorting
  26. 26. #d4dBoston #trulyresponsive @jeckmanUX Design in a RWD WorldUnderstand the What and Why– Define business and user goals– Make those goals the North Star foreveryone on the team (including the client).– Map these goals to an experience ratherthan a device
  27. 27. #d4dBoston #trulyresponsive @jeckmanUX Design in a RWD WorldPut Content First– Banish lorem ipsum– Define content strategy early in process– Content hierarchy mockups > flat wireframes
  28. 28. #d4dBoston #trulyresponsive @jeckmanUX Design in a RWD WorldThink 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 yourfriend– Show chrome: context in RWD is important– Live Prototype: iterate early and often
  29. 29. #d4dBoston #trulyresponsive @jeckmanSketch for Flexibility
  30. 30. #d4dBoston #trulyresponsive @jeckman
  31. 31. #d4dBoston #trulyresponsive @jeckmanPOST-LAUNCH:CONTINUOUS OPTIMIZATIONhttp://getreadyforday2.com/
  32. 32. #d4dBoston #trulyresponsive @jeckmanYour 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 mechanismhttp://www.flickr.com/photos/mightyohm/2729474646/in/photostream/
  33. 33. #d4dBoston #trulyresponsive @jeckmanContinuous Optimization
  34. 34. #d4dBoston #trulyresponsive @jeckmanPARTING THOUGHTS
  35. 35. #d4dBoston #trulyresponsive @jeckmanWhat users wantThe real challenge isn’t finding out whatusers want. The real challenge isdefending what users want againstwhat the business wants, anddeveloping a strategy whereby thoseconflicting needs/wants can beconsistently and pragmaticallybalanced in a sustained ongoingfashion.
  36. 36. #d4dBoston #trulyresponsive @jeckmanWe Know Better
  37. 37. #d4dBoston #trulyresponsive @jeckmanUser-Driven vs User-Centric“When I first talked with Doc about user-driven instead of user-centric, JimCarrey’s The Truman Show immediatelysprang to mind: from birth, Truman isthe protagonist in a huge reality showrevolving around him… only he doesn’tknow it. . . . Clearly the Truman Show isTruman-centric… but it is most definitelynot Truman-driven.” -http://blog.joeandrieu.com/2008/07/12/towards-user-driven-search/
  38. 38. #d4dBoston #trulyresponsive @jeckmanExperiences > Marketinghttp://gapingvoid.com/2006/05/09/if-you-talked-to-people/
  39. 39. #d4dBoston #trulyresponsive @jeckmanQ & AJohn Eckman@jeckmanjohneckman.comopenparenthesis.orgISITE Designwww.isitedesign.comdelight.uswww.cmsmyth.com

×