Athleet
a multiplayer fitness app
Context
Athleet is a gamified, social fitness app project I work on with a colleague from undergrad, fellow designer Jen Mai.
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 PROBLEM
Working out is difficult for beginners because they often lack a clear plan to follow, and training alone is not ideal — it’s lonely, demotivating, and potentially unsafe.
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.
MY ROLE
I am a co-UX Designer and co-founder of the project. In addition to pitching and overall content strategy, I tend to take ownership of user research and interaction design, while my co-founder and Jen tends to own the visual design and branding.
Really, though, as a two-person team, we wear tons of hats (including each other’s) and are usually in Figma building together.
Understanding the user
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.
PAIN POINTS
Motivation: Most users reported lack of motivation as their biggest obstacle to working out. We are designing a rich, customizable goal tracker to keep users engaged as they track their progress.
Getting started: Beginners to working out can often feel lost and confused, and train ineffectively. We are designing a clean UI that prominently feature video guides of tutorials and well-rounded programs.
Training alone: It’s discouraging to work out alone, especially as a beginner. We are designing bulletin-board meetup functionality that empowers users to connect with each other to complete group fitness challenges.
Expensive sub fees: Fitness technology is rife with examples of high-priced equipment combined with monthly subscription fees. We are designing a free version that allows basic training and social functionality.
Nutrition support: Most of our more advanced users report frustration that there isn’t an all-in-one training app and nutrition tracker. We plan to implement modular nutrition tracking in a future phase to make Athleet a “one stop shop” for all fitness needs.
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.
Defining the problem
With personas in hand, we identified several pain points and user goals that we want to address.
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?
HEURISTIC & COMPETITIVE ANALYSIS
The major apps we looked at for our competitive analysis were the Apple Fitness suite, FitBod, Nike Run Club, Strong, FitOn, Strava, and My Fitness Pal. Having used those apps ourselves, they’re all pretty good, but no single app encompasses everything we’d like, so that’s where we’re starting.
Starting the design
In this phase, we worked up a site map to establish our IA, sketched out a general design, built wireframes, and set up a low-fidelity prototype we could begin testing with users.
USER FLOW
We designed this with the idea that it is a bit modular, allowing us to add or replace features into the structure of the design.
SKETCHES
We started sketching to get a better idea of what the app might look like.
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.
WIREFRAMES
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.
Prototyping
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.
You can also 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
The advanced users we spoke with 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 is more like 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.
MOCKUPS
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.
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 me, combining two of my 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 my case study! If you found it interesting, drop me a line at howdy@justinballard.design.