+1 212 807 8150
info@smartdesignworldwide.com

Expanding the field: The prototyping journey of the Smart Gx Bottle

Eva Peng
Design Technologist

For IoT devices to deliver new kinds of experiences, success depends on integrating technology into the familiar form factors in our daily lives.

For the Gatorade Smart Gx Bottle, this was especially true. It’s a device with a clear purpose: to deliver personalized hydration recommendations to everyday athletes, without the need for a professional lab or hydration coach. Realizing this goal took tremendous focus, especially on the task of accurately measuring hydration intake rates, while maintaining exceptional usability for athletes. Balancing these two needs became the work of the Smart Design technology team through an iterative, multi-stage product development process.
 
The only way to ensure this level of usability is through extensive prototyping and testing. From early prototypes made with off-the-shelf parts to a consumer-ready product, each iteration’s near-term vision was different. Yet we found a few simple principles that persisted across the development of the Smart Gx Bottle:
 
1. The best design happens on the field, not in the lab
2. Optimize your prototypes for learning potential
3. Bring in the right experts at the right time

On the field

The Smart Design team testing with professional athletes at Michael Johnson Performance® in McKinney, Texas.

The best design happens on the field, not the lab

The Smart Gx Bottle is designed for use in athletic training and competition: environments where a lot is going on, quickly, and a lot of people are interacting. To create a unified experience in this environment, we conducted numerous pilots with athletes at sports academies and in collaboration with professional teams, to ground each iteration of the Smart Gx Bottle in a real-world context. Even though each prototype was at a different level of technological maturity, together they provided a unified experience we could use to create benchmarks for subsequent iterations.
 
Our first attempt was a rudimentary bottle with no UI, which tracked hydration rates using a mechanical impeller — essentially a tiny “reverse-propeller” that rotates as fluid passes through it. Despite this being a mature technology in agricultural and industrial applications, it failed in several edge cases when used by professional athletes. On the football (soccer) field and the basketball court, different combinations of location and intensity made it so inaccurate that it had to be abandoned.

New challenges

An early version of the Smart Gx Bottle used a mechanical impeller to measure fluid passing through the cap.

New challenges

An early version of the Smart Gx Bottle used a mechanical impeller to measure fluid passing through the cap.

“In football (soccer), we found the biggest problem is that it’s so intense and athletes don’t really get breaks,” explains Boris Kontorovich, Principal Engineering Director at Smart Design. “You have 20 seconds to drink. The first shortcoming of the system was if somebody drank halfway and they’re squeezing the hell out of the bottle, they’re pushing a mixture of air and water. Mechanical impellers can’t tell the ratio of how much water and how much air is coming through.”
 
There’s nothing new about adapting existing solutions and course correcting based on insights on the field. And while there is a rich supply of off-the-shelf hardware and open source code that has sped up the iteration cycle considerably, it was clear we had to head in a new direction, with a new kind of sensor.
 
Partnering with ImpacX, an Israeli technology company, we started exploring a passive sensor. Instead of measuring flow rate, it bounces laser light off the surface of the liquid in the bottle to measure how much remains.

Designing on the field and prioritizing practice over theory led to some serendipitous discoveries that challenged our underlying assumptions:

Hearing coaches talk about the difficulty of enforcing adequate hydration helped us understand the balance between accurately tracking hydration and remembering to hydrate at all. That prompted us to refocus our efforts on increasing an athlete’s baseline hydration through reminders and directional guidance. Observing that competition and practice spaces are usually phone-free environments, we developed a cap-based LED interface specifically for on-field experience, while continuing to develop the app-based interface for off-field experience.

New interfaces

Developing an on-field experience using LEDs so athletes would receive hydration guidance without needing to look at a phone.

Mirroring the design language

Providing personalized hydration guidance with an on-bottle LED interface and more detailed hydration tracking analytics via the Gx App.

Mirroring the design language

Providing personalized hydration guidance with an on-bottle LED interface and more detailed hydration tracking analytics via the Gx App.

Optimize your prototypes for learning potential

Every iteration of the Smart Gx Bottle included a tight feedback loop, where we put a concept into a pilot situation, and observed its performance to inform the next concept. In later phases, a high-fidelity prototype informed the development of the iOS app. Other elements of the broader Gx Ecosystem: the Gx Sweat Patch, Gx Pods, and a digital check-in station benefited from this same process.

High-fidelity prototypes

Evolving the onboarding flow to provide athletes the option to personalize (through color) their activity and bottle hydration experience.

Non-essential parts of the app experience were “Wizard of Oz’d”

Using a combination of no-code tools and prototyping frameworks we mocked up just enough of an experience to present a convincing frontend — a technological form of hand-waving. For example, instead of creating an entire sign-up user flow, we simply hardcoded each athlete’s profile into Firebase, saving days of work without losing any opportunities to capture relevant insights.

From profiles to activities

Activity-type templates were used to scale scheduling across many athletes during the pilots quickly.

From profiles to activities

Activity-type templates were used to scale scheduling across many athletes during the pilots quickly.

One of the trickier features we had to test was the concept of Daily and Practice hydration modes.

Hydration is a set daily volume, while the amount athletes were expected to drink during practice depended on their individual profile and the sport they were playing. Daily and Practice modes had corresponding LED colors on the Smart Gx Bottle and on the app. To avoid the complexity and time required to build a scheduling tool and additional forms, we hard-coded the colors and team members and updated practice times in the database overnight.
 
During app onboarding though, we saw that high school athletes in our pilot were skipping past text-heavy informational screens that explained things like bottle usage and Daily vs Practice mode. As a result, they were getting confused when the Smart Gx Bottle’s color changed during practice. Because of that observation, we focused our next development efforts on building out a flow for selecting personalized Daily and Practice color modes. This not only solved the confusion issue, but increased athletes’ sense of ownership over their individual bottles.
 
The broad lesson here is that hard-coding and other “Wizard of Oz” techniques can be a great way of showing you where to focus your efforts, and prioritize which parts of an app to extend, and how.

Applying new learnings

Eva Peng (left), Design Technologist at Smart Design, testing an updated app onboarding experience with a high school athlete.

For prototyping the app we chose React Native, for a couple of reasons.

First, it’s built on JavaScript, whose popularity brings a huge variety of pre-existing libraries. That makes integrations easier, generally speeds up the prototyping process, and provides more flexibility about where to invest development time. Second, it has a large and active community around it that’s passionate about cross-platform development. This means there’s a deep knowledge base to tap into, and React Native’s approach to unifying development across devices makes sense when prototyping to maximize reach and code reusability.
 
It also helps to consider who’s on your team to support underdeveloped software. While some team members were on the field observing athletes, others were orchestrating the next day’s activities by changing database entries on the backend. For the athletes, though, it felt like any other day on the field.

Involve the right experts at the right time

Each phase of technology development for the Smart Gx Bottle began with a near-term vision which drove the prototyping, and the composition of the project team. The core team was made up of designers, engineers, and technologists. We also had an extended network of technology partners and experts who were pulled into the project along the way. Critically, our deep partnership with the teams at Gatorade and the Gatorade Sports Science Institute (GSSI) allowed us to tap their expertise in hydration and athletic performance—invaluable in making key decisions about design priorities and features.
 
The technologist and philosopher David Weinberger has described the Internet as a construction of “small pieces loosely joined” — a phrase that also aptly describes our approach to building and running a project team.
 
Often, we worked in parallel without waiting for a finished product. For example, while the Smart Design team worked on integrating an early version of the Smart Gx bottle firmware for the app, our sensor partners at ImpacX were developing a firmware update that could support multiple hydration tracking flows during Practice mode.
 
The logistics of running pilots with athletes – from onboarding to recovering the prototypes of the bottles afterward, was also codified over time. The dynamic nature kept the team lean and focused, empowering us to move quickly, while the larger network of GSSI professionals, facility coordinators, and related partners were there to support all of our efforts.

Conclusion

While the examples presented here are all from iterations of a single product, the Smart Design team has worked on numerous IoT device projects and discovered that the principles illustrated here are universal.
 
IoT is still a relatively young field, with technology that’s rapidly changing and plenty of potential yet to be realized. As the global body of knowledge around IoT development expands, the principles used in the development of the Smart Gx Bottle will continue to develop and be adopted over time.
 
Building an ecosystem isn’t easy, but using principles like this can help you develop better products and services that make computing a more natural part of daily life.

Credits

Smart Design’s design and technology team
Athletic testing facilities – IMG Academy & Michael Johnson Performance®
Gatorade & GSSI
Technology partner – ImpacX
Various Open source contributors

About Eva Peng

Eva Peng is a Design Technologist who brings together technical know-how and user experience design. The Swiss Army knife of the team — she enjoys bringing designs to life and answering questions through technology. Previous stints were at frog design and The New York Times. Notable clients include Walmart, IBM, Square, and United Technologies. Eva holds a BFA in Architecture and Human Computer Interaction and a Masters in Information Systems from Carnegie Mellon University.

Let’s design a smarter world together

Get in touch
Explore more
Gatorade

Gx Ecosystem

 
Gatorade

Smart Gx Bottle

 
Gatorade

Gx Sweat Patch