Mr. Sausage

 

I redesigned a small business’s website to improve the user experience by updating its layout, typography, spacing, readability and responsiveness. I also refreshed its outdated logo by creating a vector-based minimalistic design that is better suited for packaging, stationary and branding.

Logo

The original logo above, which was made over 30 years ago, needed a refresh for 2018. We wanted to keep the general look of the standing right-facing pig, but create a more minimalistic and clean design. Additionally, vector style scales much better so it is better suited for packaging and stationary. I designed a number of iterations and we eventually chose this option on the right.

HOme Screen

The previous home screen had a number of user experience flaws. The most important information, address and phone number, was hiding at the bottom along with the social media links. The hero image encompassed a very large amount of space it was unclear if anything existed underneath. Links such as Our Products, Our Family and Contact Us were redundant as the header included each at the top. The typography was inconsistent and in certain instances hard to read. 

I created a fullwidth background image for the homepage and muted it with a grey overlay. I arranged the address, phone number and social media links below the logo. I brought all prevalent information to the forefront so the user doesn't have to scroll for additional information. I chose a typeface for the entire site that is more readable.

Contact us 

The previous contact us page also had an oversized hero image that hid all information underneath. The large empty areas were a poor use of space and only created more scrolling for the user. The store hours weren't aligned and spaced properly making it difficult to read.

I brought the address and phone number to the top so it's the first thing a user sees. I realigned the store hours to make them more readable and added a map function to see the store's crossroads. All information was brought to the forefront so the user doesn't have to scroll.

I also redesigned the following links and displayed them for comparison. As with the previous pages, I updated each for a consistent branding and typography. 

Menu Page

About Page

Press Page