Aerobi App Concept

Goal: To apply the UX/UI knowledge that I’ve accumulated through the past six months at Springboard and put them into practice on a real world project. Aerobi is an AI-powered software mobile app that was designed to help bring accessible fitness classes to people’s smartphones.

THE CHALLENGE

BRINGING AEROBI TO LIFE FROM CONCEPT TO DESIGN

Designed to combine instructor-led workouts with video game elements, Aerobi utilizes AR technology to superimpose players into a virtual fitness classroom. As I was brought aboard through Springboard after much of the preliminary research had been completed, my initial goal was to fine-tune their UX design and then craft high-fidelity wireframes to help bring the team’s vision to life.

Design constraints included:

  • Working alongside a remote team that was spread across North America.
  • Using existing design patterns and branding to produce my work.
  • Having to allocate my time appropriately as I only had 40 hours to help out the team.
  • Learning to work more in-depth with Adobe XD on the fly.

“Jason was a pleasure to work with. He has a great eye for
detail and is a great UX/UI Designer and Graphic Designer. He
met all deadlines and communicating with him was easy. He
went above and beyond the tasks I gave him.”
– Dillon Kearl, CEO

MY ROLE

UX/UI AND VISUAL DESIGN

As I was brought aboard after one of the other UX/UI designers, Avneet, had already begun to establish a color palette as well as basic design patterns, I used them to help build out a visual design board to help bring a consistent vision to the team. In addition to polishing the existing design, I also helped craft wireframes from low to high fidelity as well as provide the team with several mockups including an app icon and gamification overlay.


DISCOVERY

DELIVERING THE GYM TO THE HANDS OF USERS

aerobi-process-4Aerobi was first conceived as a solution to the closure of gyms and fitness studios during the Covid-19 pandemic. As I was originally brought onto the team after they had done the research to come up with a solution, my involvement started with the discovery phase and looking for ways for Aerobi to potentially integrate social features into the app. These findings would be added onto our user survey to gauge interest from potential customers.

Qualitative Research

Competitive Market Analysis (CMA)
As my first mini-project for Aerobi, I was tasked to help identify potential social features that could be integrated with Aerobi. These features would then be included on the user survey, asking users to rate 1-10 how interested they would be in them to test the team’s assumptions. For me, I looked at both fitness apps and applications such as PlayStation Network and Nintendo Online to build a variety of ideas to present to the team.

nintendoo_CMA

Nintendo Online CMA

Quantitative Research

User Survey
We surveyed over 60+ people between the ages of 20 to 50 years old. Our findings confirmed the team’s assumptions that the primary demographic for the app would indeed be women. From the survey, we also gathered that they were largely interested in tracking and gamification principles but not so much social sharing and building online communities. As a result, we determined that social features would be slowly added in future iterations using a lean UX process to test and determine which ones may be beneficial to users in the future.

The most popular features were:

  • Videos sorted by category
  • Option to save videos offline
  • Instant feedback for accurate form or movement
  • Privacy settings to keep from sharing workouts
  • Tracking heart rate and calories
  • Feedback on how to improve techniques

After gauging which features to build as our MVPs in our wireframes, we then turned our attention towards design.


DESIGN

ALIGNING BUSINESS AND USER NEEDS

Design Board

As Aerobi had a team of designers, it was important for us to all be on the same page. As a result, I produced a design board during the first week while I was there in order to help guide our design decisions. All of the design patterns were based off of what our lead, Avneet, and the executive team established prior to me coming aboard.

2020-06-03 aerobi-design-board

Wireframes

For my part of Aerobi, I was tasked with setting the tone for the app through the onboarding phase. Using what I learned from both CityPups and Sphere, as well as analyzing a few other suggested apps, I decided that the best approach to welcoming new users would be through asking them a series of questions to help them customize their Aeorbi experience from the beginning. As the executive team wanted to have new users sign up and select a payment plan prior to starting a free 7-day trial, I placed this part last in the sequence to give users a sense of what the app was about prior to commitment. Prior to selecting a plan, users would be able to see what type of workouts would best suit their individual needs though a recommendations page that would help them determine if Aerobi was right for them.

aerobi-onboarding

Onboarding overview

Additional screens for me included creating a mockup of a in-app illustrative tutorial as well as the creation of social media upload and user survey pages.


OTHER DELIVERABLES

APP ICON

While it was not part of my original task list, I noticed that there was an opportunity for me to improve Aerobi’s branding by creating an app icon to help give users a sense of the app’s aesthetics and purpose. Since the app icon would be the first thing that a user would encounter when searching for Aerobi in the app store, it was imperative to me that it used something that would standout and be unique.

After doing a quick analysis of the logo that was in place, I determined that the most memorable part of the logo was the heart and used that as a motif to build Aerobi’s branding identity. Although the executives originally wanted me to run with a lettertype icon, I felt that it detracted from the original messaging as did the rest of the team. The circle around the heart was designed to give users a sense of progression to further emphasize the fitness aspects of Aerobi.

aerobi_app_icon

Proposed icons and final selection

GAMIFICATION OVERLAY

In addition to my other UX responsibilities, Dillon, Aerobi’s CEO, wanted me to come up with an overlay for the app’s gamification screen as a mockup to show users what it could potentially like like in the end. As I had once been a freelance gaming journalist and studied game design after university, this was right up my alley.

Using Wii Fit and Just Dance as a reference, I mocked up a basic screen that I believe would work well with the constraints of AR technology when it came to precision. The result is something that would give users the instant feedback required for a game and combine it with familiar UI interfaces from videos. The timeline I used for the mockup would also serve as a timeline indicator showing users where they did well or where they could use an improvement.

Mockup UI- green points


CONCLUSION

CREATING A VISION

Although Aeorbi was originally funded and conceptualized as an app, it later occurred to the executive team that it would be more cost effective to use their technology to create a YouTube Chrome extension. By doing this, it would allow the company to use it as a MVP to gauge the market and test whether or not their product would be something that people would want to use before investing resources to become a full-fledged content developer.

Through my role with the company, I was able to help conceptualize the team’s original vision to produce an app and helped guide them towards the next step in development. As an athlete, I for one am looking forward to seeing how the extension develops in time!