The final product, as shipped.

The Client

The Clorox Company, based on Oakland, CA, is a worldwide manufacturer and marketer of consumer and professional products, employing over 8,000 people around the world to annual net sales of over $6 billion. Our client was the sales and marketing division of Clorox Professional Products Company (CPCC), which itself dedicates over $100 million a year to product research and development and provides products for health-critical use in over 2,500 care facilities in the United States alone.

The Charge

We (a project manager, a database developer, an iOS developer, and myself as UX lead) were tasked to design and build a mobile application for the company’s field reps. The app should allow field reps to better access and better present complex and heterogeneous sets of product and third-party information — this would include product data sheets, promotional images/videos, white papers from the Centers for Disease Control, stock and pricing data, online and print news stories — to professional clients in hospitals or on the go. These presentations are a core task of the field rep’s job; any gains in productivity here could have enormous ripple effects.

The Plan

As any Cyclon knows, one must have a plan.

My process began with qualitative user research, in the form of semi-structured interviews with stakeholders and users, with an eye on distilling primary user tasks and major pain points and inefficiencies. I then built lean personas and a journey map as documents to consolidate insights and opportunities as well as to keep the team focused on the real problems and pains we sought to mitigate.

In addition, I conducted a post-mortem of the redesign we introduced in our prior work on the Clorox Professional Healthcare web site. The feature that resulted in the greatest usability gain there, for tasks similar to some of those faced by field reps, dovetailed well with our user needs assessment and interaction hypothesis.

The Solution

Based on my research, my solution had to allow for: powerful searching/locating of a wide range of information and documents and media; a way to package this into a package that was easily presented and shared; and a way for the user to know when any piece of located information had been updated. My answer to these needs was TouchPoint, a single mobile app that allows users to browse, filter, and save documents of many file types to a "portfolio", which could then be shown to or shared with clients. TouchPoint also periodically scans the selected files and alerts the user when their original source has updated, reducing the user’s workload and client’s uncertainty.

My research had shown that reps had to find, select, collect, monitor, and present an amazingly large amount of information and media types for each client visit. Sometimes the reps had to collect all this in folders on their laptops, or sometimes even in physical folders, full of physical papers, because some found that bookmarking sites and navigating to them were disruptive to meetings. TouchPoint’s portfolio system (similar to a shopping cart for documents) allowed users to more quickly locate and collate the information they’d need before, or even on the way to, a client visit.

Making the creation of portfolios easy was the centerpiece of TouchPoint: a faceted browsing and filtering system. I’d previously developed this feature for the Clorox Professional Healthcare site; the product information locating needs of field reps closely paralleled the needs we’d found of healthcare professional users. Quick usability testing of non-interactive prototypes showed that users easily grasped the concept and seemed to save time, effort, and worry.

The portfolio system also made for easy sharing: field reps could, with a few clicks, email a portfolio as a zipped file or share it to a cloud service like Dropbox.

TouchPoint is currently in use by Clorox field reps nationally, through private distribution only, and has received rave internal reviews. It is continuing to demonstrate productivity and sales gains for the company.

Sketches

Content redacted (apologies)

Original sketch of faceted browsing feature for the Clorox Professional web site. The "?" signifies "we need to do some user research to find the right categories here."

Original sketch of faceted browsing feature for the Clorox Professional web site. The "?" signifies "we need to do some user research to find the right categories here."

Refinement of faceted browsing feature in tablet app

Prototypes