STAYFIT-AR will help you to stay in shape no matter where you are.

Тrain with an augmented reality coach even if you are at home or at your local gym.

It all started during the pandemic situation.

We all started staying home for days, exercise videos and rubber band workouts began to pop everywhere and I just decided to create something useful for anyone actively involved in sports and my idea just came up.

During the lockdown, I took a UX / UI Design course at SoftUni Creative, where I learned about Virtual Reality, Mixed and Augmented Reality and how to use them in my designs. The task set for me by the Softuni Creative team for the final project was to use what I learned and so I came up with the idea to use AR Coach in the design of my application.

I decided to create an mobile app that help people exercise at home or in the gym with an augmented reality fitness instructor.

Of course, as a person in the field of sports and an active athlete, it was immediately clear which audience I wanted to reach. All gyms in the country were closed indefinitely and I had to invent something modern and different.

The Challenge

The most challenging part for me was to create a design in which to add an actual instructor with augmented reality that will improve the user experience. I had to change the look of the app several times until I achieved what I was striving for.

Sitemap

Competitive Research

I did a research and the information I gathered specifically for the Bulgarian market is that there is no company that uses an augmented reality instructor in its fitness applications. Globally, there are several existing products on the market.

Competitive research gave me a clear idea of what my competitors were doing and how they doing it.

Of course, as a designer with my first serious project without the support of a team, I decided to use the best practices of the competition and apply them in my design.

Photo by Nick Morrison on Unsplash

created by vectorjuice on www.freepik.com

Surveys

After creating the initial design of StayFit-AR, I had to gather feedback from people who are actively involved in sports. Since I work in this field, I easily managed to conduct an online survey with potential users. The survey involved more than 30 people with a relatively wide range of ages.

More than 50% of the people who took part in the survey train with a personal trainer 3 to 5 times a week and of course the created pandemic situation frustrates them.

Many of the people who took part in the survey do not want to bother thinking about what to eat, so I decided to add to the design and a section with food and recipes.

My User Personas

Personas

Based on the user research method I set up two personas. I referred to them throughout the entire product development process. Both personas share almost the same frustrations as the situation and the problem is quite real because everything was closed. I described their motivations with quotes and created a short biography describing real people with the same frustrations.

The main thing I had to be careful about was that the personas are beginner fitness enthusiasts and need more workouts for beginners, so I decided to add more workouts for beginners and workouts with a coach. That’s where I managed to insert a preview of a workout with an augmented reality instructor into the design and exactly how it works.

User Journey

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product. I made two main flows that go through all the important features that will later help me to conduct the user testing.

Wireframes

At the beginning of my design process I created low fidelity wireframes for testing purposes. I decided to do a user testing at the wireframe level, which helped me start building the actual design. I had 12 iterations before validating the screens and then I started working on creating high fidelity prototypes in Figma with which i will conduct user testing for the final functionality of the application.

User Testing

Before my final design of the product, I did a testing round in order to reveal possible usability problems. The method I used for testing was remote. Since I have been in the gym fields for a long time, I was able to conduct user tests with more than 30 people, my goal was to test every single design functionality.

The success rate was 100% and it took about 3 minutes for users to pass the tests. The user insights that i get was that users handle with usability easy and navigate the app as expected.

The problems people told me about and based on the user testing method, were related to the initial registration screen, users seem to be confused and can’t figure out if they need to register or sign up.

In one of the other tasks, 3 of the users do perfectly, while the rest of the participants choose an alternative path, which may be due to the fact that they are trying to enter data but cannot.

Typography

For my design i choose to use Gotham Font Family. Gotham is a geometric sans-serif typeface family with a comprehensive range of weights and widths. I decided to use Gotham Screen Smart because is designed for on-screen text and it is easy to read.

According to many experts, Gotham Font is among the best fonts of all time and is widely recognized and used.

Typography system based on the 8pt grid.

Colors

The main color that I chose to use for my design is orange. Color associated with meanings of joy, warmth, heat, sunshine,stimulation and last but not least creativity. What I wanted to achieve was a modern and attractive design at the same time.

StayFit-AR’s Welcome Screen

UI Design

Once I tested out all usability mistakes, I started designing the final screens in Figma. I chose darker design because of the benefits of dark screens. They are easy to understand—less eyestrain, easier-to-read text, and well, they just look cool.

I followed iOS Styleguide but not completely. I chose iOS as the main OS, because iOS platform develop a smooth, fluid and consistent user experience. The iOS environment in devices provides a more accurate arrangement, natural feel and good app speed.

The name I gave to the app is StayFit-AR, where behind AR stands (augmented reality), then I prepared the interactive prototype with which to do another user test.

3D Hologram Trainer By https://www.hologress.com/

Interactive Prototype

You can see the interactive prototype of my app here

Overview

The topic of my project was initially quite strange and optimistic for me, but I like the challenges and decided to continue with it. It was quite confusing for me at first, but after I started doing interviews and assembling the first screens, things started to fall into place.

It was a challenge for me to figure out exactly how to present in my design this so innovative technology, which will only develop over the years. This is my first project started completely from scratch and I am proud of the result, because I did my best and continue to develop.

12

Iterations

21

Screens

2

Months

150

Cups of coffee