Aerobi logo
 
 

YOUTUBE'S FITNESS COMPANION

 

In collaboration with UX/UI Designer Ishita Arora

Role: UI Designer, UX Researcher

For: Aerobi Internship

Date: October 2020

Type: Case Study

 
“My Aerobi” landing page

“My Aerobi” landing page

Aerobi Video workout complete

Aerobi Video workout complete

 

Overview

Aerobi is a virtual gym platform whose potential lies in the technology of its AI-powered software. This software allows one to see themselves working out at home on their TV or computer. The company’s technology allows for real-time feedback on form and performance for a truly immersive experience.

Aerobi Chrome extension pop-up

Aerobi Chrome extension pop-up

 

Problem Statement

Aerobi needed user research conducted to unravel a user-centered business and product development strategy. The Aerobi team knew their objective was to gamify the at-home workout experience through the use of their AI-powered software and wanted to decipher which gamification features users would want to see and be more responsive toward. Alongside this, Aerobi wanted insight into what type of user-interface direction would be best for the platform and brand.

 

Solution

Our task was to create a survey the Aerobi team could distribute online. The objective of this survey would be to learn which gamification features users wanted implemented and also to gain insight on what the best UI solution for the AI-feature would be. Additionally, we would take the results from this survey and synthesize the data to produce the first wireframes for Aerobi. These wireframes would involve three screens, the chrome extension pop-up, the screen the user sees after completing a workout, and “My Aerobi,” the user’s landing page.

 

Users and Audience

Aerobi, as a brand, is whimsical and doesn’t take working out too seriously. Not because they don’t prioritize health, but because they want working out to be fun, accessible, and non-intimidating to all of their users. With their membership plans starting at below $10 a month, they are looking to target a large demographic. With this in mind, the team developed two main personas.

User one, or Sara, is a high-income earner and is always on the go, she is mainly interested in the application for yoga and pilates. Sara views Aerobi as a filler to her already existing fitness routine.

User two, or Joseph, is a teacher and makes a modest income. He wants to get in shape but doesn’t want to go to the gym. He would like to use the application for kickboxing and at-home weight workouts. He sees the application as his main source of fitness.

 

Scope and Constraints

This project was distinctive due to the nature of the brand. Aerobi is a startup company that is transitioning from one business strategy to another. This brought on a unique set of constraints due to the marketing strategy still being in development. Additionally, the timeline was 40 hours spread over the course of 4 weeks. At the same time, the other UX/UI designer and I did not have previous experience with chrome extensions, so there was extra research involved. Although the scope did not change during the project, the first week produced much progress which allowed us to take this project further, from developing a survey to distributing the survey and integrating feedback to produce wireframes.

Process

4 weeks. 3 deliverables.

 
Calendar Process

Calendar Process

Week One:

The Research

The UX/UI team asked for all the brand information available to learn the target demographic as the CMO had not yet been brought on to the team. The company’s official website, official Instagram, and investor pitch deck were all received. Additionally, competitors’ investment and business strategies including target demographics were researched. After these were reviewed, all of the information was synthesized onto one sheet dubbed “About Aerobi” and the UX team stated objectives to the CEO.

Once that was approved as aligning with the company and user goals, we created “How Might We?” questions and personas. This was to ensure the CEO’s goals and target demographic were properly understood, these were also shared with the company’s representatives and approved before moving forward. As for the gamification, from our research, we concluded that gamification features can be broken down into six main categories:

1. Challenge

2. Collection

3. Goals

4. Feedback

5. Positive/Negative reinforcement

6. Competition

 

Week Two:

Producing the Survey

Aerobi Survey

Aerobi Survey

 

Since all work was conducted remotely Google Sheets and video chat were the main medium for communication. Our Google sheet began with six columns:

- type of questions

- the question itself

- responses available

- subtype (if available- such as type of gamification feature and so on)

- a column for notes

Ultimately the questions were broken down into demographics, visual questions, feedback on existing ideas, and questions regarding gamification features. The company had already conducted a previous survey regarding the demographics of those who work out at home. Therefore the UX team decided to keep this section shorter.

 
Aerobi Visual Questions
 

For the visual questions, we decided to create simple visuals regarding the representation of self, sizing, positioning, and feedback visualization. We also included a question about the architecture hierarchy design if users were to have the option to work out with friends. A total of twelve images were created, with each of the four visual questions having three images to choose between as answers.

Aerobi had ideas regarding what they want the application to be and the direction they might head in. These ideas were either written as yes or no questions, or they were open-ended. This section was for feedback and improvement, and to hear from the users in their own words.

Each type of gamification feature included a question in the survey. This was the longest portion of the survey and these questions were mainly multiple-choice or based on a scale system. Below are example questions:

 
Aerobi Table of Example Questions

Aerobi Table of Example Questions

Week Three:

Distribution and Results

After careful consideration we decided Typeform would be the host for our survey due to their ability to display images as answers and this was important to our survey. While the team did distribute the survey to our network of friends, we did involve a few other avenues for more reach. This included posting in subReddit forums, fitness Facebook groups, and Instagram stories. Again, this was logged into a distribution spreadsheet with notes to avoid double posting in the same groups. Overall, the survey was open for about four days.

Once the survey was completed by 65 users we decided this was enough information to synthesize from and incorporate into the wireframes. The main insights were written down and involved as we moved onto the wireframing.

 
Platforms used
 

Week Four:

Producing Wireframes

Due to the time constraints surrounding the wireframes, Arora, and I decided to focus on three main screens. The chrome extension pop-up, the stats screen you see played after a video is completed by the user, and the landing page for users if they were to click on the Aerobi “home” button. To tackle this project, we created a design guide “on-the-fly” meaning it only included brand colors, font type, and sizes. This was because of the time constraint and because the company did not yet have a guide but it did have a logo, brand colors and ideas for the font. We also kept the spacing consistent between features.

I tackled the chrome extension pop-up while Arora handled the screen that pops up after you finish playing a video. We collaborated by sending our designs to each other afterward to ensure we stayed consistent with the design across all screens.

The landing page was the final screen, this one involved a bit more collaboration. How we did this was by communicating through a live drawing session, and working out the layout over a Facetime session. Arora had an overall better concept of the layout and it was decided we would use their layout ideas with a few minor adjustments, such as adding a header. Once we agreed to a plan and who would tackle which aspects we began to work on the design.

I produced the logo/profile header, and the featured fitness instructor section along with the simple thumbnails for videos. While Arora produced the fitness activity and monthly stats features, they also added a “most viewed” section. Once Arora completed her part, we both went live on Figma and reviewed the designs, making minor organic adjustments. Once we were satisfied with these designs were sent over to the remaining Aerobi team.

 
Wireframes for Aerobi

Wireframes for Aerobi

 

Outcome

Overall, we exceeded the original goal, which was to simply create the survey. We went further with the distribution then synthesizing and applying the results to produce user-centric wireframes and designs. The company learned new insights about its potential demographic. Additionally, they received plenty of feedback on how to gamify their AI-powered software and what the user is looking for in a fitness chrome extension and application. In conclusion, the only thing I would have changed, if it were not for the time constraints, would have been to produce a second survey after the wireframing asking further questions about how users would like feedback on their form when using the software.

Dashboard Aerobi

Dashboard Aerobi

Aerobi Chrome Extension

Aerobi Chrome Extension

Workout Complete Overlay

Workout Complete Overlay

Previous
Previous

Hoods Skate Co Case Study

Next
Next

Save Case Study