OVERVIEW
Salesforce partnered with Gatorade and Smart Design to bring sweat testing, personalized sports fueling, and recovery recommendations to all athletes without requiring a traditional lab. The vision was to design a digital ecosystem that combines wearable technology (designed by the experts at Smart Design) that captures an athlete’s sweat rate and electrolyte concentration directly from the skin with an app that processes the data using machine learning. Once the Sweat Patch’s data is collected via the app, an athlete’s sweat profile would be created. This is combined with scenario-specific details such as activity type, weather, intensity, and duration to generate personalized sports fueling recommendations before, during, and after exercise.
-18lbs.
Weight that Florida football coaches observed players were losing after 3 hours of practice
The team that I was leading was challenged with creating the application that would compliment the technology, leveraging the power of the Salesforce platform. Our vision for the application was the qualitative data from the Sweat Patch can be captured and processed with a phone camera using image-recognition technology that was trained with machine learning. The application would be highly sophisticated and tailored to the uniqueness of each athlete, making recommendations in real-time to achieve their maximum performance.
APPROACH
Smart Design had been working with Gatorade engineers to create the starting point for the solution: the GX Sweat Patch. It was designed to be an unobtrusive and highly-functional sports accessory by accurately testing and intuitively displaying the two key elements of hydration analytics: sweat rate and electrolyte concentration. The flexible patch is less than a millimeter thick and adheres to the forearm to maintain watertight contact with the skin. As an athlete sweats, fluid is absorbed through tiny holes in the back of the patch, causing a reaction that displays data in two channels.
THE SOLUTION
The key to the application was for it to be highly functional and data driven. We did not want the experience to be confusing or wrought with an over abundance of fussy design choices. Taking inspiration from the existing gatorade design system, we looked to enhance key moments with tasteful interactions.
One of the key pieces of functionality we had to get right was the ability to accurately capture the patch. This was critical to getting the most accurate data that we could present back to the individual. In the early days, we created a continuous testing loop that allowed us to observe and make design changes on a daily basis.
We also used these moments to test out some of our basic design treatments but focused more intently on form over function at this early point so that we could get the accuracy of the data captured.
We needed to ensure accuracy of the capture of the patch, so we created a loading screen that surfaced progress while data loaded int he background.
Early on, technical challenges for Engineering, Science, and User Experience emerged. It took additional effort to coordinate across mechanical engineering, software development, data security, sports science, design, and micro-fluidics. Some of the experience challenges we had to tackle included:
• Make the patch readable when taken with the opposite hand from many angles, against a range of skin tones, under different light conditions, using optical recognition software
• Create a connected, multi-platform digital experience and embed IoT devices and kiosk touch points with responsive web apps and SMS messaging
• Mock up prototypes using bleeding edge technology, quickly and well enough so they seemed to consumer testers like they were already in production
Coming out of our initial testing, we realized that color was going to be a driving feature to the GX Sweat Patch. We wanted to see explore how color could be a primary navigational feature for the app. From launch to monitoring status we looked across all moments in the journey to come up with a sophisticated but relevant scheme—gradients became a unique identifier to signal different stages of health and drive behaviors.
No action.
State of calm. A chance to stay informed but no required action is necessary.
Stay alert and aware of certain data or insights. You may be asked to take action but generally more of a heads up.
Requires immediate action in support of data. This is meant to create urgency to act in the moment with clear direction.
We initially used the existing design language that was part of the existing Gatorade ecosystem but wanted to expand the system a bit further, exploring our ideas around color, data visualization and use of use of interactions.
How and we displayed information would be critical to communication and we tested a number of different treatments.
Early on, we had to leverage existing salesforce components to test the functionality which provided some ability to test some design features.
Be aware.
Iconography and treatment of styling via illustration was also a key focus for the us. We wanted to make sure that elements were easily recognizable but served a purpose without interrupting the data.
We knew that data visualization was going to be critical so we took inspiration from the gatorade system, but also knew we wanted to push the concept further.
Take action.
Interaction patterns were also going to be a critical component of the experience. We wanted to offer some substance to moments in the journey but not be overly fussy or get in the way of actions or data.
Runners are inherently tied to data and devices that will compliment their workouts—smart watches being the primary device of choice. We wanted to make sure that we designed to meet them in these moments and tested our experiences with these devices in mind.
In the end, we were extremely exited with the results of our designs, continuous testing, and the final solution. While we were consistent with the brand tenants for Gatorade, we were particularly proud of the manner in which we shifted the design language and brought in a flavor of sophistication that was not as widely represented in a more energetic nad marketing tone of the brand.
OUTCOMES
Gatorade’s Sweat Patch and app started piloting in the fall of 2019. The pilot allowed us to hone Smart Design’s algorithms and test the patch under a variety of conditions to ensure the best results every time. We also used participant feedback to improve user instructions, address challenges with scanning, and ensure that results were communicated effectively. The GX Sweat Patch launched commercially in March 2021 in Dick’s Sporting Goods stores and online.
“When we started this journey with Smart Design and Salesforce, we always knew we would find an innovative solution to deliver personalized sports fueling and nutrition. What we didn’t expect were the many product and service applications that just kept presenting themselves as viable business growth opportunities —instead of one new product offering, we now have an ecosystem of offerings and impact on so many levels of our experience.”
– 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
#1
CES 2022 Innovation Award in the Software and Mobile App category