Client: Purina.com
Showcase of the work I did for Nestlé's Purina.com website.
Mar 2023 – Aug 2024
Designs for 404 Error page
When I landed on Nestle.com's 404 Error page, I realized there was a problem: They gave their branded products a negative connotation.
I decided to address this negative branding and proposed a few simple designs. I wanted to give the cats and dogs a “voice” where they talked to the visitor and made the error page easier to relate to. This eliminated the negative connotation of the brand.
These are the real pages, notice the URL on the address bar.
You can see the real one here: https://www.purina.com/404
Before & After designs for Nestle.com 404 Error page
When I landed on Nestle.com's 404 Error page, I realized there was a problem: They gave their branded products a negative connotation.
I decided to address this negative branding and proposed a few simple designs. I wanted to give the cats and dogs a “voice” where they talked to the visitor and made the error page easier to relate to. This eliminated the negative connotation of the brand.
These are the real pages, notice the URL on the address bar.
You can see the real one here: https://www.purina.com/404
Traceability map — Before & After designs
This map was the most demanding project while I worked at the company.
I inherited this project from a prior designer. I then realized that there were multiple things I could do to make this map as good as possible:
Use the entire screen rather than a windowed map.
Create a floating column to house all necessary filters.
Make the hero area smaller, since the map was the main feature on this page.
Remove the Sourcing Quality Ingredients section at the bottom, so users can focus on the map.
Remove the CTA from the hero, since trying to take the user to another page defeated the purpose of having a map in the first place.
See the current Traceability map here: https://www.purina.com/ingredients/pet-food-traceability-map (good luck trying to use it xD).
Default state for the Traceability Map
In this design, I wanted to bring some joy to the default/nothing-selected state of the map by adding a cat pointing to the ingredients and the message “Please select an ingredient from this list :)” and using a smiley as well.
Unfortunately, as much as they liked the idea, this was never approved because Purina's voice never considered having animals help with messaging.
I honestly have no idea how I got away with the redesign of the 404 Error page above, lol.
Sitemap page —
Design decisions
Although simple, many design decisions were made when designing this page.
Brand guidelines and use of Purina's UI kit components.
Content hierarchy through typography:
H1 for the main title of the page.
5-column layout for the 5 content categories.
H2 for the category subheadings.
H3 for the category groups.
Unordered list with visible bullet items for improved legibility.
Proper text sizing to separate each group and their lists.
Designs for the Product Listing Page (PLP)
Problem
The original page had all filters/checkboxes in a single column, making the page practically unusable.
Solution
Provided multiple designs in which the filters remained in one column but were distributed in two nested columns. This massively reduced the page length while improving the usability of the filters.
The dog food category buttons were placed at the bottom of the page since their data suggested that they weren't being clicked on as much as expected. Nonetheless, they remained on the page for SEO reasons.
Pagination functions + filter labels remain at the top for improved usability. The pagination feature was also retained at the bottom to comply with best practices.
New navigation information architecture — MOBILE
They needed a way to experience their new IA in a mobile format.
The first slide shows the huge number of screens required to create this prototype. It included flows to find both Dog and Cat foods.
The second slide is a detailed image of a few of the screens.
There was no need to create a fully fleshed-out design for these screens since the focus was the information architecture flows.
Figma Demo
Purina.com UI design audit
With this design audit I did, it became apparent how the lack of a design system fomented the fragmentation of the UI by different design teams in the company.
After this audit, the Checkmark team (that was the name of the internal main design team) started planning the creation of a design system.
Purina.com — Megamenu designs
I provided two layout styles for their megamenu: Expanded and compact.
The expanded megamenu provided more real estate for the content. It also warranted the use of imagery to help understand what type of content was being displayed, in this case, the megamenu for Cat products.
The compact megamenu version, was more succinct and compressed. There was no need to use imagery, but it retained the same content used in the expanded version.
Search flow for Purina.com
In this image, I created a simple content flow of how the search and its results could provide access to the different pages of the website.
Purina search UX — Desktop View
Purina.com's search feature required a way to list different kinds of content: products, breeds for cats and dogs, text results for articles, and a no-results state.
Article page designs
There were 3 types of articles:
Image/hero-based articles.
Video/hero-based articles.
Infographics.
The content architecture required:
Side column for secondary content.
Carousel for species brands (dog or cat).
Carousel for product cross-sale.
I tried adding the checkmark logo on the divider to give the page a small visual/brand detail and avoid using a plain horizontal rule element.
On the video article design, notice the blockquote. This helped break the dense content a little.
Column divider styles
For the megamenus, I was asked to provide a few different styles for the column dividers.
The selected gradient style was visually lighter than the other styles, and that's why it was chosen.
