Purina.com Website Redesign

I joined this project several months in, so I missed the project's dedicated discover and research portion. However, during my time on this project, various internal Purina product leads and business analysts acted as subject matter experts for the users, who we were told primarily access the Purina website to learn more about dog and cat food offerings before purchasing products with retailers separate from the Purina website.

Additionally, our internal subject matter experts also acted as advocates for the internal brands within the larger Purina umbrella brand, which required flexible page components with a number of functional variants within Figma that would allow these brand designers to design. To that end, our product team held many group discussion to decide key features of desired components, which ultimately which largely focused and honed the designs to meet MVP requirements for the internal designers. Following are a selection of just some of the components from our final library, which Jay Strehlow and I built with elements from the design system Jay developed specifically for Purina. Each component has a number of customizable variables which can be adjusted in Figma, and which will also be configurable in the CMS platform for the Purina designers to use in the development of each brand page. These components showcase the versatility of our website component system, allowing various types of imagery, text, products, review data, and other media to be integrated in various functional ways to meet the needs of the internal users.

Jay and I primarily took inspiration from the Nike and Patagonia websites, as these embodied the light, neutral, spacious, tech-forward, and environmentally conscious visual aesthetic we hoped to bring to the Purina web experience.

Of particular note of the components is the brand navigation (first image below), which takes a branded approach to separating the primary Purina navigation with brand specific imagery from the brand page subnavigation below. Also worth mention is the excessive care Jay and I took to ensure accessibility when creating the hero images and cards that feature text over images. To ensure that the text passes accessibility for any image that a Purina brand designer should add to the hero or card, we created a component template that pairs a gradient scrim with dropshadowed text, and worked with our project's quality assurance engineer to verify that our templates met accessibility in all situations. We also created component sets in dark, light, and neutral modes, which would allow brand designers to pair light and dark images with corresponding text that allowed good readability.

A great deal of discussion happened between Nerdery developers, designers, and key stakeholders at Purina to refine the current website information architecture to a more streamlined experience. To that end, the design team was called upon to create an internal document to explain the refined url structures and sitemap to internal Purina designers. I have reproduced portions of this design document below.

‍

During a trial phase of the website component creation, Jay and I set out to showcase the flexibility of our brand components by recreating some of the current internal Purina brand homepages with our components. While we admittedly skipped the wireframing process during this exercise, our components are themselves a type of wireframe, to which content could be added quickly. Below is a sample of a Purina internal brand page Jay and I recreated with our components.

The final portion of the Purina website I'd like to highlight is my experience in designing the Purina Ingredient Hub and Source Map experience. This series of pages stemmed from the stakeholder request to allow Purina customers to learn about the specific ingredients in Purina dog and cat food and place on a map where the ingredients were sourced from, in order to highlight the wide range of Purina's high-quality ingredient offerings. Because of the large number of ingredients, we required an easy way to organize and filter the ingredients. After much discussion with stakeholders and developers, we decided upon a simple search bar just below the hero image that would allow users to search directly for an ingredient, filtering outthe other ingredient offerings in real time to only show direct text matches between the search field and the ingredients.

Beyond this search filtering, users can scroll down the page to view all the ingredient categories in alphabetical order, clicking the secondary CTA for each respective section to expand sections of interest.

Jay and I were largely inspired by the clean, easy to digest style of the ingredients page on the Chipotle website for this page.

Clicking an ingredient image triggers the modal below, which displays an ingredient photo, description, health benefits, and a CTA that links the user to the Source Map with the ingredient in question selected on the map.

Purina users can access the Source Map through the ingredients modal or from the main navigation. Accessing from the latter will lead users to the page below, where they will be prompted to choose from the list on the left side of the map.

Clicking an ingredient from the list will update the map modal to show an ingredient detail page, which brings the same data from the Ingredient Hub modal, with the addition of text links that show the various locations Purina sources one ingredient from. Clicking one of these links will reorient the map to center the map pin in question on the map.

There are many other aspects of this project that I didn't discuss in this case study, such as the design and development collaboration on refining filter hierarchy and click interactions on the Purina search results page, our creation of Adobe Photoshop templates for the internal Purina design to streamline the creation of product images and hero banners, and the implementation of a Purina component design library for the use of internal Purina web designers when creating and editing Purina brand pages for development.

This site design and migration was an extremely rewarding and collaborative experience, and I'm looking forward to see the live site as the project development draws closer to completion.