Personal coaching and tailored wellness plans in the Peloton at-home fitness app
A personal project, not made in collaboration with Peloton
I owned and led teams through many of this project's phases:
"Now, having access to this technology in Hyperspace will further our ability to gain situational awareness and access to accurate, timely information that helps us treat the patient to the best of our ability in the moment."
"Perhaps the biggest “wow” moment of the day, based on audience reaction, was the demonstration of an “Alexa meets Epic” technology of sorts — voice-recognition software designed to let doctors conduct patient visits without using a keyboard... 'That visit took zero clicks and zero keystrokes,' Gerhart said to audience cheers."
" 'We’re out here in the middle of a parking lot. But each tent has handheld devices that look like smart phones. They’re called rovers. And in real time, the (health care providers) are logging into Epic, (the medical record),' Deanda said. At the push of a button, providers could track their patients so they could quickly get to the important task at hand, pushing vaccines into arms. 'The secret sauce is IT,' said Zane."
"Epic, for its part, noted that the company expects to add up to 100 additional sites in the next 30 days. The vendor also said its software is being used to administer approximately 500,000 vaccinations daily, both at mass vaccination sites and traditional clinical settings."
"The high-volume vaccination sites, like the new site at City College, will be complemented by targeted efforts to ensure communities most highly-impacted by COVID-19 receive equitable access to the vaccine. These targeted efforts include mobile vaccination teams, community vaccination sites, San Francisco Department of Public Health’s community clinics, and other safety net clinics in neighborhoods such as Chinatown, the Mission, the Western Addition, and the Bayview."
The work on this page is from Epic's annual Users Group Meeting (UGM). Like WWDC or I/O, company leaders deliver presentations at this conference to discuss industry direction, announce new products, and celebrate what the community using Epic has done to advance patient care. Thousands of executives attend every year.
I got involved working on the show’s visuals and motion graphics in 2015. Since then, I’ve become a storytelling collaborator with presenters — synthesizing content, refining messages, and crafting cohesive multimedia narratives.
Working on these heavily-themed presentations has stretched me stylistically as an artist and designer. I never thought I would be digging into a groovy aesthetic for the “Summer of ‘79 Rockband” themed show.
"He’s creative, designed great slides, and offered good feedback on talking points and structure of the presentation."
As you can imagine, there’s a big team of designers behind these shows. Over the past few years, I’ve taken on more project management and design direction by organizing teams to produce highly-polished work at lightning speed, keeping us all on track and in sync with the rest of production.
It was surreal when, more recently, I wore both 'designer' and 'presenter' hats while representing Epic at a different organization's conference. Assisted by the content I designed, I got to walk users through what Epic can do and some exciting concepts in the works.
"In addition to working on the Executive Address, Eric stepped in and helped lead the User Experience Designers for this year's Cool Stuff Ahead slide design. He is enthusiastic, a great communicator, and a natural leader. I would be happy to work with him again on a project!"
"Eric is a great listener, understood my feedback on the slides and messaging. He’s very intuitive and creative. He was extremely receptive and his next pass was always considerably better. He was a pleasure to work with."
All of these works are owned by Epic. I was responsible for each of these visuals, which are a combination of scratch-made assets, stock material remixes, and contributions from co-designers.
Certified nutritionists and fitness coaches create achievable plans tailored to a person’s goals, health history, and lifestyle.
Those plans, the material needed to carry them out, and personal coaching are conveniently accessed through the already-successful Peloton at-home fitness app.
Clear progress indicators, social support, and financial incentives are all delivered in-app as encouragements along the journey to wellness.
I added competitive analysis and user research to an MBA candidate team's market research. I then designed the product, from info architecture to prototyping, testing, and a high-fidelity pass. More about the process is here.
Frankly, it was weird not working with their designers on this project. The Peloton app has some very nice touches alongside decisions I found surprising — all things I’d like to hear more about.
Look for this tag:
in the Product section to read my response to some of those decisions.
The Process section has even more, like why I choose to replicate their use of a top and bottom tab bar for navigation.
Peloton's current Classes screen (left) shows the double tab bar navigation.
Class Details (right) largely inspired the Recipe Details screen I designed below.
More and more, health insurance providers are offering rewards for members who take steps toward healthy living. Humana, just one example, offers gift cards for exercising a set number of days. Submitting a record of one's activity is sometimes a manual, multi-step process.
One of the MBA candidates introduced me to Well when it was still an idea for their capstone project. I loved the problem space they were working in. As someone who has tried many different meal and fitness plans with mixed success, I could relate to it.
I had also been fascinated by the takeoff in telehealth during the COVID-19 pandemic. This product would feature an analogous experience (coach meetings) where I could explore some design patterns I had on my mind.
Since Peloton Well is tailored to each user's unique needs, the product mockups below are framed in an individual user's journey to wellness. Susan, our user, is a persona generated from user interviews. Here's a bit about her:
After agreeing to try out Well, Susan is asked a few simple questions that inform which service is recommended for her. Once signed up, she can sync her health insurance, then fill in more details based on the services she’s interested in. All of this informs her first coach meeting and wellness planning.
This mockup can scroll.
A couple months after that first coach meeting, Susan is in the groove with a nutrition and fitness plan that supports her goals. She visits her Plan daily to track the meals and workouts prepared by her coaches. From here, she checks out how to cook dinner before her next coach meeting.
This mockup can scroll.
This mockup can scroll.
Reviews of other apps mention the tedium of logging meals and workouts. Subscriptions offer full meals with quicker logging, but none offer pre-selected meals catered to a user’s goals.
Frustration with data entry was reinforced in the interviews I conducted:
"It’s hard to craft a plan to log it, and it was also difficult in the app. I would say '3 eggs' and it would give me 15 different options of how to make eggs. Some of those may be valuable, but a lot of times, they’re not."
"I'm looking for a simple, rudimentary tracker, not an olympic athlete level of precision."
Meals and workout classes are both accessed from the Plan, so 'Recipe Details' has a consistent layout and style with Peloton’s 'Class Details' screen. If working with Peloton, I’d experiment with how prominent the topmost summary stats are compared to the hero image.
Clear, accurate information helps folks understand the impact a meal will have on their plan. It can guide them to wise dieting decisions, and by extension, help in achieving their goals. I was glad to see the nutrition visualizations were understood by all users during task-based testing. From one of them:
"Oh that's cool, underneath, it shows what my calories will be! I've done MyFitnessPal and Weight Watchers, and I've never seen that idea. Really cool!"
Susan wants a refresher on her progress before her coach meeting. The Goals screen show her what’s new and where she is on track. It’s encouraging to see her Peloton milestones, team goals, and potential rewards here too. A broader historical view of what impacted her goals is a tap away.
This mockup can scroll.
Other products struggle with giving a brief bird's-eye view of wellness information. Some provide data of questionable relevance or meaning to someone’s personal goals. From a few App Store reviews:
“I saw that my sleep had been given an arbitrary 70-something score which I cannot remove to just view the actual data. It’s on every screen. That’s a C on a test. I felt miserable and like I wanted to give up”
“Now the new app has changed to this ugly list layout where you have to scroll and click to find the things you used to be able to see and understand clearly with one glance. I feel so sad now when I open my app.”
Most participants felt the dashboard was clear and gave the right sense of progress at a high-level. The wording on a few widgets, however, caused confusion for most participants. I iterated to add clarity, wrestling with how many words to add in a compact space. I'm still running tests to vet this.
I would need substantial continued feedback from users on this dashboard. It’s the hardest to test when it’s meant to be unique to a user, and the content could vary so greatly. I want to know what stats speak meaningfully to different goals, and how folks feel when they see their data.
Beyond this screen, I’d like to design a celebration experience for when a user achieves their goal. I imagine a fun notification, motion graphics, and a coach’s congratulations.
Susan is notified that it’s time to meet, so she jumps into the call. It’s easy to review her plan and goals, or even take down notes, as she reviews the last few weeks with Maryanne.
This mockup can scroll.
In-app video coaching differentiates Well from other products, and is perhaps the most unexplored space in the market. Peloton already has a video call feature for Bikes and Tread, so I assumed there would be a low barrier for them to implement this service.
These videoconferences could be much like telehealth visits between doctors and patients. I’ve heard from physicians how valuable it is look at the same info, when coming to a mutual understanding of a patient’s health. It’s important to do that while maintaining the sense of presence from speaking face-to-face. I was excited to design this all-in-one view.
"It's nice that those [sidebar features] are all built in, and I don't have to toggle... or don't need to be on multiple devices. I’m thinking of when I was online teaching, I needed so many devices to see everything at the same time."
"It's just right there. I'm very happy that it doesn't take my coach off screen… I have space to see everything — it feels nice."
If this product was live, I'd use feature tracking to see how often Plan, Goals, and other tabs are accessed to inform discoverability and real estate tweaks.
After the meeting, Susan is brought to the Coaching screen, which keeps track of all her interactions with Maryanne and Crystal.
I was concerned folks would mistake Messages for Meetings and vice versa. None of my participants mis-tapped here, but some hesitated between the two. After further distinguishing these sections, I’d still like broader data to inform if more change is needed.
Users can see a record of all past meetings, with snapshots of their goals and plan at the time alongside notes they took down. I assumed this wouldn’t be used too often, so I put it a tap away. I’d implement feature tracking to test that assumption.
The next day, Susan is about to log breakfast when she’s notified of new Social activity. The workouts, meals, and achievements her teammates have posted even give contextual tips to Susan based on her own plan.
This mockup can scroll.
My MBA candidate collaborators first identified the opportunity with a combination of academic article review and surveys of potential customers. They identified Peloton as a promising partner, defined a feature set that would fill unmet needs in the market, and verified the potential success of the product with a choice-based conjoint analysis.
I sat down with a few folks to get a sense of their wellness goals, what success looks like to them, how they collaborate with others, and experiences they’ve had with other products. I used one interview to craft the story and content of a lightweight persona: Susan.
I also investigated the typical content of nutrition plans, fitness regimens, and health plan rewards.
I explored a number of nutrition-tracking and fitness apps and read app store reviews to get a sense of where Peloton Well could offer a better user experience. Here is some of what I found:
Creating something that fit right into an existing app meant understanding their info architecture, tone, typography, iconography, palette, padding, controls, and intentional departures from platform convention.
I'll admit one inconsistency in my designs: to save a bit of cash, I opted to use San Francisco Pro instead of licensing Abitare Sans.
Figuring out how to organize all the proposed features into the existing app was a challenge. I considered three options:
I reviewed these with the MBA candidate team, weighing each against Well’s value proposition and users’ needs. We decided that fracturing the Peloton experience (3) or nesting Well too deep in the app (2) could make everyday use frustrating, and make it hard for users to connect the dots between executing their plan and the encouragement they receive in turn.
One cohesive tab (1) offered the most accessible, efficient, and cohesive experience. And, a top tab bar for sub-navigation hierarchically under the bottom tab bar is a pattern that Peloton already employed. I assumed this pattern is, while unconventional, vetted and working well for Peloton users.
I decided the Well tab would replace the existing Featured tab, assuming the latter was not often used. I then planned a few usability testing tasks to assess if the navigation posed issues to new users. That testing showed the double tabs caused minor confusion, but nothing that impeded workflow completion.
Here’s a few more routes I’d pursue to inform this decision if I was working on this product with Peloton’s UX team:
I designed and conducted a formative study assessing task completion and subjective ease of use. Results were consistently positive across tasks and participants except for interpreting the wording on a few goals widgets. I iterated between rounds and participants found that dashboard increasingly clear.
I held a critique with UX designers and researchers from a few industries. They offered great feedback on how to present information and how to make Social content more compelling than comparable apps.
The last thing to do was flesh out some content and polish a number of graphics throughout the app. Check out the final product above.
There’s a number of ways to expand and iterate on Well’s features, content, and experience. Here are some that I find more interesting:
Though it offered an info architecture challenge, working within an existing app and design system was engaging throughout the project. I’m used to both building things from scratch and scrappily borrowing from existing patterns. This project afforded me a healthy mix of both.
In taking stock of the Peloton app, I realized just how different my Android’s feature set could be from iOS. Whenever I needed an up-to-date look at how the app was designed, I had to borrow a buddy’s iPhone. It made me wonder if I should switch back to being an iOS user to get the latest and greatest.
Photos by Coqui Chang, Louis Hansel, Beci Harmony, and Dr. Josiah Sarpong on Unsplash; and Victoria Borodinova, Zen Chung, Hannah Nelson, Samarth Singhai, nappy, ‘the happiest face =),’ and tomateoignons on Pexels.
Some icons were made by these artists on the Noun Project: Rahmat Hidayat, Lemon Liu, iconsphere, Aybige, Lyhn, Binpodo.
Recipes by EatingWell.