Fiit Web and TV App experience
Designing the big screen experience to enable more people access connected Fiit classes anywhere.
When
Late 2021
Team
UX/Product designer (me)
UI/Animations designer
Product manager & Head of product
Engineers (hardware, iOS, Android, JS)
Fitness experts
Marketing manager
Challenge
Fiit users so far could take classes on the big screen only by connecting their phones to TVs via cable or bluetooth and then their Apple Watch or chest strap to the phone. This was a tricky experience for some, so we repeatedly got requests from users asking for a way to take classes on a laptop.
Within the product team we decided to create a flexible web app that would work in a browser and on TV boxes.
2. Wireframes
As this was a new platform for Fiit, I started by outlining wireframes for the key screens and used them to align the team on the concept.
3. Exploring Filters UX
One tricky part of the experience was to figure out best way to filter classes on a bigger screen where navigation is horizontal rather than vertical. Having reviewed other web and TV apps, it was clear that scrolling needed to be limited.
4. Sign up & payment flows
Fiit established multiple ways for users to sign up and start their free trial, including via the Amazon subscriptions service. After launching the web app, user would be directed to the getfiit/amazon landing page to sign up. Afterwards they’d connect their subscription via a code shown on the TV.
5. Connecting devices
Before starting a class user can connect their heart rate tracker or Apple Watch to see live metrics in-class. Translating that experience to the web app was tricky as it required bluetooth connection to the app. I co-designed this flow with another designer (he did more UI, I helped with UX, copy and error cases).
The web app nudges user to open the mobile app to connect the tracker.
6. Design System - web app
Alongside working on the flows, I helped expand Fiit’s device system to include web components.
7. Results
Fiit expanded its presence by launching the web app, and also setting up partnerships with Sky and The Gym Group:
