iFIT TV App

Elevating the iFIT TV app experience with workout series & monthly challenges

iFit TV app home screen featuring new series & challenges in top row: 'Everest: A Trek to Base Camp Series' and 'Beginner Cycle Challenge.' In the second row, activity types are shown: yoga, strength, treadmill, bike, elliptical, rower, and mind.
01

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 20216 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?

02

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.

Mockup of a widescreen TV with a walkthrough video of the iFIT TV app.
03

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

04

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.

Existing Screen

Add browser rows in the Homescreen to surface series & challenges

Wireframe of the TV app homescreen showing added browser rows to surface workout series and challenges, along with sections for trending now, popular series, and running.

Workout card

Series or challenge card

Fold line

Existing Screen

Re-purpose the workout Grid View for specific groups of series & challenges

Wireframe showing the TV app’s re-purposed workout grid view, used to display specific groups of series and challenges, with sorting and filtering options.
New Screen

Create a Series Detail screen with series info and a list of individual workouts

Wireframe of the Series Detail screen, featuring series information, trainer details, a start workout button, and a list of individual workouts organized by week, along with similar series suggestions at the bottom.

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.

TV Show
Season 1
episodes
Season 2
episodes
Season N
episodes
VS
Workout Series
Week 1
workouts
Week 2
workouts
Week N
workouts

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.

Level 1

First screen with series info only (no list of workouts)

Wireframe of a series detail screen with only series information, including trainer details, a start button, and options to view workouts, add the series to favorites, or explore similar series.
Level 2

Separate screen with individual workouts organized by week

Wireframe of a screen showing individual workouts organized by week, with three rows for weeks 1 to 3 and a row for similar series at the bottom.

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.

Variant 1

Weeks organized into browser rows

Wireframe of a screen showing individual workouts organized by week, with three rows for weeks 1 to 3 and a row for similar series at the bottom.
Variant 2

Weeks organized into tabs

Wireframe of the Series Detail screen with trainer info, a start button, and workouts organized by week with tabs for each week. Week 2 is selected, showing three workouts and an arrow to navigate to week 3. A row for similar series is displayed at the bottom.

*

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 Detail

Series info is displayed when the series card (the first one) is selected

Wireframe of an all-in-one series detail screen with vertical tabs on the left. The series card is selected, displaying series information, trainer details, a start button, and options to view workouts, add to favorites, and explore similar series.
Workout Detail

Series info is replaced with workout detail when any of the workout cards are selected

Wireframe of an all-in-one series detail screen with the second card selected, displaying workout details, a start button, and options to add to favorites, view the workout description, and see more workouts from the same trainer. Vertical tabs on the left allow navigation between intro and different weeks.

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.

05

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.

Sitemap of the iFIT TV app architecture showing the comprehensive structure, with the screens pertaining to series and challenges in the bottom-right quadrant.
Series & Challenges
Legend

Platform agnostic screen

Roku screen

Apple TV screen

Fire TV screen

Chromecast screen

06

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.

White iFIT logo in the bottom-right of the screen
Vertical navigation bar for the TV app with icons for profile, search, home (selected), activity type, series, challenges, favorites, and settings.
Activity Type row titleActivity type row with icons for yoga, strength, treadmill, bike elliptical, rower, and mind.
'Your Activity' row title
Card image for the Hang Mua Peak, Ninh Binh, Vietnam workout: trainer with red hair walking along a scenic path next to a river, surrounded by lush greenery and mountains.Next in series tag in the top-left of the card
Workout card title: "Hang Mua Peak, Ninh Binh, Vietnam"Workout card duration: 30 minWorkout card info: Beginner, 1.25 miles, Hannah Eden
Third row of homescreen titled 'Your Activity' with a card for the next workout in series 'Hang Mua Peak, Ninh Binh, Vietnam' and a card for the series 'Vietnam Intermediate Cardio HIIT Series.'
Trending Now row title
Card image for the "Remember Your Why Yoga Series": a female trainer doing a standing side stretch on a beach at sunset, with distant islands in the backgroundSeries tag in the top-left of the card
Card title: "Remember Your Why Yoga Series"Card info: Beginner, 6 workouts
Fourth row of homescreen titled 'Trending Now' with a mix of series, challenge and workout cards like "Remember Your Why Yoga Series" and "Spin Your Wheels Challenge: Pedal Power Showdown".
Popular Series row title
Card image for the "Ontario Cultural Walking Tours": a smiling male trainer in casual clothes and a scarf sitting in front of a colorful mural.Series tag in the top-left of the card
Card title: Ontario Cultural Walking ToursCard info: Beginner, 7 workouts
Fifth row of homescreen titled 'Popular Series' with cards like "Ontario Cultural Walking Tours" and "Adriatic Sea Interval Series".
Strength row title
Card image for the "20-minute Build and Burn Series": smiling male trainer lifting dumbbells in a gym.Series tag in the top-left of the card
Series card title: 20-minute Build and Burn SeriesSeries card info: Advanced, 11 workouts
Sixth row of homescreen titled 'Strength' with a mix of series, challenge and workout cards like "20-minute Build and Burn Series" and "Chefchaouen Dumbbell Strength, Morocco".
Sixth and last row of homescreen titled "Trainers" showcasing iFIT trainers.
Roku controller with chevron up and chevron down

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.

iFit TV app homescreen with the 'New on iFit this Week' row highlighted, showcasing workout series like 'Everest: A Trek to Base Camp Series' and 'Beginner Cycle Challenge.'

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.

iFit TV app homescreen with the 'Your Activity' row highlighted, showing the next workout in series 'Hang Mua Peak, Ninh Binh, Vietnam' and the next card for the series 'Vietnam Intermediate Cardio HIIT Series.'

Highlight 3 of 5

Series & challenges are surfaced in the Trending Now row, where they’re interspersed with workouts.

iFit TV app homescreen with the 'Trending Now' row highlighted, featuring series like 'Remember Your Why Yoga Series' and 'Spin Your Wheels Challenge: Pedal Power Showdown.'

Highlight 4 of 5

Other rows, like the Popular Series, are dedicated to just series or just challenges.

iFit TV app homescreen with the 'Popular Series' row highlighted, featuring series like 'Ontario Cultural Walking Tours' and 'Adriatic Sea Interval Series.'

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.

iFit TV app homescreen with the 'Strength' row highlighted, displaying series such as '20-minute Build and Burn Series' and 'Chefchaouen Dumbbell Strength, Morocco.'

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.

Series title: Vietnam Intermediate Cardio HIIT SeriesChallenger title: Intermediate Cardio HIIT ChallengeSeries info: Intermediate, 30 workouts, 6 weeksSeries descriptionSeries trainer: Hannah EdenRow of 3 buttons: 'Start Week2, Workout 3' button (selected), 'Add to Favorites' button, and 'Watch Series Trailer' button.
Row of tabs for Week 1 through Week 6 where Week 2 is selected, along with a progress bar with 7 of 30 workouts completeRow of tabs for Week 1 through Week 6 where Week 2 is selected, along with a progress bar with 7 of 30 workouts completeWorkouts section header with progress bar showing 2 of 6 workouts completed.
Card image for the 'Tuan Chau, Halong Bay, Vietnam' workout: a female trainer running toward a bridge surrounded by palm trees
Green circled checkmark in bottom-right of workout card
Workout card title: 'Tuan Chau, Halong Bay, Vietnam'Workout card duration: 32 minWorkout card info: Intermediate, 1.47 miles, Hannah Eden
First row of workouts with 3 workout cards
Second row of workouts with 2 workout cards and an arrow to go to Week 3Second row of workouts with 3 workout cards
Similar Challenges headerSimilar Challenges header
Row for similar challenges with 3 series cards
Card image for the 'Costa Rica Cardio HIIT Challenge': smiling female trainer running on a beach in Costa Rica.Challenge tag in the top-left of the card
Series card title: Costa Rica Cardio HIIT ChallengeSeries card info: Beginner, 16 workouts
Back to top button
Roku controller with chevron up and chevron down

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.

Series Detail screen for the 'Vietnam Intermediate Cardio HIIT Series,' featuring series description, trainer info, a start button for Week 2, Workout 3, and options to add to favorites or watch the series trailer.

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.

Series Detail screen for the 'Vietnam Intermediate Cardio HIIT Series' scrolled down to the week tabs for 6 weeks along with a progress bar with 7 of the 30 workouts completed. The tab for Week 2 is selected, displaying workout cards like Tuan Chau, Halong Bay, and Mo Luong Cave, Vietnam.

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.

Series Detail screen for the 'Intermediate Cardio HIIT Challenge,' scrolled down to the workouts section along with a progress bar with 2 of 6 workouts completed, with workouts from locations like Tuan Chau, Halong Bay, and Mo Luong Cave, Vietnam.

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.

Series Detail screen for the 'Vietnam Intermediate Cardio HIIT Series' scrolled down to the last section displaying similar challenges like 'Costa Rica Cardio HIIT Challenge' and 'Iceland Cardio HIIT Challenge'.

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 →

White iFIT logo in the bottom-right of the screen
Vertical navigation bar for the TV app with icons for profile, search, home, activity type (selected), series, challenges, favorites, and settings.
Activity type icons for Yoga, Strength, Treadmill, Bike, Elliptical, Rower, and Mind. All icons are grey, except green for Strength to indicate it's the current selection.
Grey circles around each activity type, except that circle around strength is green to indicate the current selection
Activity type labels for Yoga, Strength, Treadmill, Bike, Elliptical, Rower, and Mind. All labels are grey, except green for strength to indicate it's the current selection.
Grey dumbbell iconGreen dumbbell icon (selected)
Strength title
Row of 2 buttons: Sort by newest, and FiltersRow of 2 buttons: Sort by newest (selected), and Filters
Three tabs on the left: series (selected), workouts, and challenges. On the right: 12 series.
White series tab
Green series tab (selected)
First row of cards with 3 series, like Iberian Strength Series, and Ross Champion Series Jamaica: Part 1.
Card image for the 'Chefchaouen Dumbbell Strength Series': female trainer  performing a dumbbell side lunge in a vibrant blue courtyard.Series tag in the top-left of the card
Series card title: Iberian Strength SeriesSeries card info: Beginner, 12 workouts
Second row of cards with 3 series like 20-minute Build and Burn Series, and Vietnam Intermediate Cardio HIIT Series.
Card image for the "20-minute Build and Burn Series": smiling male trainer lifting dumbbells in a gym.Series tag in the top-left of the card
Series card title: 20-minute Build and Burn SeriesSeries card info: Intermediate, 11 workouts
Card image for the "20-minute Build and Burn Series": smiling male trainer lifting dumbbells in a gym.Series tag in the top-left of the card
Series card title: 20-minute Build and Burn SeriesSeries card info: Intermediate, 11 workouts
Back to top buttonGreen back to top button (selected)
Roku controller with chevron up and chevron down

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.

iFit TV app grid view screen for the Strength activity type. Has sort by and filter buttons, and tabs for Series, Workouts, and Challenges. The Series tab is selected, featuring a grid of series cards like 'Iberian Strength Series', and 'Ross Champion Series Jamaica: Part 1'.

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.

Workout title 'Tuan Chau Marina, Halong Bay, Vietnam' with two tags above it: walk-run and intervalsWorkout rating of 4.9 stars based on 700 ratings, and trainer avatar for Hannah EdenWorkout info: Intermediate, 29:20 min, 1.68 miles, 222 effort, 214 caloriesRow of 3 buttons: 'Start Workout' button (selected), 'Add to Favorites' button, and 'Workout Description' button.
Section header: Series & Challenges with this workoutSection header: Series & Challenges with this workout
Card for Vietnam Intermediate Cardio HIIT Series showcasing a female trainer running through a colorful alleyway. Two buttons are below the card to go to the series or what the series trailer. To the right of the image is the series detail, description, trainers, and progress bar with 7 of 30 workouts completed.Card for Walk-to-Jog Around the World challenge showcasing a male trainer running in a vibrant location. Two buttons are below the card to go to the series or what the series trailer. To the right of the image is the series detail, description, trainers, and progress bar with 0 of 12 workouts completed.Back to top button
iFIT TV app screen confirming completion of a workout at Tuan Chau Marina, Halong Bay, Vietnam, led by Hannah Eden. Displays time, intensity, estimated calories burned, effort score, and distance covered. Buttons for Finish, Add to favorites, Next workout in series, and Go to series (selected).
Roku controller with chevron up and chevron down

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.

iFIT TV app workout screen for  Tuan Chau Marina, Halong Bay, Vietnam, led by Hannah Eden. Provides workout metrics, including rating, time, calories burned, and distance. Buttons to Start workout (selected), Add to favorites, and view Workout description. At the bottom, theres a peak of Series & Challenges with this Workout.

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.

iFIT TV app workout screen for  Tuan Chau Marina, Halong Bay, Vietnam, scrolled down to first series with this workout: 'Vietnam Intermediate Cardio HIIT Series'. Buttons to 'Go to series' or 'Watch series trailer'. Also displays a progress bar with 7 of 30 workouts complete.

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.

iFIT TV app workout screen for  Tuan Chau Marina, Halong Bay, Vietnam, scrolled down to second challenge with this workout: 'Walk-to-Jog Around the World'. Buttons to 'Go to series' or 'Watch series trailer'. Also displays a progress bar with 0 of 12 workouts complete.

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.

iFIT TV app screen confirming completion of a workout at Tuan Chau Marina, Halong Bay, Vietnam, led by Hannah Eden. Displays time, intensity, estimated calories burned, effort score, and distance covered. Buttons for Finish, Add to favorites, Next workout in series, and Go to series (selected).
07

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.

08

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.