Land O'Frost

Through research, we learned that users had three main goals on the site:

1. Looking for coupons to purchase products in store
2. Researching nutritional information about a product
3. Checking if nearby stores carry a particular product

On the existing Land O’Frost site, users were having issues getting necessary product information, and unable to access results on where to buy products. This was due to outdated info and broken links on the site. This, combined with the fragmented architecture and a mismatch of different brand identities caused the site to look disjointed.

While the user goals were our primary focus, the client also wanted to integrate evergreen content and showcase their recent ad campaigns. We balanced these objectives by integrating blog and recipe content alongside the product information throughout the site.

The main objective for this experience was consolidation. We wanted to keep users on the site by creating a focused interface that brought users where they needed to go and offer them curated content to enrich their journey.

Sections were created on the site to anticipate other user needs. To inspire future lunches, the product pages were dynamically populated with recipes featuring that lunch meat. We accomplished this by tagging all the ingredients used in each product, creating an easily searchable reservoir of content for every product on the site. We brought the coupons to the forfront by including them on recipe pages and the Where To Buy page. Every flow was carefully crafted to lead the user to the most optimal engagement with the product.

Land O’Frost is a brand that’s more than 60 years old. Our challenge was to push these styles in a direction that was modern and impactful, but kept the brand equity built over the last six decades. We stuck with the brand’s red, white, and blue pallette, but increased the saturation of the tone so that it could really pop in RGB. We brought in blocks of color with big type to create a confidence with the UI.

We focused on creating efficient and impactful spaces. The key to creating these spaces lied in color, type hierarchy, animation and scrolling. We used giant type for headlines to give the site a burst of color against white, and used color blocks to isolate content areas. Certain content areas were bind to singular elements and would transition based on the users scrolling patters. This approach helped unite the content, to make it feel as though it was part of a singular story.

We also wanted users to see the meat for more than just the package label. So we took the top selling products, and photographed some mighty looking sandwiches. This gave new perspective on the meat themselves, taking them away from flat packaging and creating more color and inspiration by showcasing the meats in different meal executions.

On the Product page, we split the scrolling experience in half and locked it in the DOM. The right side had free scrolling products while the left side was locked with a brand image. On the Where To Buy page, the UI to control product search was locked with the results, so you can adjust your search with the results loading in real time.

Our team used a style system with modular components build this site. Our system of components were built using Bulma as our CSS framework with Wordpress. The goal was to create robust taxonomies and field types to better organize the different pieces of data being fed into the different pages. This also added consistency for the admin as they added new information to the site. This fluidity from front to backend guided both users and admins alike to deliver a cohesive and usable experience.