A year or so after launching, Beachbody on Demand was ready to explore partnerships and expand physical retail opportunities. We knew our user base was full of data junkies — integration with wearables (e.g. Apple Watch and Fitbit) was near the top of every feature-request survey. Duel partnerships with Wahoo and Apple were already underway (more on that later), so the product and design teams set forth to explore what device integration experience had the most promise. This project aimed to increase the value of the product and retention by:
- Making the workout experience on all devices more engaging
- Integrating heart rate data from Apple Watch and Wahoo TICKR in a meaningful way
- Exploring how heart rate data could be used for competitive experiences
- Creating benchmarks and ways to improve personal performance
- Serving a seamless multi-screen experience
The final product on tvOS, iOS and Apple Watch. Visual design by Karin Nord and Marianne Leoncio.
Remember, this is back in ye olden days of 2016. Relaying real-time heart rate data across devices was in its infancy. At the time, no competitor had this kind of experience. We were trailblazing, and the trails were complex.
Also, our timeline was incredibly condensed. If successful, we were to be featured at WWDC, which was a little over 2 months away. Not to mention, we had a time boxed retail agreement with Wahoo and Apple to sell a bundled Wahoo TICKR in Apple stores. We needed examples of the experience for marketing and packaging in time for printing.
From a UX perspective, the challenge was to make the integration elevate the experience as opposed to complicate it. Simply showing the numbers you can see on your wrist on the TV was not going to suffice. This had to give the user something they didn’t have before.
Being in the health and fitness industry, one of my North Star questions is “Why are some people reaching their fitness goals while others are not?” We already had a wealth of in-person (or Zoom) interviews and surveys pointing toward three key attributes. The successful users were:
- Persistent. They stuck with a program.
- Driven. They wanted to do better than they did yesterday.
- Accountable. They often worked out with another person or group, though not necessarily at the same time or in the same room. (Think a Facebook group where everyone is scheduled to do the same workout.)
We needed to create an experience that gave users data points to improve upon, a way to engage with others and of course a reason to come back tomorrow.
With time of the essence, we got down to concepting. After a few death-by-whiteboard sessions we decided to use a service called PubNub to relay realtime data between a user’s devices. This would allow a workout to be started from either a phone or Apple TV. Flows looked a bit like this:
Flows and wires happened pretty simultaneously. The features we moved forward with were:
- Heart rate overlays for both iOS and tvOS, Including both beats per minute and zone
- Alternate player view showing ghosted heart rate data from last time user did the same workout
- Ability to compete against another user in the same room
- Apple Health integration
- Profile with historical workout and heart rate data
A Few tvOS Wires
Single user views
Heart rate is displayed on top with a ring of color to match the user’s active zone. Below that is the number of calories burned.
An alternate view shows an inset video with a heart rate timeline displaying a ghosted line of the last time the user completed this workout.
A post-workout summary featuring the timeline, total calories, max heart rate, total time and bar chart of time spent in each zone.
Two people’s heart rate info is displayed together to spur a little healthy competition.
The same alternate view is provided with the two users’ heart rates stacked.
A post-workout summary featuring both users’ workout data in an easily comparable grid layout.
A Few iOS Wires
The greatest complexity came with device setup and first time user flows. We had to work with a number of variables: Wahoo TICKR vs Apple Watch, returning vs new user, paid vs free accounts, etc. The business requirements were complex as well. For example, the user that purchased a “bundled” TICKR got a free year membership to BOD. This applies to all users, even if they already have a paid account. So we had to clearly message the difference between, say, a new account with a free membership and an existing paid account with an extended membership. All the flows also required designs for “unhappy paths” or error states and alternate routes. Some of those flows for you to squint at are below. You can navigate between the multiple flows with the left / right arrows.
After some scrambling we had a working prototype. Time for live testing. We recruited some kind souls to come into our office and do actual workouts. Some used an Apple Watch, some a Wahoo TICKR. Some worked out with another person, some solo.
The major finding was the unavoidable latency in the Apple Watch’s data made for what appeared to be a broken experience. Often times when a user would increase effort their heart rate would incorrectly appear to be static and then skyrocket. There was also sometimes a significant delay in establishing initial connectivity. Since these limitations were with the watch, we had to solve with good ol error states. We implemented loading and error states for these moments of lost or delayed connectivity.
For the sake of not making this any more of a novel than it already is, I won’t go into the first time user setup flows. Just trust me when I say they were labor intensive.
I’m happy to report we made all our ambitious deadlines. We were featured in the WWDC keynote and our product was on Apple shelves. The caveat is these deadlines meant punting on some key features. The competitive mode and benchmark heart rate mode were pushed to v2.
Look it’s us up there!