top of page

ATHLEET

A Multiplayer Fitness App

A case study for an app I designed with a university colleague that encompasses fitness and games in a comprehensive product for users to enjoy exercising with their friends.

Context

Athleet is a gamified, social fitness app project I work on with a colleague from undergrad, fellow designer Justin Ballard.

One of the most demotivating aspects of working out is having to go through that pain by yourself. Athleet began as a mobile fitness trainer that aimed to create a social network of athletic collaboration and competition.

Our vision was to gamify the process to make it more fun, so that people will get more invested in their health, while providing a comprehensive suite of training guides.

THE GOAL

To provide robust training guidance and progress tracking, while empowering Athleets to connect with one another to find training buddies and make new friends.

Problem

Role

Tools

Contributions

Working out is difficult for beginners because they often lack a clear plan, and training alone is lonely, demotivating, and potentially unsafe.

Co-Founder

UX/UI Designer

UX Researcher

Product Designer

Figma

Adobe CC

Xtensio

Google Slides

Visual Design

Branding

Interaction Design

Research
Design
Test
Refine

Design Process

Research

We distributed general surveys and conducted interviews among people within and without the fitness community, from our friends who wanted to get in shape to personal trainers we see at the gym. We categorized our users into two primary types: people who are new to fitness, and people who are more advanced along their fitness journeys.

Problem

Lack of Motivation

Getting started

Training Alone

Expensive sub fees

Nutrition Support

Why?

Users report lack of motivation as biggest obstacle to working out

Beginners often feel lost and confused and train ineffectively. 

Fitness tech rife with high-priced equipment & subscription fees. 

Discouraging for beginners to work out alone.

Advanced users frustrated of no all-in-one training and nutrition tracker.

Solution

A customizable goal tracker

Clean UI with video tutorials and well-rounded programs.

Users can connect + complete group fitness challenges.

Free version with basic training & social functionality.

Modular nutrition tracking to make a “one-stop shop” for all fitness needs.

USER PAIN POINTS
HEURISTIC & COMPETITIVE ANLAYSIS

The major apps we looked at for our competitive analysis were the Apple Fitness+, FitBod, Nike Run Club, FitOn, Strava, and My Fitness Pal. We did a feature analysis of the apps and found that they reflected what our users initially found frustrating when using them.

WHO ARE OUR USERS?

Using these personas, we focused on two types of users: beginners who are new to working out, and advanced users who are familiar with and are adept at creating their own fitness routine. To help define our case study more, we asked the following question:

How might we design an app that trains new and advanced fitness enthusiasts, allows them to track their progress and nutrition, and connects them with other “Athleets” for collaboration, competition, and community?

Start the Design

In this phase, we worked up a site map to establish our personas, information architecture, design sketches, wireframes, and set up a low-fidelity prototype we could begin testing with users.

PERSONA ONE: The Beginner

PROBLEM STATEMENT: Benny is a young adult who needs a specific training plan because he’s an inexperienced athlete.

PERSONA TWO: The Advanced

PROBLEM STATEMENT: Abby is an experienced crossfitter who needs goal and progress tracking because she wants to be a competitive athlete.

We designed this with the idea that the app will be modular, allowing us to add or replace features into the structure of the design.

USER FLOW

This map sets up our information architecture, the foundation of the design. Using this layout to guide us immensely helped with sketching out the app's organization.

The nav bar at the bottom has gone through a few permutations even in the sketch and low-fidelity phases of the design process — it’s a work in progress.

SKETCHES - LO FIDELITY

We started sketching to get a better idea of what the app might look like.

Here we are assembling the general skeleton for the first iteration of the design. This gave us a layout we could use to construct a higher fidelity mockup.

MID FIDELITY

Our next steps were establishing a style guide and creating medium-fidelity wireframes. We went with medium fidelity because we weren’t yet comfortable looking at empty grey squares, so throwing in some colors helped us visualize the concept.

We wanted a bright, active aesthetic that pops off the screen. 

We knew from the beginning that we wanted the UI to be bright, clean, and colorful.

Our users need the workout functionality to be easily readable and highly usable.

While challenging users to complete monthly group fitness activities, the social screen also serves as a bulletin board to connect users based on interests, experience, and location.

Lo-Fidelity Prototype

The first iteration prototype no longer functions since we have since redesigned the app, but you can click through runs through the app from the perspective of a beginner user. This is what we used to conduct initial usability testing.

Click here to view the prototype externally

Usability Studies

While usability tests went well enough in that our users could navigate the user flow of the app, we weren’t entirely satisfied at this point with the direction of our design. A piece of feedback we heard more than once was that our app was nominally more robust than the competitors, but lacked a marquis feature to get people to use it instead of what they already use. As such, our usability sessions shifted more into desirability sessions.

FINDINGS
  • Advanced users value nutrition tracking the most.

  • The majority of users enjoyed the collaborative fitness challenge ideas.

We had some earnest discussions about the data we’d received and our vision for the design, and went back to the drawing board.

Revising the design

When we realized the multiplayer aspect of our design was what people valued most, we ditched everything else and went all in on gamification. Now, instead of a training app, Athleet became more similar to a physical MMORPG (massively multiplayer online role-playing game). Users are invited to create teams in order to complete fitness challenges that cannot be completed alone, from relatively simple weekly “quests” to the monthly “raid”, a more challenging ordeal.

Upon successful completion of the quests and raids, teams are rewarded with “loot” in the form of avatar borders, team banners, profile themes, trophies, and so on.

We moved away from fitness apps, and turned toward the loops and systems of online games like World of Warcraft, Destiny 2, Halo Infinite, and Genshin Impact. Live service games are designed around engagement and retention, so we are applying those principles to the revision of Athleet, which we believe will result in users becoming deeply invested in not only the design, but in their health.

The redesigned profile screen is cleaner and features recent workouts, raids, and rewards.

We streamlined the active workout screens to simply display the standard metrics one would expect, fed by a wearable.

HIGH FIDELITY PROTOTYPE

As you can see, we have refocused the design around the cooperative, MMO-esque weekly quests and monthly raids. While the quests are intended to be relatively simple, 2-3 person activities, the raids require teams of 5-6 in order to overcome their greater challenges, such as in the October raid RUN FOR YOUR LIFE which requires teams of Athleets to run 30 miles in an hour.

Click here to view the prototype externally

Takeaways

Athleet is a living project and undergoing constant iteration. Now that we have redesigned the primary function of the app, we have our next steps lined up.

  • First, we want to circle back to our users. Since the scope of our design has changed, we need to get Athleet in front of people to update our user data and personas.

  • Second, we want to build out the rewards system to be more robust and meaningful, with the ability to see the different themes in the prototype.

In the longer term, we seek to collaborate with people in the fitness community like trainers, instructors, and athletes to craft more exciting and effective quests and raids.

REFLECTION

Athleet is a passion project for the both of us, combining two of our favorite hobbies: video games and fitness. So many people would benefit from introducing light, casual exercise into their routines, but they just don’t like to work out, for numerous reasons. My mission is to gamify the workout app experience enough that even the most skeptical user can end up finding some joy in exercise.

After all, once that initial habit is formed, it yields a literal lifetime of benefits.

Thank you for reading our case study! If you found this interesting, you can reach me at jennthnmai@gmail.com, or my partner Justin at howdy@justinballard.design.

bottom of page