Gatorade

Sweat with the Best highlights

• To celebrate its 50th Anniversary, Gatorade launched a sweepstakes offering 50 experiences with Gatorade athletes using an Under-the-Cap promotional model. The goal was to engage fans and drive sales through an easy-to-use, visually dynamic website—serving as the primary touchpoint for the promotion.

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

Information Architecture

• 

  A sitemap and promotional flows

  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.

• 

  Examples of low-fi concepts and rapid prototyping

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

• 

  Clickable prototype

  This site and promotion were big deals for Gatorade, so I built a fully functioning prototype with the intention of making sure everything was accounted for and behaving as envisioned.

  View the prototype here.

Visual Design Concepts

• 

  Multiple visual design styles as explorations

  Once the architecture was settled, I moved the team 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.

Final Solution

• 

  The landing page for the promotion

  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.

• ⇩

  

  The landing view 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.

• 

  Prize detail - Athlete experiences

  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.

• 

  Account detail and reward tracking

  The Account view and experience was critical for this solution. 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 statuses any of the competitions they had entered.