Personal project, December 2020 - March 2021
My Role: Competitive analysis, user research, end-to-end product design, and usability testing
Collaborators: Washington State University MBA candidates
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.
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 unconventional use of both 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 (coaching 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:
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. It makes support and encouragement more human. 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 license, I opted to use San Francisco Pro instead of Peloton's 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 a information 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 Noun Project: Rahmat Hidayat, Lemon Liu, iconsphere, Aybige, Lyhn, Binpodo.
Recipes by EatingWell.
