SPAM® Website Redesign
Project
UI/UX, Branding, Website Design
Role
Lead Visual Designer
Client
SPAM®
SPAM® has had an impact on the entire world. With the 80+ years the brand has been up and running, the impact on the world is phenomenal with their main reach in the United States, Canada, Australia, Japan, Philippines, United Kingdom, and China. People either love it or hate it, but in this household, we love that mmm mmm sizzle! Being sold in 41 countries worldwide, the SPAM® brand has over 20 varieties for consumers to try. Like their motto says, “Don’t knock it ‘til you’ve fried it!”
The Challenge
Resdesigning the SPAM® website to enhance user knowledge of the brand and reduce the website bounce rate.
The Solution
A new visual experience that declutters the previous site’s visual overload and reworking each page to encourage users to jump around to products, recipes, and learn more about their favorite food.
The Issue
The original website had eclectic clutter for a landing page with moving parts for each asset:
images
gifs
videos
Though it was interesting to look at, it easily overstimulated the mind like walking down Times Square. The eyes were pulled left, right, up, down, diagonal, and everything in between! The lack of white space and sectioning of categories, like on the home page, also made it difficult to navigate easily through the page. Pages were also not properly cross linked to engage users to learn more, make recipes, or stay on the site and explore what the brand has to offer. That quickly lead to users exiting the home page and not explore the rest of the site.
Out of 879,595 visits to the site, only 10,454 users returned, which ultimately lead to a 69% bounce rate. And with 1 million website visits in the past year, 78% of visitors left instantly.
Some original website screens
Original Site Map
The current site map (shown below) shows areas where pages link to one page and end there, resulting in user drop off. The ‘Shop’ page takes users to an external window to shop as well. We wanted to correct the dead end pages so user drop off rates lower and users get the information they are looking for with ease by:
Adjusting what is directly shown in the header navigation
Putting secondary information in the footer navigation
Implementing strong and apparent cross linking from page to page
The Redesign
By revising the site map (shown below) we:
Streamlined the navigation
Added in a new section called “SPAM® Brand Life”—letting users know about the fun exciting events and posts that come with enjoying SPAM® (like an extension of their social media)
Cross linking from page to page for ease on the user experience to correct dead end pages
Home Page
The original home page design was based on a bento box design showcasing eclectic, overwhelming, and stuffy visuals. Gifs of their product were moving around on their page in their respective sections all at the same time, overlayed text difficult to read, and your eye not knowing where to go in general is the explanation for why the 78% user bounce rate was so high for only entering the site.
Original home page
Revising the home page was like a site for sore eyes. Going from an eclectic collage of a home page to a streamlined sectioned out flow made understanding the page 100% better. Having a breath of fresh air and a sense of space on the page, user’s eyes know where a new recipe was or where the products lived. Liveliness was brought back in through new product photography to show off the juiciness of SPAM® while cross linking was also heavily implemented in areas such as varieties, history of the brand, and recipes so users can find out more about the brand and have a SPAM-tastic time!
Redesigned home page
All Varieties
Varieties is how SPAM® refers to their beloved canned meat. The original varieties page shows you a nice large picture of the canned meats paired with a matching background color to match the specific variety. On first look there is nothing wrong with the functionality for a product page but just it is overwhelming with color in your face every second you scroll.
Original varieties page
We gave the varieties page a facelift from the colorful sensory overload look to a streamlined modern look so consumers can easily see which product is where and what flavors they hold. Though the color was taken aback on this page that doesn’t mean SPAM® has any less spunk! We want clarity before consumers dive into the fun.
Redesigned varieties page
Selected Variety
SPAM® prides themselves on their varieties. Who doesn’t want to know more about their favorite flavored meat? Some good aspects of the page is showing user generated content, product reviews, and an okay job at showing related recipes. Aside from an outdated look, the main issue with the selected varieties page is the page doesn’t show that other SPAM® varieties exist. The only glimpse of anything else is some recipes to try the product in.
Original selected variety page
There is a lot of pride in SPAM® varieties, so on top of viewing the selected variety we added a carousel under the product description to quickly access all the other flavors alongside adding the recommended varieties that are shown later in the page to crosslink products wherever we can. Overall this was a way to encourage users to stay on the site and get more interested in SPAM® through their varieties or recipes specific to this variety!
Redesigned selected variety page
What are other ways to see other varieties?
The “Other SPAM® Flavors” section was added on the selected variety page so consumers can have easy access to the other varieties without having to go back to the previous page, scroll to find where other varieties may live on the page, and as well as becoming more aware that there are other varieties SPAM® has to offer. It works as a hover state and promotes more cross linking to other varieties as well. An image appears to the right of this bar to connect users to SPAM®’s Instagram page and promotes their user generated content.
What is SPAM® Brand?
‘What is SPAM® Brand’ took over the ‘About’ page. The term ‘about’ was vague to the popular search term ‘what is spam,’ hence a name change to connect more specifically to what SPAM® is as a food and product overall. Content on the page worked well in telling SPAM®’s history like telling consumers what the product is made off and the history of the brand and their product releases, so those elements were given a facelift to fit the new branding and incorporate a modern touch to the page.
Original what is SPAM® brand page
The functionality of the once known ‘About’ page got all the information we needed across of SPAM® history to users. With the new face for ‘What is SPAM® Brand’ we incorporated more delicious imagery of the popular product throughout the page to keep the refresh feeling up to date. We photo directed some of the imagery for the sight and used them for section banners and dividers to strengthen the identity of SPAM® and keeping the brand spunky.
Redesigned what is SPAM® brand page
Additional Pages
Where to Buy
With the excitement of SPAM®, the ‘Where to Buy’ page was added to give consumers a quick search on where SPAM® products are located in their area. Need SPAM® at Safeway, Kroger, or Aldi? Check with ‘Where to Buy’ and find out!
Restaurants
SPAM® is used in a lot more places than we think. A new addition to the site was a restaurants page to give consumers knowledge of what areas across the United States may have restaurants that use SPAM® in their menus. The functionality is like Yelp in a sense but just specifically for SPAM®. This function encourages user generated content: SPAM® lovers can upload a response to which restaurants that are using SPAM® in certain dishes if it wasn’t listed prior. The SPAM® love lives on for everyone!
SPAM® Brand Life
SPAM® Brand Life is an extension of SPAM®’s social media platforms that exists on this new version of their website. It is a place where fun images, videos, and stories can be placed that updates consumers about events and other fun spamtivities! The web page pays homage to the original eclectic home page.
Here are some GIFs I created for the SPAM® Brand Life page with assets the brand provided were also uploaded to their page as well.
With the revamped new SPAM® website, users are able to look around with ease jumping from product to product and recipe to recipe. We were able to encourage users to stay on the site and look around at what the brand has to offer and cut the bounce rate by at least 21%. The revamped pages also allow the brand to have flow and white space throughout the pages so users aren’t overwhelmed and can find things easily and encourage cross-linking on many pages to encourage users to browse the site even more.
