Managing body-building goals

Back to home

Thirdstride goals flow

Next project

Managing body-building goals

A major part of body building is making progress - progress towards a desired physique, improved health, strength or consistency, to name a few.

Role

Lead Designer

Platform

iOS App

Project Timeline

May — Nov 2023

Project Status

In Development

CONTEXT

Tracking training progress looks different for everyone and is based on each person’s unique situation.

Part of the product’s purpose is to provide a smooth way for trainers to set and track progress towards achieving their goals.

THE CHALLENGE

Creating a system: Each person & situation requires a different set of training goals. What could these goals look like? How can we create a tracking system to cater for most situations?

IMG

Managing a workout set

This feature aimed to create a customizable way for trainers to measure progress towards their goals

We focused on three major areas WHILE BUILDING THIS PRODUCT

Workout sets and tracking

Trainers need to be able to replicate their workout sessions in the app and easily log their progress.

Read case study

Goal setting

The point of going to the gym is to see some kind of progress - physical or mental. The product needs to make it easy for pro-trainers to set and track common workout goals.

Currently reading

Logs & analytics

All data worth looking up should be made readily available to pro-trainers and displayed such that trainers can easily understand and draw insights from them.

Read case study

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.

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.

Show don’t tell

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

Re-usablility

We had to make sure that the elements used to collect and display data to trainers could be reused. Since each goal type had different input & summary requirements, reusing elements within each flow would make it easier for trainers to understand the different contexts.

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.

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.

DESIGN & ITERATIONS

Each goal type has different requirements that need to be properly tracked. I designed several iterations until I found the most effortless way to create goals.

Breaking down goal requirements

To begin, I broke down the requirements for each goal type to understand what information was required, and identify any similarities and/or differences between the various goal types.

Day in the life of a body builder

To begin, I broke down the requirements for each goal type to understand what information was required, and identify any similarities and/or differences between the various goal types.

Day in the life of a body builder

To begin, I broke down the requirements for each goal type to understand what information was required, and identify any similarities and/or differences between the various goal types.

IMG

Grouping goals types under 3 main categories (Consistency, Records and sets & reps targets))

Iterations

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.

Integrating ThirdStride into a trainer’s daily routine

IMG

Client wireframe audit

SHOW HIGHLIGHTS

IMG

Client wireframe audit

IMG

Client wireframe audit

SHOW HIGHLIGHTS

IMG

Client wireframe audit

Iteration #1

There was still a lot of uncertainty at this stage, so this iteration focused on setting a layout based on the flow’s requirements. But this iteration fell short at many points because for trainers, new users especially, it was very easy to get confused. So we simply used this version as a starting point to talk about how best to design the experience.

Iteration #1

IMG

Managing a workout set

SHOW HIGHLIGHTS

IMG

Managing a workout set

IMG

Managing a workout set

SHOW HIGHLIGHTS

IMG

Managing a workout set

Iteration #2

In this iteration, I explored how we could guide trainers through the goal creation process in a procedural manner, based on the type of goal they wanted to create. This version fell short mainly because the process of switching/making changes while setting up a goal took too long.

IMG

Goal management page iterations

SHOW HIGHLIGHTS

IMG

Goal management page iterations

IMG

ITEration #2: Goal Creation

SHOW HIGHLIGHTS

IMG

ITEration #2: Goal Creation

Iteration #3

This iteration was a good option because it provided concise explanations to the trainer as they went through the goal creation process. However the UI had a tendency to get to text-heavy, which wasn’t in line with our design principle of “simple but appealing”.

IMG

ITEration #2: Goal Management

SHOW HIGHLIGHTS

IMG

ITEration #2: Goal Management

IMG

ITEration #3: Goal Creation - Form inputs

SHOW HIGHLIGHTS

IMG

ITEration #3: Goal Creation - Form inputs

IMG

ITEration #3: Goal Creation - Form inputs

SHOW HIGHLIGHTS

IMG

ITEration #3: Goal Creation - Form inputs

Goal summary iterations

Compared to the goal creation process, this was much easier to set up using the design system elements I’d created for our component library. Elements like navigation, charts and log modals were already available, so putting the final flow together was a breeze.

IMG

Goal summary iterations

SHOW HIGHLIGHTS

IMG

Goal summary iterations

Achievements page iterations

Earning badges and unlocking achievements isn’t a focal feature in the product, but we still needed a way keep their existence top of mind for trainers.

IMG

CLIent wireframes for achievement flow

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

Creating a consistency goal

Consistency goals focus on helping trainers track how often they perform a specific exercise, workout set or how often they workout in general.

Creating a consistency goal

Consistency goals focus on helping trainers track how often they perform a specific exercise, workout set or how often they workout in general.

Creating a consistency goal

Consistency goals focus on helping trainers track how often they perform a specific exercise, workout set or how often they workout in general.

Creating a personal record goal

Personal record goals allow trainers to set a target they would like to reach in their training.

Trainers could set goals for:
- Distances they would like to run
- Weights they would like to lift
- Total volume lifted in a session

  The product would automatically keep track of their progress, noting when new milestones are reached.

Creating a personal record goal

  The product would automatically keep track of their progress, noting when new milestones are reached.

Creating a personal record goal

  The product would automatically keep track of their progress, noting when new milestones are reached.

Creating a sets & reps target goal

Some trainers perform particular workouts consistently over a period of time based on their training goal.

For example, they could perform two 10-rep sets of pull-ups weekly, as part of their calisthenics strength training.

Set & rep goals help trainers easily track if they are hitting their target consistently.

Creating a sets & reps target goal

Goals summary, tracking & analytics

First you create a goal. Then you track it.

Compared to the goal creation process, this was much easier to set up using the design system elements I’d created for our component library.

Elements like navigation, charts and log modals were already available, so putting the final flow together was a breeze.

Goals summary, tracking & analytics

Earning achievements

To gamify the app and workout experience, we included redeemable badges linked to their progress to incentivize trainers to workout more.

So without setting goals, they would still be motivated to work towards earning achievements.

Earning achievements

Hey👋🏾👋🏾👋🏾!

Check these projects out too👇🏾

Insights & analytics from training logs

Thirdstride · Product Design

Marketing landing page

Thirdstride · Web Design

YOUTUBE

instagram

x.com

YOUTUBE

instagram

x.com

Sections