Concept · AR · University project

STAYFITAR

Stay in shape no matter where you are, with an augmented reality coach.

It all started during the pandemic. Gyms closed indefinitely, and exercise videos and rubber band workouts popped up everywhere. As an active athlete, I wanted to create something useful, so I designed a mobile app that helps people train at home or in the gym with an augmented reality fitness instructor.

Open the prototype ↗Read the story

STAYFITAR welcome screen: log in with e-mail, Apple, Facebook or Google, or register

A workout in progress: Dumbbell Hammer Curl with reps, progress and sets

RoleUX/UI Designer, solo
ContextSoftUni Creative final project
Duration2 months
ToolsFigma
PlatformiOS

Problem

Gyms closed indefinitely, and people who trained with a coach suddenly had nobody to guide them.

During lockdown I took the UX and UI design course at SoftUni Creative, where I learned about virtual, mixed and augmented reality. The final project asked us to use what we learned, so I came up with an AR coach. As an active athlete, I knew exactly which audience I wanted to reach.

The challengeA real coach, in augmented reality
The hardest part was designing an app where an AR instructor actually improves the experience. I changed the look of the app several times until I got there.

Research

I studied the market, then asked the people I train with.

Method 01Competitive research
No company on the Bulgarian market used an AR instructor in its fitness app, and only a few did globally.
Method 02Survey
More than 30 people of a wide age range, all active in sports.
Method 03Personas
Two personas I kept coming back to throughout the project.
Method 04User journeys
Two main flows through all the important features.
Method 05Wireframe testing
Low fidelity wireframes, tested before any visual design.
Method 06User testing
Remote tests with more than 30 people, covering every feature.
Personas
Both are beginners with almost the same frustrations, because everything was closed.
Sitemap
Workouts, programs with the AR coach, food and the profile.
Journey 1
Journey 2

Insights

People missed their trainer, and they didn't want to think about food.

30+athletes surveyedOnline survey
50%+train with a personal trainer 3 to 5 times a weekOnline survey
2personas, both beginnersFrom the research
Insight → decisionFood and recipes
Many people didn't want to think about what to eat, so I added a section with food and recipes.
Insight → decisionBeginners need a coach
Both personas were beginners, so I added more beginner workouts, workouts with a coach, and a preview of the AR instructor.

Process

12 iterations of wireframes before the first high fidelity screen.

Final Activity screen with today's workout, reps, sets and progress — The Activity screen as a wireframe and in the final design. Drag to compare.

Low fidelity wireframe of the Activity screen — The Activity screen as a wireframe and in the final design. Drag to compare.

Gotham Screen Smart
A geometric sans made for on-screen text, on an 8 pt grid.
Colors
- Orange#FF8421
- Black#171B1E
- White#FFFFFF
- Placeholder#929090
- Gradient#F6A768, #F56D00
Orange for joy, warmth and energy.
DecisionDark UI
Less eyestrain, easier to read, and it just looks cool.
DecisioniOS first
I followed the iOS guidelines, though not completely, for a smooth and consistent feel.

Solution

Workouts, programs and food in one app, with an AR coach when you need one.

Welcome screen with log in and register options — Six of the 21 screens. The 3D hologram trainer is by Hologress.

Workouts by muscle group: arms and back — Six of the 21 screens. The 3D hologram trainer is by Hologress.

Programs screen with the Train With Johny card, a See in action button and recommended programs

An AR coach in the program

That's where the AR instructor preview fits: right where beginners pick what to train.

Train with Johny
The AR instructor sits right in the programs, not hidden in a menu.
See it in action
A clear way to preview the AR coach before you start.
Made for beginners
Recommended programs start with beginners, like the personas.

Results

Every tester finished every task, in about three minutes.

100%success rate in user testingRemote tests, 30+ people
~3 minper testUser testing
12iterationsWireframes to final
21screens
2months
150cups of coffee
Found in testingRegister or sign in?
On the first screen, people couldn't tell whether they needed to register or sign in.
Found in testingAn alternative path
In one task, three users went straight through while the rest took an alternative path, maybe because they tried to enter data and couldn't.
Try it yourself
Click through the app in the interactive Figma prototype.
Open the prototype ↗

Learnings

My first project from scratch, and I'm proud of it.

Learning 01Start before it feels clear
The topic felt strange and optimistic at first. It was confusing, but once I started the interviews and the first screens, things fell into place.
Learning 02Presenting new technology
The challenge was to figure out how to present such an innovative technology, which will only develop over the years.
Learning 03Keep going
I did my best on this one, and I keep developing from there.

Next projectCO₂ Calculator