Truly Responsive Design Means Aligning to Business and User Goals


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
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • The team I work with ISITE design – lets me work with awesome clients – who whom we co-create apps, websites, and campaign work with digital experience at the core.Forrester in covering this field uniquely – and we were honored to be among 40 or so firms who’s work they highlight in their latest report.
  • And we gather brands and experts in digital experience that we admire both virually in our blog – Delight.US – and in person at two in-person conferences we host in our headquarters cities of Portland, Oregon and Boston, Mass.If these stories resonate with you – we’d love to talk with you, to feature your work, and to have you as our guest at Delight.
  • Way back in 2000, John Allsopp identified a fundamental issue of control and flexibility
  • 10 years later, Ethan Marcotte names Responsive Web Design. In between? 10 years of fixed-width, table-based layouts replaced by DIV-based but still fixed layouts. (That’s not entirely true, but it was broadly the case)
  • The official theme of DrupalCon Denver 2012 was “collaborative publishing for every device” – but Robert Douglass and Jeffrey McGuire's opening session shortened the official tagline to this version for the tl;dr; crowd
  • Origin – responsive architectureLet’s not forget the user is who we should be responding to, not just the device
  • What’s positive about RWD is that it forced the end of the collective hallucination that digital experiences should be the same across all devices – the myth of the 1024 x768 screen and the fixed width design. The challenge is that in all our focus on devices – on different form factors and capabilities we’ve lost touch with the notion that devices don’t use the web, people do. We want to respond to the users, not the devices. Truly responsive web design requires a focus on the brains (and hearts) behind the devices.
  • I’m going to focus today on how you ensure that what you’re doing keeps “what users want” in mind. I’ll cover three stages:Whole company / brand levelSpecific project / site / application Ongoing
  • We respect what we can measure – improve and report.Research from Bain, Forrester, and Temkin Group
  • Personas / Journey Maps / Strategic Brief
  • Theme / Opportunities / Prototypes
  • We lead a two day workshop with oer 30 stakeholders from all across the organization.Confirmend existing journey map and brainstormed “future-perfect” state.
  • This is the hard work of bringing the great thinking down to earth and making decisions about what can be done today, tomorrow and in the future.
  • User research (quantitative & qualitative; in-context observation, surveys, focus groups)Social ListeningAnalyticsPersonasContent Strategy
  • Personas mapped to tasks
  • This is a card sort – a Content Strategy exercise for tailoring messaging – divided into what we are, what we aspire to be, what we are not. Triggers lots of good discussion
  • 3. RWD moves us away from device centric and pixel specific design process. Part of our design methodology should include a detailed goal and experience map that can serve as a guide throughout the project. Consider your client as a team member.
  • Lorum Ipsum – “Neither is there anyone who loves pain itself since it is pain and thus wants to obtain it”
  • 3. RWD moves us away from device centric and pixel specific design process. Part of our design methodology should include a detailed goal and experience map that can serve as a guide throughout the project. Consider your client as a team member.
  • A couple of sketch examples that demonstrate high level thinking. When sketching start out at 50k foot view…Loose ideas, big boxes on post-its, napkins, etc…Begin validating the big ideas with more detailed sketching
  • Detailed sketching example that explores specific interactions. What happens when a certain action is taken…work through task flows. Great way to find interaction problems before too much commitment.
  • For example, in the Media & Publishing space, users want engaging content with high production value and high quality, at no cost, with no DRM, with no annoying ads or interruptions. In ecommerce, users want high quality goods as cheaply and conveniently as possible. But businesses also have goals – and those goals are critical to long term success.
  • You know more about what is not working than you admitSeparate “image problems” from “reality problems” and fix the reality problems first
  • 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 @jeckman
    5. 5. #d4dBoston #trulyresponsive @jeckmanTHE RISE OF RESPONSIVE DESIGN
    6. 6. #d4dBoston #trulyresponsive @jeckman“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 @jeckman
    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” as in Respond
    10. 10. #d4dBoston #trulyresponsive @jeckmanUsers ≠ Devices
    11. 11. #d4dBoston #trulyresponsive @jeckmanBRAND/COMPANY LEVEL:CUSTOMER EXPERIENCE STRATEGY
    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 @jeckman 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.
    22. 22. #d4dBoston #trulyresponsive @jeckmanPROJECT LEVEL:USER CENTERED DESIGN
    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 OPTIMIZATION
    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 mechanism
    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.” -
    38. 38. #d4dBoston #trulyresponsive @jeckmanExperiences > Marketing
    39. 39. #d4dBoston #trulyresponsive @jeckmanQ & AJohn Eckman@jeckmanjohneckman.comopenparenthesis.orgISITE