All Kinds of Design Stuff for Purina

Project Description

I was the Sr. Specialist UX/UI Designer for their internal Checkmark team. I assisted the HubX group. All my design work affected Purina.com.

Due to my experience and knowledge, they created a "Lunch & Learn" session where I shared my knowledge about general design topics, HTML+CSS techniques, Responsive Design, UX and UI Design, etc. Here's a recording of one of the sessions: HubX Lunch-n-Learn with Ricardo Zea at Nestlé

This is a long page where I elaborate on many of my design capabilities. Get ready to scroll! 😂

Project Metadata

Role:Sr. Specialist UX/UI Designer
Year:2021 - 2022
Duration:1 year and 1 month
Team Size:Project Manager, Product Manager, 5 Devs (External team), Designer (Moi)
Tools:Figma, CodePen (HTML + CSS), Trello, Confluence
Technologies:HTML and CSS
Tags:Figma, UX/UI Design, HTML & CSS, CodePen (HTML + CSS), Prototyping, Branding, Information Architecture, RWD, Interaction Design, Usability

Almighty Numbers

100s

Of Dogs

101s

Of Cats (I'm a cat guy)

20+

Employees trained in design subjects

2 Great Coworkers

Rene, Jill (for real)

404 Page: Redesign

When I landed on Nestlé's 404 error page, I realized there was a problem: Their error page showcased a bunch of their products.

This was a very bad branding idea because it gave their brand a negative connotation.

Before

Here's what they had 👇🏽:

BEFORE: Old 404 Error Page - Terrible branding idea! lol

BEFORE: Old 404 Error Page - Terrible branding idea! lol

After

Design and Branding Decisions

To fix the negative brand connotation and make this error page easier to relate to:

  1. Removed the products and showcased the animals instead.
  2. Added some emotion by giving the cats and dogs a “voice”.
  3. Used microcopy to make the message more relatable.
  4. Tapped into the love humans have for their pets.

The Solution vs. Reality

Here's the 404 Error Page I designed vs. what they implemented 👇🏽:

My 404 page design 🙂 Not too bad, lol.

My design 🙂. Not too bad, lol.

Their implementation 🙄 Check it out for yourself here!

Their implementation 🙄 Check it out for yourself here!

Check out other 404 page designs

Well, not much to say here other than: 3 cats, 1 dog. Scroll down, dang it! 😜

404 Error Page Cat #1

404 Error Page Cat #1

404 Error Page Cat #2

404 Error Page Cat #2

404 Error Page Cat #3

404 Error Page Cat #3

404 Error Page Dog, lol

404 Error Page Dog, lol

Ingredients Map: Redesign, Interaction Design, and HTML+CSS demo

Redesign

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:

  1. Use the entire screen rather than a windowed map.
  2. Create a floating column to house all necessary filters.
  3. Make the hero area smaller, since the map was the main feature on this page.
  4. 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.
  5. Remove the Sourcing Quality Ingredients section at the bottom, so users can focus on the map.

Here are the map designs side by side 👇🏽:

Their original map design

Their original map design

My map design 🙂

My map design 🙂

Interaction Design

Empty State

When no ingredients are selected:

  • A friendly cat guides the user to explore ingredients.
  • Microcopy is the “cat's voice” that explains what to do next.
  • It sets the tone for a friendly, approachable experience.
  • The cat stands over a branded-red line so it's not floating in mid-air.

Check out the empty state 👇🏽:

They never approved this design, hahaha 😂 (but I love it!).

They never approved this design, hahaha 😂 (but I love it!).

HTML + CSS

CodePen (HTML + CSS) Demo

Funny story

When I first showed this new map design to the stakeholders, they loved it. Then during a meeting where I presented the designs of the new map, the developers didn't look too happy 😜. They were not clear about what was wrong with the map in their eyes, but I could tell they weren't thrilled with what they now had to implement. Not only that, but they also had to make it responsive, obviously.

After several meetings that week, they still had not even started to work on it.

So I took a couple of hours out of my weekend (time I didn't charge for BTW) and created a simple demo on CodePen that had the basic map layout and was fully responsive.

The developers didn't like that I built this demo, haha 😂. But it showed them that the responsive layout was definitely possible.

Here's the CodePen demo I created 👇🏽:

Drag the handle to test responsiveness

And it really was that simple 🙂

E-commerce

Designs for the Product Listing Page

Problem: Complex filtering and sorting

The original page had all filters/checkboxes in a single column, making the page practically unusable.

My Solution

  • Better scannability by reorganizing filters into multiple columns.
  • Improved discoverability through logical grouping and ordering of filter options.
  • Reduced cognitive load with intuitive sorting options and clear labels.
  • Enhanced user experience by minimizing vertical scroll through optimized layouts (2 columns for filters) and collapsible sections.
  • Alphabetical order for filters (Yep! They weren't 🙄 lol).
Design #1 - Categories box at the top

Design #1 - Categories box at the top

Design #2 - Categories box at the bottom

Design #2 - Categories box at the bottom

Design #3 - Pagination and Sorting at the top

Design #3 - Pagination and Sorting at the top

Design #4 - No Pagination or Sorting

Design #4 - No Pagination or Sorting

Original Product Listing Page

Oh brother 😖… Good luck reaching the bottom of that scroll! 🤣

Original Product Listing Page

Original Product Listing Page

Yes, I know, I know! HOW!?!? 😂

Information Architecture and Figma Prototype

Information Architecture File

The giant 🫏 screen below showcases how complex their information architecture was. My responsibility was to take that IA and build a Figma prototype for mobile.

Screenshot from Figma with all the frames 👇🏽:

Information Architecture and Figma Prototype

Information Architecture and Figma Prototype

Massive file. In case another designer needed to work on it, I carefully organized it. Well, I tried, lol.

Figma Prototype

This prototype is only here to show that I have the skills to build prototypes 🙂. It is the result of the frames from the IA file above.

Using a prototype without any context friggin' sucks. Want to use the prototype? Have at it. And yes, it's fully functional. 👇🏽:

Figma prototype skills?