Redesigning a workout tracker
Fitso: Your personal fitness coach
Fitso is a social fitness app that helps people stay fit or train for marathons. Fitso started out as an app that let marathon runners track their runs. Over time, it evolved into to a full-fledged fitness app. Some early adopters still primarily used the app as a run tracker, and other users used features such as guided exercises and chatting with trainers and nutritionists for personalised advice.
In Winter 2017, Ashish and I worked with the Fitso design team as independent contractors to help them set up a design system and overhaul the visual design used on Fitso for iOS, which their team later extended to Android. Some parts of the app also needed UX improvements, and I worked on prototyping some new interactions — which I’ve written about in this article.
Fitso’s design across Android, iOS and web varied quite a bit — one of the goals of the redesign was to use a unified visual style, while also adhering to platform conventions. We used Figma to set up a library of reusable design components for Fitso, which included typography, iconography, colors, button styles, spacing and form elements, etc.
After taking screenshots of all the different screens, we arranged them into flows. This let us think about the different sections one at a time. We identified some flows that needed to be reworked completely, and some that could be kept as-is and only needed to be updated to the new visual style.
Activity tracking lets the user track the distance, speed and calories burnt while walking, running or cycling.
- Fitso tracks the activity duration, distance covered, speed, calories burnt and average pace. However, the user could only choose any 2 out of these 5 stats to be visible at a time. A lot of users did not understand this.
- Tapping on the stats collapsed them to show just the duration of the activity, which felt counter-intuitive.
- Voice instructions were turned on by default. They could either be temporarily muted or turned off entirely in the settings section, but a lot of users did not expect them and were surprised when they started hearing instructions.
- Achievements and upcoming achievements were visible before tracking started, but not during an activity.
The redesigned flow addresses these issues by simplifying the screen to focus on the map. The user can enable or disable audio cues before they start tracking. Stats, music and achievements are arranged as a vertical stack of cards that can be hidden when they are not required.
Video workouts are playlists of short instructional video clips that the user can follow along to complete a guided workout. Video workouts require users to download 5–30mb of videos before starting a workout.
To avoid accidentally causing high data bills, the old version of the app only allowed people to download these videos using WiFi. However, a lot of users found this limiting, and so a new solution was found.
If the phone has a WiFi connection the app starts to automatically download the videos, but if the user has a 3G/4G connection, the app shows a popup first and gives the user a chance to cancel the download.
After completing any activity on Fitso, the app asks the user how their workout was, and shows a summary of what they did. This information is passed on to their personal trainer, who can suggest changes if a workout goes badly. This screen also lets users add notes about the workout and a photo, and optionally post it to Facebook.
Different activities have different statistics, and the overview screen looked quite different for different types of activities. The new design creates a consistent system for displaying the statistics and options for each type of workout.