Making a cat litter web stickier than ever using UX research and design

The marketing team at Clorox hired me to analyze and re-design the user experience at scoopaway.com, the destination website for the evergreen brand. The objectives of our work were to re-create the look and feel aligned with new branding, make the website stickier and offer consumers ways to save and share savings for the product line. Google Analytics and other data were made available to me for my initial UX research.

Research & analyses

My research into the product community revealed these six top-line factors for the company to consider, based on analysis of web metrics over the past year: Pathing, web platforms, demographics, screen space, landing pages and touch screens. Here is the summary of the results with highlights.

Path & content mapping

After analyzing the site traffic data in detail, I used popular paths from the traffic analysis to connect content from the existing site map together. Content outliers were identified, along with the top features with the higest community engagement. The entire site map is represented, with secondary pages minified to conserve space. I focused additional detail on popular areas, including promotions and social flows to and through the site.

Information architecture

In organizing the site's information, we considered a spectrum of pages, more-to-less important/relevant to users and separated into active/dynamic and static content categories. This artifact enhanced the team's ability to prioritize content and craft its messaging to the consumer.

Site maps + interactions

Recommendations for pathing and priorities for content and messaging were synthesized into a few maps, the first of which shows the core site structure with internal and external links called out. The second overlays areas of interactivity on the site, as well as technological options for implementation on each page.

Site framework

Once the site's information was arranged, I created wireframes for shared or 'framework' elements like headers, footers and proprietary plug-ins. The design is based on responsive web pages for desktop, tablet and mobile devices.

Wireframes & specifications

Implementation of the design was executed by a third-party contractor; Therefore, design artifacts were crafted to be as compact and information dense as possible for efficiency's sake. Every page has a main layout for a target platform's design, accompanied by layouts for the other two targets for easy reference. The interactive and UX design specifications are annotated in the wireframe, including implementation recommendations.

Implementation