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
After
Design and Branding Decisions
To fix the negative brand connotation and make this error page easier to relate to:
- Removed the products and showcased the animals instead.
- Added some emotion by giving the cats and dogs a “voice”.
- Used microcopy to make the message more relatable.
- 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 design 🙂. Not too bad, lol.
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 #2
404 Error Page Cat #3
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:
- 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 CTA from the hero, since trying to take the user to another page defeated the purpose of having a map in the first place.
- 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
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!).
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 👇🏽:
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 #2 - Categories box at the bottom
Design #3 - Pagination and Sorting at the top
Design #4 - No Pagination or Sorting
Original Product Listing Page
Oh brother 😖… Good luck reaching the bottom of that scroll! 🤣
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
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?