truly responsive design means aligning to business and user goals
DESCRIPTION
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.TRANSCRIPT
#d4dBoston #trulyresponsive @jeckman
TRULYRESPONSIVE DESIGN
John Eckman
#d4dBoston #trulyresponsive @jeckman
About ISITE DesignDigital Experience Agency
About the AgencyFounded in 199770+ full time employeesBoston & Portland, OR
Customers250+ clients including Siemens, Genzyme, Nike, Zipcar, Intel, Columbia Sportswear, New England Biolabs, Harvard Kennedy, Wharton Exec Ed.
#d4dBoston #trulyresponsive @jeckman
#d4dBoston #trulyresponsive @jeckman
http://delight.us/
#d4dBoston #trulyresponsive @jeckman
THE RISE OF RESPONSIVE DESIGN
http://www.flickr.com/photos/redlinx/9072816774/
#d4dBoston #trulyresponsive @jeckman
http://alistapart.com/article/dao
“Now is the time 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 letting go of control, and becoming flexible.”
#d4dBoston #trulyresponsive @jeckman
http://www.alistapart.com/articles/responsive-web-design/
#d4dBoston #trulyresponsive @jeckman
Responsive Design
#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 creating immutable, unchanging spaces that define a particular experience, they suggest inhabitant and structure can—and should—mutually influence each other”
http://www.alistapart.com/articles/responsive-web-design/
Responsive as in Respond
#d4dBoston #trulyresponsive @jeckman
Users ≠ Deviceshttp://www.flickr.com/photos/brimley/6307761251/in/photostream/
#d4dBoston #trulyresponsive @jeckman
BRAND/COMPANY LEVEL:CUSTOMER EXPERIENCE STRATEGY
http://dilbert.com/strips/comic/2002-09-07/
#d4dBoston #trulyresponsive @jeckman
Companies that are loved, win
#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”
#d4dBoston #trulyresponsive @jeckman
http://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 marketing
Performance is measured by how well experiences meet users’ needs, goals, or desires
Win = best user experience and positive customer reviews, which leads to revenue growth
#d4dBoston #trulyresponsive @jeckman
Align Imagine Map
Getting there: AIM
#d4dBoston #trulyresponsive @jeckman
Align Imagine Map
Customer & Business / Teams & VisionJourneys & Content / Technology & Processes
Goals & Measurement
Getting there: AIM
#d4dBoston #trulyresponsive @jeckman
Align Imagine Map
Experience Principles / IdeationTouch point design / Co-creation
Getting there: AIM
#d4dBoston #trulyresponsive @jeckman
Imagine MapAlign
Service Blueprint / Roadmap
Getting there: AIM
#d4dBoston #trulyresponsive @jeckman
Understand customer journeys
#d4dBoston #trulyresponsive @jeckman
Prioritize for Impact, Effort
#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.
http://delight.us/zipcar-principles-for-designing-great-experiences/
#d4dBoston #trulyresponsive @jeckman
PROJECT LEVEL:USER CENTERED DESIGN
http://www.flickr.com/photos/kt/19925290/
#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
#d4dBoston #trulyresponsive @jeckman
#d4dBoston #trulyresponsive @jeckman
Card Sorting
#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
#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
#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
#d4dBoston #trulyresponsive @jeckman
Sketch for Flexibility
#d4dBoston #trulyresponsive @jeckman
#d4dBoston #trulyresponsive @jeckman
POST-LAUNCH:CONTINUOUS OPTIMIZATION
http://getreadyforday2.com/
#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
http://www.flickr.com/photos/mightyohm/2729474646/in/photostream/
#d4dBoston #trulyresponsive @jeckman
Continuous Optimization
#d4dBoston #trulyresponsive @jeckman
PARTING THOUGHTS
#d4dBoston #trulyresponsive @jeckman
What users wantThe 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.
#d4dBoston #trulyresponsive @jeckman
We Know Better
#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.” - http://blog.joeandrieu.com/2008/07/12/towards-user-driven-search/
#d4dBoston #trulyresponsive @jeckman
Experiences > Marketinghttp://gapingvoid.com/2006/05/09/if-you-talked-to-people/
#d4dBoston #trulyresponsive @jeckman
Q & A
John [email protected]
ISITE Designwww.isitedesign.comdelight.uswww.cmsmyth.com