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.