Sections

Thirdstride workout flow

A workout experience built for pro-trainers

I was approached by a frustrated pro-trainer who had tried several workout apps, but still couldn’t find one to meet all his needs.

Role

Lead Designer

Platform

iOS App

Project Timeline

May — Nov 2023

Project Status

In Development

CONTEXT

In 2022, the gym app industry was worth $96.7 billion, but till date is saturated with tech focused on helping beginners and not experienced (or pro) trainers.

Popular apps like Fitbod, Daily workouts and Strong provide features like training programs, coaching sessions, etc. that are less appealing to pro-trainers who already know what to do in the gym.

So my client set out to build a gym app to fill the market’s gaps (and make his training easier).

THE PROBLEM

Building our feature set: What do pro-trainers need to plan and perform their workouts? What are their current struggles?

Design principles to guide success

Since this was the first product iteration with no budget for extensive user testing, we defined 5 core design principles to help us evaluate the effectiveness (not success) of each feature, screen or flow we created.

Show don’t tell

We ditched long walkthroughs that would easily be forgotten for simple, context-driven designs that could explain complex concepts.

Visibility & clarity of context

Most of the app’s flows require multiple steps and responses. Trainers should be able to tell what inputs they have provided at any point in time.

Companionship

Trainers mostly work in the gym (obviously), so we had to build a product they could use in the gym, while working out. This means everything in the final product had to either add to or improve the workout experience - not take away from it.

Error prevention & easy ‘undos’

All our design decisions had to make it harder for preventable user errors to occur. But if the trainer made a mistake, we had to always make it easy for them to take back that decision.

Record-keeping

Based on my client’s findings, the experience of tracking workout logs is so poor in some apps that pro-trainers would rather default to pen and paper and in some cases, excel sheets.

Simplicity

As I came to learn, body building isn’t just about lifting weights - it includes understanding some complex concepts. The final product should always make these concepts easy to understand. Trainers need to focus on getting reps done, not spending time figuring out how the app works.

DESIGN & ITERATIONS

The client had already created some initial wireframes and hi-fidelity designs, so during our discovery phase, I conducted an audit of those screens to find out what design & content to keep, improve or discard.

Creating a workout set

This flow was top priority.

Pro-trainers have existing workout sets they follow based on how they set up their weekly workouts. So we had to make it easy for them to replicate those workout sets/programs in the app.

FEATURES + EVALUATION CRITERIA

Training sets

Ability to easily create straight sets, dropsets & supersets.

UX simplicity & clarity

Simple explanations of what different sets are and how they work to those who might be unfamiliar with the terminology.

Workout categorization

Ability to easily categorize workout sets. It should be easy to search & find workouts.

Rest

Ability to set up rest periods between their workout sets.

Warmups

Some trainers like to ease into their workouts, so they start with warmup sets to get them ready. This should be clearly replicated in the product.

UI Aesthetics

Going for a simple, clean but energetic look

Day in the life of a body builder

To create a truly impactful product, I had to get a clearer picture of what a day in a life of a body builder looked like - from their triggers to work out, to planning a session to performing the workouts and everything else in-between (and after).

Day in the life of a body builder

To create a truly impactful product, I had to get a clearer picture of what a day in a life of a body builder looked like - from their triggers to work out, to planning a session to performing the workouts and everything else in-between (and after).

Day in the life of a body builder

To create a truly impactful product, I had to get a clearer picture of what a day in a life of a body builder looked like - from their triggers to work out, to planning a session to performing the workouts and everything else in-between (and after).

IMG

TRAINER Journey exploration

Integrating ThirdStride into a trainer’s daily routine

To ensure we didn’t build yet another workout app that didn’t meet pro-trainers’ needs, we highlighted points in their daily life where the product could ease/improve their workout experience.

Integrating ThirdStride into a trainer’s daily routine

To ensure we didn’t build yet another workout app that didn’t meet pro-trainers’ needs, we highlighted points in their daily life where the product could ease/improve their workout experience.

Integrating ThirdStride into a trainer’s daily routine

To ensure we didn’t build yet another workout app that didn’t meet pro-trainers’ needs, we highlighted points in their daily life where the product could ease/improve their workout experience.

IMG

TRAINER Journey exploration WITH THIRDSTRIDE

Client’s initial wireframes

Since the client had done some groundwork in creating low fidelity & some high fidelity wireframes, I started with an audit to go over his initial flows to pick out what content worked, what didn’t and what could be improved. Here’s what I found.

Client’s initial wireframes

Since the client had done some groundwork in creating low fidelity & some high fidelity wireframes, I started with an audit to go over his initial flows to pick out what content worked, what didn’t and what could be improved. Here’s what I found.

Client’s initial wireframes

Since the client had done some groundwork in creating low fidelity & some high fidelity wireframes, I started with an audit to go over his initial flows to pick out what content worked, what didn’t and what could be improved. Here’s what I found.

IMG

Client Lo-fi wireframe audit

SHOW HIGHLIGHTS

1

This screen had 2 call-to-actions (CTAs) that did similar things - one to start a blank session and one to create a workout set template. So we had to clarify the difference between the 2 actions and pick a CTA to focus on.

2

It wasn’t very clear to the trainer that this was a Sort & Filter button, so we had to choose a clearer design.

3

Trainers had to expand and close sections to see details of previous workouts. We had to explore different page layouts to make this easier.

4

We needed to find a simple way to display workout summaries, so the page wouldn’t look too overloaded with information.

5

Here’s the create template page. How can we break down the forms into sections to make each input requirement clear to trainers?

6

This page displays information about the workout set & exercises. The goal is to make it easy for trainers to see what workouts they have set up in a template.

IMG

Client Lo-fi wireframe audit

1

This screen had 2 call-to-actions (CTAs) that did similar things - one to start a blank session and one to create a workout set template. So we had to clarify the difference between the 2 actions and pick a CTA to focus on.

2

It wasn’t very clear to the trainer that this was a Sort & Filter button, so we had to choose a clearer design.

3

Trainers had to expand and close sections to see details of previous workouts. We had to explore different page layouts to make this easier.

4

We needed to find a simple way to display workout summaries, so the page wouldn’t look too overloaded with information.

5

Here’s the create template page. How can we break down the forms into sections to make each input requirement clear to trainers?

6

This page displays information about the workout set & exercises. The goal is to make it easy for trainers to see what workouts they have set up in a template.

IMG

Client Hi-Fi wireframe audit

SHOW HIGHLIGHTS

IMG

Client Hi-Fi wireframe audit

Workout management

After setting up a workout’s sets & reps, a trainer might need to add or update some information as they progress through their workout. They might need to take notes, include warmups, rest periods and some more. Here’s what that looks like.

IMG

Managing a workout set

SHOW HIGHLIGHTS

IMG

Managing a workout set

IMG

Managing a workout

SHOW HIGHLIGHTS

IMG

Managing a workout

Workout creation

Creating a workout had to be a seamless but flexible enough process for trainers to be able to replicate a variety of workout routines. These explorations focused on how to create a quick workout session.

IMG

Workout creation Iterations

SHOW HIGHLIGHTS

IMG

Workout creation Iterations

Tracking workouts

This feature was the most important part of the flow. We had to make it as easy as possible for trainers to track their progress. This logging process also had to be simple enough for trainers to easily differentiate between sets and update the right sets & reps.

IMG

Tracking Workout Progress

SHOW HIGHLIGHTS

IMG

Tracking Workout Progress

Final designs

Putting it all together

After going through several iterations of designs and content, we finally landed at a good spot where we knew the app was simple but robust enough to meet key needs of pro-trainers (while they’re working out in the gym).

Putting it all together

After going through several iterations of designs and content, we finally landed at a good spot where we knew the app was simple but robust enough to meet key needs of pro-trainers (while they’re working out in the gym).

Creating a straight set workout

A straight set workout involves performing a number of reps for a workout.

For example, performing ten (x10) 20kg bench presses.

Being the simplest type of training set to perform, we made it the simplest to create and use.

Creating a straight set workout

A straight set workout involves performing a number of reps for a workout.

For example, performing ten (x10) 20kg bench presses.

Being the simplest type of training set to perform, we made it the simplest to create and use.

Creating a straight set workout

A straight set workout involves performing a number of reps for a workout.

For example, performing ten (x10) 20kg bench presses.

Being the simplest type of training set to perform, we made it the simplest to create and use.

Creating a superset workout

A superset is a workout set that involves performing multiple reps of multiple exercises in each set.

For example: In one set, without rest periods, a trainer would perform,
- Ten (x10) 25kg barbell curls
- Ten (x10) 30kg bench presses
- Ten (x10) 20kg tricep pulldowns

Since it could get a bit complex, we designed this flow to make creating and using supersets as stress-free as possible.

Creating a superset workout

A superset is a workout set that involves performing multiple reps of multiple exercises in each set.

For example: In one set, without rest periods, a trainer would perform,
- Ten (x10) 25kg barbell curls
- Ten (x10) 30kg bench presses
- Ten (x10) 20kg tricep pulldowns

Since it could get a bit complex, we designed this flow to make creating and using supersets as stress-free as possible.

Creating a superset workout

A superset is a workout set that involves performing multiple reps of multiple exercises in each set.

For example: In one set, without rest periods, a trainer would perform,
- Ten (x10) 25kg barbell curls
- Ten (x10) 30kg bench presses
- Ten (x10) 20kg tricep pulldowns

Since it could get a bit complex, we designed this flow to make creating and using supersets as stress-free as possible.

Creating a dropset workout

Dropsets involve performing multiple reps of one workout, whilst reducing weights after each set.

For example: In one set, without rest periods, a trainer would perform
- Fifteen (x15) 50kg barbell rows
- Twelve (x12) 30kg barbell rows
- Twelve (x12) 25kg barbell rows

Creating a dropset workout

Dropsets involve performing multiple reps of one workout, whilst reducing weights after each set.

For example: In one set, without rest periods, a trainer would perform
- Fifteen (x15) 50kg barbell rows
- Twelve (x12) 30kg barbell rows
- Twelve (x12) 25kg barbell rows

Creating a dropset workout

Dropsets involve performing multiple reps of one workout, whilst reducing weights after each set.

For example: In one set, without rest periods, a trainer would perform
- Fifteen (x15) 50kg barbell rows
- Twelve (x12) 30kg barbell rows
- Twelve (x12) 25kg barbell rows

Tracking progress

There are different ways to track progress during a workout - time spent, number of sets or reps completed, type of workouts performed and some more.

We made all these indicators readily available to the trainer.

Tracking progress

There are different ways to track progress during a workout - time spent, number of sets or reps completed, type of workouts performed and some more.

We made all these indicators readily available to the trainer.

Tracking progress

There are different ways to track progress during a workout - time spent, number of sets or reps completed, type of workouts performed and some more.

We made all these indicators readily available to the trainer.

Managing a workout

Besides ticking off progress, trainers might need to make adjustments based on their environment and session.

We made it pretty straightforward for them to do this too.

Managing a workout

Besides ticking off progress, trainers might need to make adjustments based on their environment and session.

We made it pretty straightforward for them to do this too.

Managing a workout

Besides ticking off progress, trainers might need to make adjustments based on their environment and session.

We made it pretty straightforward for them to do this too.

Post workout

We didn’t want workout flows to end after all sets were ticked off, because we knew some value could still be given to the trainer at that point.

So we added an exertion check, a summary and a share option to let trainers brag about their progress, while promoting the app.

Post workout

We didn’t want workout flows to end after all sets were ticked off, because we knew some value could still be given to the trainer at that point.

So we added an exertion check, a summary and a share option to let trainers brag about their progress, while promoting the app.

Post workout

We didn’t want workout flows to end after all sets were ticked off, because we knew some value could still be given to the trainer at that point.

So we added an exertion check, a summary and a share option to let trainers brag about their progress, while promoting the app.

Measuring success post-launch

The app is currently in development and user tests were run with a few pro-trainers. Here are some metrics to track post-launch to measure product success.

Measuring success post-launch

The app is currently in development and user tests were run with a few pro-trainers. Here are some metrics to track post-launch to measure product success.

Measuring success post-launch

The app is currently in development and user tests were run with a few pro-trainers. Here are some metrics to track post-launch to measure product success.