Fresh Mart’s Error Page

Project Overview

Research & Sketched Wireframe

Style Guide

High Fidelity Final Version

For this project I was assigned by the web development team of Fresh Mart to design a user-friendly 404 page.

I first started this project by researching grocery stores to gain a better understanding of their websites as well as to see what their 404 landing pages looked like. I then researched examples of 404 error pages on dribbble.com for inspiration of a layout. After getting enough inspiration, I sketched a wireframe of the error page.

From researching grocery store websites, I knew that I wanted to have green and beige colors in the color palettes. I created the following style guide.

These were the first two versions I made of the error pageI received user feedback on these two versions and ultimately decigded to go with Version 2 because all though the Version 1 was very creative, the readability was difficult for many users.

For the final version of the error page, I added a header to the page that included the Fresh Mart name and logo.

Version 1

Version 2

High Fidelity Version 1 & 2