Gatorade X

Project Type: Product

Role: Creative and Strategic Direction

Deliverables: Vision & Strategy, UX Research, Design System, UI Design

Introduction

Salesforce, Gatorade, and Smart Design partnered to make lab-grade sweat testing accessible to all athletes. The goal: create a digital ecosystem that uses a wearable Sweat Patch to measure sweat rate and electrolyte levels, then process that data through a machine-learning app. The app combines an athlete’s sweat profile with context—activity type, weather, intensity, and duration—to deliver personalized fueling recommendations across the workout.

Players were losing 18 lbs during 3-hour practices, according to Florida football coaches.

This vision created a clear design challenge: how to translate complex biometric data into simple, actionable guidance athletes can use in real time.

Approach

Smart Design worked with Gatorade engineers to create the GX Sweat Patch, the core of the system. Thin, flexible, and nearly unnoticeable, it adheres to the forearm and measures sweat rate and electrolyte concentration. As sweat is absorbed through micro-holes on the back, the patch displays data across two channels, giving athletes clear hydration insights in real time.

I led the team responsible for designing the application that brought the Sweat Patch technology to life through the Salesforce platform. Using image recognition and machine learning, the app could capture data from the patch through a simple phone scan and translate it into personalized, real-time fueling recommendations for each athlete.

The Solution

We designed the app to be data-forward and easy to use—avoiding unnecessary visual noise or complicated UI patterns. Building on Gatorade’s design system, we introduced clean, intentional interactions that elevated key moments without overwhelming the experience.

Accurate patch capture was essential—without it, the data and recommendations would fall short. To get this right, we established a rapid testing loop that enabled daily observation, iteration, and design improvements.

We explored early design treatments but focused mainly on capturing accurate data.

  • To improve capture accuracy, we introduced a progress-loading screen that surfaced status while data processed behind the scenes.

  • In the early stages, we used out-of-the-box Salesforce components to validate core functionality and experiment with basic design elements.

  • Recognizing the importance of data visualization, we used Gatorade’s design system as a foundation—then expanded it to support more advanced and athlete-specific insights.

Early technical and UX challenges required close coordination. Key issues included:

  • Ensure the patch could be accurately read from multiple angles, with either hand, across diverse skin tones and lighting conditions, using optical recognition.

  • Design a connected, multi-platform digital ecosystem—including IoT devices, kiosks, responsive web apps, and SMS touch points.

  • Prototype bleeding-edge technology quickly and convincingly so that testers experienced it as production-ready.

Color became central, so we designed gradients to guide navigation and signal changing health states.

  • No Action

    State of calm. A chance to stay informed but no required action is necessary.

  • Be Aware

    Stay alert and aware of certain data or insights. You may be asked to take action but generally more of a heads up.

  • Take Action

    Requires immediate action in support of data. This is meant to create urgency to act in the moment with clear direction.

We built on Gatorade’s design system and extended it with new ideas in color, data visualization, and interaction.

  • Because clear communication depended on how information was shown, we tested multiple design treatments to find the most effective approach.

  • We refined iconography and illustration to keep elements clear and recognizable while ensuring they supported—rather than distracted from—the data.

  • Interaction patterns played an important role, and we focused on adding substance without getting in the way of actions or key data.

Runners rely heavily on data and devices—especially smartwatches—to guide their workouts. We designed with these moments in mind and tested the experience across the devices they use most.

Ultimately, we were extremely proud of the final solution, shaped through rigorous design and continuous testing. We maintained Gatorade’s core brand principles while elevating the visual language—bringing a level of sophistication not often seen in its traditionally high-energy, marketing-focused style.

Outcomes

The Sweat Patch and app entered pilot testing in fall 2019, giving us the opportunity to fine-tune Smart Design’s algorithms and validate performance across varied conditions. Feedback from athletes helped us improve instructions, scanning reliability, and result clarity. The GX Sweat Patch launched commercially in March 2021 at Dick’s Sporting Goods and online.

“We expected to build an innovative personalized fueling solution with Smart Design and Salesforce. What we didn’t anticipate was how many new product and service opportunities would surface—turning one offering into a full ecosystem with broad business impact.”

— Chris Hintermeister, Director of Ecosystems and Digital Platforms, Gatorade

#1

Moved Gatorade to number 1 in the sports and fitness category for the first time

+8%

Growth in global sales YoY since introduction of the patch and broader ecosystem of product offerings

4.6

Average rating on the apple app store

#1

CES 2022 Innovation Award in the Software and Mobile App category