back icon Back to all Work

Sweat with the Best

Gatorade wanted to celebrate it’s 50th Anniversary with a HUGE sweepstakes. It had to be 50 prizes of something.. so why not 50 experiences with Gatorade Athletes!? With a typical Under-the-Cap promotional framework, we needed a website that captured the excitement, essence and breadth of all the Athlete amazingness. Sweat With the Best.

The major goals for this project were engagement with Fans and selling Gatorade. The site itself would be the main, if not sole means Fans would be interacting with the promotion. It needed to be easy to use and easy to understand so that more Fans would come back, more frequently.

The following slides document my process - everything from a robust Sitemap ( IA ), fully functioning Prototype / Wireframes, to a dynamic, visually designed responsive experience.

My Role: UX Design, IA Architect, Art Direction, Usability Expert

Sitemap of the experience

Information Architecture

As the Lead Digital Art Director, I was solely responsible for plotting out the Architecture, the Experience and the Design. I also performed User Testing at different intervals in rapid fashion to iterate as early and quickly as possible.

Wireframe prototype of the experience

UX Concepts / Rapid Prototypes

After plotting out the IA, I ran through some rapid, loose prototype possibilities. I built these hybrid wireframes in Illustrator so I could demonstrate several variations of possible UX Patterns to the client. I quickly shared them with all the stakeholders in InVision to demonstrate both structure and some movement.

Wireframe prototype of the experience

Wireframe Prototype

This site and promotion were big deals for Gatorade, so I built a fully functioning prototype in Axure, with the intention of making sure everything was accounted for and behaving how everyone envisioned. You can view the Axure Prototype here.

The resulting Axure prototype consisted of over 24 Dynamic Panels to resemble the intended functionality of the promotional platform.

Wireframe prototype of the experience

Visual Style Concepts

Once the architecture was settled, I moved into Visual Design. Gatorade had a dynamic and compelling look and feel and I wanted to capture drama and heroize the atheletes. I went ahead and approached creating three different looks across the UX.

I relied on various color patterns to create possible systems that would make it easier for the Users to quickly scan. In each design I also attempted variations of culling any clutter, even with over 50 prizes. Grid systems and reduced colors helped keep feel clean, even though it still felt exciting.

Wireframe prototype of the experience

The Final Design - Landing

The final design pulled duotone colors into the overall look and feel to bring even more excitement to the designs. Keeping the Athletes in full color kept them feeling real and attainable, while the limited duotone system brought a nice energy to the UI.

Wireframe prototype of the experience

The Final Design - Landing scrolled

The experience needed to feel huge, which is why I chose a sticky left nav with a vertical scrolling content panel. With over 50 experiences, we wanted Fans to feel every bit of excitement over the huge assortment of Prize experiences.

On non-touchscreen devices, hover interactions gave the User quick details of each experience.

Wireframe prototype of the experience

The Final Design - Prize Detail

Here I let the Athlete imagery shine. But not so much that the description of what the prize actually was became affected. I included consistent mechanisms and UI elements that reminded Users when certain experiences were opening and closing for entry, and the ability to save and favorite experiences for later.

Wireframe prototype of the experience

The Final Design - Account

The Account was critical for this experience. It had be easy to use and understand so that Fans would keep coming back. Here they could enter codes they had found under caps, and check in on any of the competitions they had entered.

As I transitioned this over to Front End Development, I built an Interactive Style guide to keep things easy and simple. You can view it here.

Header Tile

Selected work I've created