Moose Tracks Ice Cream

Website UI and Architecture Redesign

Moose Tracks Overview

The Moose Tracks Ice Cream phenomenon swept the nation in the mid-90s and continues today as one of the most recognized and popular ice cream flavors in the United States. The creative force behind Moose Tracks is Denali Flavors, one of the nation’s leading developers and marketers of innovative ice cream flavors.

Website Objectives

Our main objectives for the website were to simplify the architecture for easier access to their vast product line, highlight their philanthropic efforts by spotlighting their 10K Scoop events, and add more robust categorization for their blog to include free Moose Tracks recipes. We also wanted to amplify their brand image to truly reflect the company's fun personality.

The top of the Moose Tracks home page viewed from a smartphone
An animation showing what the Moose Tracks website home page looks like from top to bottom
The middle of the Moose Tracks home page viewed on a smart phone

User Stories and Website Architecture

Our first step in the design process was to re-work the website architecture according to a set of predetermined user stories. We took the goals of our client into consideration and created the user stories based on those goals. From there, we prioritized each navigation element based on importance highlighted in those stories.

The Moose Tracks website site architecture and user stories

Mood Board

I did thorough competitive analysis of other websites in the food and beverage space to see what features they might have been using for their website, as well as how they manage to make their brands seem more appealing. This gave me a sense of what types of stylistic elements to use, as well as types of fonts. I put together a mood board to give our client a sense. of what their website content could look like.

A mood board that shows the Moose Tracks color palette, photos of ice cream and samples of their written content in collage form.

Color Palette

The Moose Tracks dark blue color swatch
The Moose Tracks light blue color swatch
The Moose Tracks dark purple color swatch
The Moose Tracks light purple color swatch
The Moose Tracks pink color swatch
The Moose Tracks deep red color swatch
The Moose Tracks dark orange color swatch
The Moose Tracks light yellow color swatch

Typography

A list of typography samples used on the Moose Tracks website.

Layout Wireframes

After we established the company’s new architecture, fonts and colors, we moved on to the layout of the website’s key pages. We started off very low-fi with sketches and moved through mid-fidelity wireframes. These were used internally amongest the design team and not pitched to the client. 

Low-Fidelity Sketches

A set of rough pen sketches that show layouts for each Moose Tracks website page.

Mid-Fidelity Wireframes

A wireframe of the Moose Tracks home page
A wireframe of the Moose Tracks product page
A wireframe of the Moose Tracks overview page
A wireframe of the Moose Tracks 10K Scoops page
A wireframe of the Moose Tracks blog page
A wireframe of a Moose Tracks inside page layout

Final UI Screens

The Moose Tracks final home page design
The Moose Tracks final single product page design
The Moose Tracks final product overview page design
The Moose Tracks final 10K Scoops page design
The Moose Tracks final blog page design
The Moose Tracks final about page design

Outcomes From The Redesign

According to Moose Tracks' marketing team, the company saw a growth in users by more than 50% since launching. Some of it could be attributed to organic growth of the Moose Tracks Nation fan club, but it spiked after the redesign in ways that it never had before. With the improved mobile experience, as well as the more intricate funnels we set up, users are spending more time on our website and viewing more pages per session overall.

Growth in Users

0%

Since 2019 Launch
Time Increase

0%

Per Overall Session

Want to See The Final Product?