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.

Internet User Experience 2012

A Responsive Web Design case study – Internet User Experience 2012
Our goal as digital design practitioners is to craft and implement solutions that meet our clients and their users’ needs, even if those needs haven’t yet been articulated. In 2011, a consumer packaged goods client expressed a need for a brand site facelift or a “reskin” to their existing web site. Our research into the brand’s target consumer’s device preferences, behaviors and passions, however, identified a major opportunity for the brand to take a giant leap forward in their digital presence with a site that reached their consumers on more than just desktop or tablet devices. And so begins the tale of how a small team comprised of an interaction designer, graphic designer and a few engineers spun a reskin project into a responsive web design. This case study outlines the responsive web design approach used and provides tips for implementing your own responsive web design as well as helpful criteria for determining if a responsive web design is the right way to engage your target users.

  • Login to see the comments

Internet User Experience 2012

  1. 1. 2011: CPG Brand Site “Reskin”Stated project objective: updatebrand site, Facebook, etc. withbrand’s new look & feel to matchnew packaging, product line, tone tosuit target demographicOpportunity: reach brand’s target of20something women with a site thatresponds well on multipledevices, not just a desktop web site.Proposed solution: redesign site’stemplates to be consistent with newbrand look but also to be responsiveto devices.7/20/2012
  2. 2. Responsive Design – what is it?• One way to keep up with all of the devices/resolutions on the market• Applies an architectural philosophy to digital design, that structures should respond to the environment and people in them• Designs should respond to a user’s behavior and environment based on screen size (resolution), platform and orientation• Fluid grids, flexible images and media queries• Eliminates the need for a different design and development phase for each new gadget on the market • NOTE: this does not mean it is cheaper to develop. See Lessons Learned section of this presentation.7/20/2012
  3. 3. Making our case To sell the idea to internal stakeholders, then the clients, we presented: • Data about the mobile behaviors of target consumers and mobile usage trends in general • Analytics and mobile-related site traffic data for existing site • Review of mobile presence of brand’s competitors • Outlined expected features for mobile brand sites and recommended responsive design for brand site restage • Proposed a small, interdisciplinary team to work on development in iterative fashion7/20/2012
  4. 4. RWD “Flavors” Text-driven vs. Design-driven7/20/2012
  5. 5. Target Sizes • Breakpoints • Transitions between them7/20/2012
  6. 6. Target Sizes / Breakpoints 2 3 47/20/2012
  7. 7. Transitioning between breakpointsFluid Snap vs.
  8. 8. Cross Browser, Cross Device Polyfill for IE8 and earlier: Respond.js7/20/2012
  9. 9. Cross Browser, Cross Device • Minify and concatenate CSS and JavaScript • Optimize Images7/20/2012
  10. 10. UX Design Approach – Keep it Simple • Start small (handheld) and work larger (tablet > desktop) • “Mobile First” • Prioritize content based on the viewing experience (handheld or tablet or desktop) • Create a design plan that allows copy and visuals to scale and reorient in an optimized way • Avoid extraneous material that doesn’t add much value to the overall experience • Determine whether there are features or functions that WILL need to be device-specific due to business or user requirements7/20/2012
  11. 11. Team Work Approach - fast, fluid, collaborative • Replaced documentation and wireframing with direct interaction (quick sketching, quick prototyping) • Used the functional prototype as the document of team decisions • Worked very closely with team members on a daily basis • Two heads, and in some cases four heads, were better than one – Colocation • Made decisions quickly to keep project moving.7/20/2012
  12. 12. Responsive design vs. mobile site vs.apps • Does a single feature set meet the needs of users on all devices, or is specialized functionality needed on a mobile/tablet device? • Do you need a native app to deliver required features? • Are you ready to put content first? • Is the ability to update content in one place a top priority (vs. separate mobile and desktop sites)? • Is this a good fit for the clients needs?7/20/2012
  13. 13. Design • Keep the page designs simple. • If it needs to scale, it’s not going to be pixel perfect.7/20/2012
  14. 14. Engineering • Evolve prototypes by collaborating closely with the designers and information architects. • Allow elements to maintain their natural document flow wherever possible.7/20/2012
  15. 15. Everyone • Plan for a longer project duration. It WILL take longer to plan, design, build, and evolve than a standard interface. • You won’t get it right the first time and that’s okay. • Constant battles will arise throughout the process. • Work with your teammates to refine the experience through trial and error. • Always Be flexible: Resist the urge to be a control freak.7/20/2012
  16. 16. Thanks! Krysta Stone Associate Director of Interaction Design Likes: Food, Libraries Adam Kempa Senior Software Engineer Likes: Legos, Pinball Machines Dan Kennedy Interactive Designer Likes: Anything that has to do with sports Karen Ford Software Engineer Likes: Baking, Classical Music, Dogs7/20/2012