Expanding the field: The prototyping journey of the Smart Gx Bottle
For IoT devices to deliver new kinds of experiences, success depends on integrating technology into the familiar form factors in our daily lives.
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.
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.
Optimize your prototypes for learning potential
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.
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
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.