Responsive Web Design in Action

Impressed with our work on the Clorox Professional web site, the client asked us to design and build a version that would be more easily accessible on mobile devices, so that health care professionals and sales teams would not be tied to desktop or laptop computers. After all, sales reps needed to access the same data while in the field, on mobile devices – but the existing site was unusable on small screens.

Rather than designing a separate site for mobile, I worked on selecting a simplified feature set, based on talks with users about the top priorities for features and information, and worked on a responsive web design that would allow the same site to display well on mobile and desktop screens.

Going from this data, I began with design based on menu-based navigation. Drawing out the architecture of the menu system showed that it greatly reduced the number of clicks required for all of the common user tasks.

PPD_mobile_IA_and_sketch.png

This menu-based structure also meant we could leverage the faceted browsing feature developed for the desktop site, which users and the client had found so efficient.

Sketches and interactive Balsamiq mockups served as comps for the client, low-fidelity testing assets, and guidance for the visual designer who delivered the high-fidelity comps for final development.

The strength of designing up from mobile, with responsive web design, was that we did not have to rearchitect the backend or data structures of the Clorox Professional web site, did not have to set up potentially problematic browser detects, and preserved user experience and actions should they move from one device to another. Saved money, saved time, and worked well. So well, in fact, that the client asked us to extend our contract and help them create a tablet app targeted at a different user base.