GATORADE GX: ATHLETE STATION
Helping athletes become
more aware of their hydration needs.
Tablet UI Design (2017)
Currently being used by international soccer to college
sports teams, and NFL to NBA, Gx is a holistic digital
/physical platform that services the hydration and fueling
needs of athletes, based on their inner/physical differences,
weather conditions, exertion levels, and exercise duration
that they might experience across a variety of activities.
I worked on the UI Design for the Gx Station, a physical weight scale with a digital screen that
athletes use before and after practice. I also prototyped my designs internally with the team.
ROLES
UI DESIGN
PROTOTYPING
The Station informs athletes of their fluid,
fuel and recovery needs and tracks weight
and dehydration.
GX STATION IN USE
DESIGN GOALS
In it's first year, adoption of the Gx platform was tightly linked to weight tracking due to a universal need across all sports and streamlined experience the station provided. Based on feedback, there was an opportunity to educate the athlete about their fueling needs for the long term during the short moment they are stepping on to the station.
MAKING THE CHECKOUT
SCREEN MORE USEFUL
The last thing an athlete saw during their check in experience was a recommendation on how to hydrate pre-activity or recovery post activity. However, the static screen only communicated the recommendation, but not really giving much context of the severity of their dehydration or overhydration.
The concept of an odometer helped to visually communicate to
athletes how much sweat was lost during each session and colors to establish
the risk level.
TEST #1
The concept of animating a meter depleting as more sweat is lost worked in theory to show the risk, but there was also edge cases where the athlete would overhydrate, so this did not work.
TEST #2
Through this concept, the segments help the athlete clearly see how severe their hydration risk is on target, low, medium, high). If the athlete overhydrated, the bar could fill up the same way as the animation focused on risk building up, as opposed to sweat being lost.
BRINGING IN
MORE CONTEXT
The odometer concepts helped establish an athlete's risk level but the idea of a weight scale would help educate athletes on where they actually were (under/over hydrated) to where they should be (on target). Considerations for different variations revolved around key elements I wanted to bring out.
• Transitioning between risk levels: Gradients were considered as overhydration (>0%) was the same color (red) as dehydration (<3.9%)
• Highlighting exactly where athletes were: Real world metaphors (light switches, magnifying glasses, flashlights) were considered
• Simpler, concise copy: Placement/Variations of copy elements were tweaked with the goal of limiting different copy lengths appearing on screen
FINAL DESIGN
The final design revolved around splitting
a circle into 16 segments due to the risk
percentages being unequal in number to
each other. Copy terminology for status
fields were rewritten so that athletes would
always expect where to look instantly when
the screen appears.
>0.1% Overhydrated (High)
0% to -2% On Target
-2.1% to -3% Low
-3.1% to -4% Moderate
-4.1% to -6% High
