Elevating the iFIT TV app experience with workout series & monthly challenges
Overview
Background
iFIT started out as a fitness app embedded in NordicTrack, Pro-Form, Freemotion and Matrix equipment. Think treadmills, spin bikes, elliptical trainers, and rowers. iFIT then expanded to a mobile app with an updated catalog including classes that don’t require equipment, like yoga, pilates and strength workouts.
Given iFIT's diverse offerings of global adventures around the world and dynamic studio workouts, the transition to a TV app was the natural progression, providing users with an immersive experience that truly comes to life on the big screen.
I was fortunate to be part of the team contracted to design the MVP for the iFIT TV app. After the initial TV app was released, I became the lead designer for the dozen of features that came next. One of those features was to incorporate workout series and challenges into the TV app.
The Problem
Workout series and monthly challenges play a crucial role in the iFIT experience: they keep users engaged and motivated. A major point of frustration for users was that they could start series or challenges from the mobile app only to hit a roadblock when trying to continue on the TV app. Moreover, iFIT was missing out on a lot of user engagement by not having series & challenges in the TV app. So the goal was clear: make series & challenges highly discoverable, no matter the device.
Company
iFit, fitness platform providing instructor-led workouts for home fitness equipment
My Role
Lead product designer
The Team
3 product managers
1 project manager
10 engineers
iFIT product team
Design Timeline
July 2021•6 weeks
How might we seamlessly integrate series & challenges within the iFit TV app to enhance user engagement and provide a unified fitness experience across all devices?
Final Design & Interactions
Let me walk you through the final designs to experience the many ways series and challenges can be accessed in the TV app. No need to change into your workout clothes. Grab some kombucha, kick your feet up, and enjoy the next 5 minutes while you watch the demo. It’ll be like a massage for your mind.
The Design Process
This project brought together a diverse group of experts led by no less than 3 product managers. It was a collaborative effort between the iFIT product team, a design agency (which I was part of), and a software development company.
Working in two-week sprint cycles, each feature's journey began with a feature request and ended with the hand-off of high-fidelity designs. Because of the magnitude of the series & challenges feature, it required 3 sprint cycles.
Feature Request
iFIT or product manager requests a new feature
Requirements
Requirements are shared and reviewed with designers and engineers
Design Ideation
New experiment Figma file is created for research notes, design exploration, prototypes, and testing
Internal Review
Share exploration with rest of design team and PM, and incorporate feedback into the designs
Presentation of designs
Present designs at weekly iFIT product meeting
Finalize Designs
Tweak designs based on iFIT’s feedback
Finalize Copy
Share final designs with iFIT’s marketing team to obtain copy for titles, supporting text, buttons, and labels
Update iFIT Design System
Tighten up final designs and transfer all related components to iFIT library
Development Hand-off
Create new flow with screen mockups from the library; annotate states and interactions
Ideation & Design Exploration
Incorporating series & challenges into the TV app involved adapting a few existing screens while introducing an entirely new screen for the series detail.
Add browser rows in the Homescreen to surface series & challenges
Workout card
Series or challenge card
Fold line
Re-purpose the workout Grid View for specific groups of series & challenges
Create a Series Detail screen with series info and a list of individual workouts
Concepts for the Series Detail Screen
I found inspiration for the Series Detail screen right in the heart of my living room while I keenly observed and analyzed design patterns from popular TV apps (resulting in my family not wanting to watch TV with me anymore).
The strong parallels between the structure of a fitness series and that of a TV show influenced the creation of the three concepts below.
Netflix Style
A combination of two screens with high-level series info on the first screen, and a separate screen for the list of workouts organized by week.
First screen with series info only (no list of workouts)
Separate screen with individual workouts organized by week
Pros
Familiar pattern, easy to navigate.
Cons
Workouts are not readily visible on the main screen, which could be an inconvenience for users doing challenges, as they typically do the workouts in a different order than presented. In that case, immediate access to the workout list would be preferred.
Apple TV / Hulu Style
This concept combines both the high-level series info (above the fold) and the list of workouts (peeking at the bottom) in a single screen.
Weeks organized into browser rows
Weeks organized into tabs
This is the concept that made it into high-fidelity
Pros
Familiar pattern, easy to navigate. The tab version results in a more streamlined navigation. Workouts from the browser row version are easier to scan for someone wanting an overview of all the workouts.
Cons
The browser row version requires many clicks to get to the workouts toward the end of the series or challenge.
Marie-Eve Style
Trying something different: an all in one screen leveraging vertical tabs to keep all info above the fold.
Series info is displayed when the series card (the first one) is selected
Series info is replaced with workout detail when any of the workout cards are selected
Pros
All the series and workout detail is available in a single screen. In the prior 2 concepts, viewing the detail for an individual workout required navigating to the Workout Detail screen.
Cons
Unfamiliar navigation pattern, hard to scan the entire list of workouts. Engineers also expressed concerns regarding the implementation complexity of this concept.
Information Architecture
In the MVP phase of the TV app, I took the initiative to build a comprehensive sitemap that served as the architectural backbone of the evolving platform. Over time, I updated the sitemap with each new feature that was implemented.
The product team initially thought incorporating series & challenges into the TV app would be straightforward. Very funny... As illustrated in the sitemap below, series & challenges affected a significant number of screens within the app's architecture.
Platform agnostic screen
Roku screen
Apple TV screen
Fire TV screen
Chromecast screen
Final Screens
I created an interactive prototype to present the high-fidelity designs to the product team. The final screens are the outcome of refining the designs based on the team’s valuable feedback. Below is a preview of the key screens affected by series & challenges. For the complete experience with full interactions, make sure to watch the video at the beginning of the case study.
At this point, I strongly recommend switching to a larger device so you get to enjoy the sleek interactions from each screen. Trying to fit a flat screen TV into a phone is no easy feat... But no worries if you can't switch right now; you'll still get the essence of each screen from the highlights below.
Homescreen
Highlight
I re-designed the first row of the homescreen to accommodate a weekly announcement and showcase very large cards. That row can be used to introduce series and challenges on the week of their release.
Highlight 1 of 5
I re-designed the first row of the homescreen to accommodate a weekly announcement and showcase very large cards. That row can be used to introduce series and challenges on the week of their release.
Highlight 2 of 5
Your Activity row is pivotal in ensuring a seamless experience across devices. In addition to recently completed workouts, it also provides easy access to the next workout in a series users have already started, along with a card for that series.
Highlight 3 of 5
Series & challenges are surfaced in the Trending Now row, where they’re interspersed with workouts.
Highlight 4 of 5
Other rows, like the Popular Series, are dedicated to just series or just challenges.
Highlight 5 of 5
Additional rows focus on a certain activity type, like Strength, Treadmill, Rower, etc. Those rows can have a mix of series, challenges, and workouts.
Highlight 1 of 5
I re-designed the first row of the homescreen to accommodate a weekly announcement and showcase very large cards. That row can be used to introduce series and challenges on the week of their release.
Highlight 2 of 5
Your Activity row is pivotal in ensuring a seamless experience across devices. In addition to recently completed workouts, it also provides easy access to the next workout in a series users have already started, along with a card for that series.
Highlight 3 of 5
Series & challenges are surfaced in the Trending Now row, where they’re interspersed with workouts.
Highlight 4 of 5
Other rows, like the Popular Series, are dedicated to just series or just challenges.
Highlight 5 of 5
Additional rows focus on a certain activity type, like Strength, Treadmill, Rower, etc. Those rows can have a mix of series, challenges, and workouts.
Series Detail Screen
Highlight
In this newly created screen, all the series info is above the fold with a peek of the workouts at the bottom of the screen. By default, the focus is on the button to start the next workout in the series so the user can get moving right away.
Highlight 1 of 4
In this newly created screen, all the series info is above the fold with a peek of the workouts at the bottom of the screen. By default, the focus is on the button to start the next workout in the series so the user can get moving right away.
Highlight 2 of 4
For series, the workouts are organized by week, allowing users to navigate between them using tabs. A progress bar is also displayed, which serves as motivation for users to complete the entire series.
Highlight 3 of 4
If this series were a challenge, it wouldn’t require the week tabs because the workouts don’t have to be performed in any particular order.
Highlight 4 of 4
At the very bottom of the screen is a browser row with similar challenges (or
series) allowing users to easily explore and discover challenges they might be interested in.
Highlight 1 of 4
In this newly created screen, all the series info is above the fold with a peek of the workouts at the bottom of the screen. By default, the focus is on the button to start the next workout in the series so the user can get moving right away.
Highlight 2 of 4
For series, the workouts are organized by week, allowing users to navigate between them using tabs. A progress bar is also displayed, which serves as motivation for users to complete the entire series.
Highlight 3 of 4
If this series were a challenge, it wouldn’t require the week tabs because the workouts don’t have to be performed in any particular order.
Highlight 4 of 4
At the very bottom of the screen is a browser row with similar challenges (or series) allowing users to easily explore and discover challenges they might be interested in.
Grid View
Highlight
Rather than creating separate grid views for series and challenges, I enhanced the grid view we already had for workouts by adding tabs to allow users to focus on only one group at a time: series, workouts, or challenges. That's the only highlight, but have fun with the mini-controller →
Highlight
Rather than creating separate grid views for series and challenges, I enhanced the grid view we already had for workouts by adding tabs to allow users to focus on only one group at a time: series, workouts, or challenges.
Workout Detail
Highlight
I hadn’t initially foreseen any changes to this screen. However, since over 70% of workouts are part of a series or challenge, I pushed the workout info up the screen to make room for the "Series with This Workout" section peeking at the bottom.
Highlight 1 of 4
I hadn’t initially foreseen any changes to this screen. However, since over 70% of workouts are part of a series or challenge, I pushed the workout info up the screen to make room for the "Series with This Workout" section peeking at the bottom.
Highlight 2 of 4
The progress bar for each series serves as a powerful incentive for users to finish that series, especially if they've already completed some workouts from it without realizing they were part of a series.
Highlight 3 of 4
Workouts can belong to more than one series or challenge. The flexible approach I chose for surfacing the series detail ensures we can stack as many series or challenges as needed below the workout detail.
Highlight 4 of 4
The journey doesn’t end when the user finishes their workout. From the Success screen, they can continue on to the next workout in the series, or go to the series the workout was initiated from.
Highlight 1 of 4
I hadn’t initially foreseen any changes to this screen. However, since over 70% of workouts are part of a series or challenge, I pushed the workout info up the screen to make room for the Series with This Workout section peeking at the bottom.
Highlight 2 of 4
The progress bar for each series serves as a powerful incentive for users to finish that series, especially if they've already completed some workouts from it without realizing they were part of a series.
Highlight 3 of 4
Workouts can belong to more than one series or challenge. The flexible approach I chose for surfacing the series detail ensures we can stack as many series as needed below the workout detail.
Highlight 4 of 4
The journey doesn’t end when the user finishes their workout. From the Success screen, they can continue on to the next workout in the series, or go to the series the workout was initiated from.
Business Impact
Due to my departure from the agency shortly after the development hand-off, I didn’t get the opportunity to witness the implementation of the series & challenges integration into the TV app. In the absence of real-time data, here are some metrics I would have monitored to gauge the success of that feature.
Cross-Platform Usage
Track the number of clicks on series cards from the TV app and how it compares to the series viewed from other devices to see if the TV app generates as much interest as the mobile and embedded apps.
Continued Series
How many of the series clicked from the TV app are continued from other devices vs. new series? Indicates that users are able to successfully find their series in the TV app.
Source of Clicks
Which screen of the TV app generates the most series clicks between the Homescreen, the Grid View, or Similar Series section in the Workout Detail? Areas of the TV app with low engagement might indicate a problem with the discoverability and design.
Rate of Completion
Track the number of workouts completed when initiated from a series and see if there’s month-over-month increase as a result of including series and challenges in the TV app. Also monitor if there’s an increase in completed series and challenges.
Retrospective
What went well
The sprint framework and weekly meetings with the product team provided a structured cadence that allowed for efficient progress and collaboration.
Outstanding team of engineers with a diverse skill set! Their collective expertise ensured a comprehensive and robust implementation of the TV app across various platforms, such as Apple TV, Chromecast, FireTV, and Roku.
What could have been better
Dealing with multiple product managers, each with their own set of instructions and requirements, was challenging. It often led to conflicting guidance and confusion in the project's direction and priorities.
Due to time constraints, research and formal usability testing were not conducted. Instead, I relied on informal testing with co-workers and family as an alternative, which, while helpful, may not fully capture the broader user base's perspective.