Aero Fitness | A UI/UX Design Case Study

Saleh Riaz
Muzli - Design Inspiration
8 min readNov 1, 2020

--

Aero Fitness Mobile App

Take full control of your fitness — Aero Fitness is an all-in-one fitness app for fitness enthusiasts who want to lit the spark of keeping themselves fit. This app not only helps ignite the spark but also keep it lit.

You can check out the design case study on my Behance or Using this link

The Task at Hand & the Problem Space

One of the major stakeholders who happen to be the Co-founder of this product came to me with a proposal of exploring the fitness market. As fitness is increasingly becoming mainstream and a large percentage of people are working (or at least try working) towards their physical and mental health, this space can be tapped to make people get onboard much easily.

Design Process

The underlying process employed was Design Thinking that helped me define and put out the important hypotheses that were tested by prototyping and proved by usability testing.

The sub-processes include conducting user research to understand the market and creating user personas and empathy maps. Brainstorming for creative solutions was carried out employing affinity mapping and translating them into sketches, wireframes, mockups, and high-fidelity designs. Establishing a design-test-feedback loop to improve designs.

Photo by UX Indonesia on Unsplash

The Challenges

There was a multitude of challenges that were initially reported by the client and further user research with the aid of surveys and interviews revealed many more. The basic goals of our product were the solutions to all these noted problems. The cumulated percentages of the keywords that represented the problems (user needs) helped us identify the features for the Minimum Viable Product (MVP) along with the business goals and technical capabilities.

The dominant problems that at least 80% of the people mentioned directly or indirectly included the following:

  • Difficult to track calories — 87% of weight gainers
  • Losing motivation after a while to visit the gym — 93% of starters
  • Trainers not available readily — 82% gym goers
  • Not able to find authentic supplements — 90% of general gym users
  • Not being consistent — 88% of general gym users
  • Keeping a regular check on all vitals — 94% of starters
  • And other problems included forgetting to drink water or walk, no localized solution, forgetting to add calories, intuitive mobile app, understanding workout angles, gender-specific gyms, and a few others

Understanding the Users

User personas and empathy maps were developed after interviewing people. Surveys were also used. By the end of these activities, I got to know the pain points as well as what the goals of the users were and how our app needs to present a solution for these.

What users had to say

Formulating the Hypotheses

All the aforementioned research helped us conclude the hypotheses that were tested in the prototyping phase. We listed down multiple hypotheses because we aimed to create an all-in-one product that focused on solving multiple problems.

Gym go-ers find it difficult to keep themselves motivated because the physical activity is always a hard task and people need to take out time in their busy schedules. Need more consistency.

The pain points and problems identified in the research helped us define all the cases whose solutions were ideated in the next phase.

Ideation

Ideas were generated during ideation workshops. The key stakeholders were gathered on-site and remotely to find the solutions to the identified problems. Brainstorming helped us diverge and find all possible solutions. The most useful ideas, most desirable ones, ideas easiest for most people, most functional ideas, and most sustainable ideas were grouped during these discussions. An affinity diagram was created that help us sort the ideas into our goals.

Post-its with ideas

Sketches and Wireframes

Sketching the app ideas gathered at the stage of brainstorming helped me translate the required features into more understandable solutions that were dry ran so the stakeholders could understand easily.

Moving ahead step-wise from sketches to lo-fi wireframes to describe the flow of the app and the logical structure of the elements that defined the features of the application. Each use case was rapidly prototyped into wireframes so we can understand the flows and ultimately define the information architecture of the product.

Wireframes for Aero Fitness

Visual Design

With the major UX defined in the form of wireframes, user flows, user personas, empathy maps, affinity diagrams, the visual design of the mobile app was designed along with the microcopy for each interface.

Getting Started

A set of easy to understand onboarding screens to highlight the main features of the app with an easy option to skip and get started. Easy registration with step-wise wizard design pattern to input the basic information to quickly start the app for the user.

Getting started with Aero Fitness

Home Screen

A descriptive, the dashboard is used as the home screen that shows the most important information to the users. Key attributes include:

  • Notifications: Instant notifications regarding any important reminder, happenings, gym timings, stock updates, etc
  • Reminders: Reminders are always on top. Push notifications are also used to remind users of various important things
  • Daily Insights: A quick view of each important vital and activity is provided on the landing screen
  • Widgets: The home screen also has a customizable dashboard portion where a user can add important widgets
A useful home screen

Managing Meals

An intuitive user flow of adding a meal into the diary is explored so that the users, who are mostly tired after workouts, have an easy way to maintain a diary.

Managing the nutrition diary

Workouts, Tracking, and Programs

Watch workout videos, track your exercises, and make custom workouts that help you reach your short-term and long-term goals. Enroll in training programs that are customized according to your goals. You can easily choose a learning path and follow it to become a pro.

Dummy videos are taken from VGFit Fitness & Bodybuilding app for presentation

Manage workouts, track your exercise, and select training programs

Discover & Explore

Users can easily search for whatever they need, including authentic supplements, trainers, nearby gyms, tracks, coaching, and even gym accessories.

Discover everything around you

Instant Contact

Always be in contact with your trainers and experts and get instant help, feedback, recommendations, and much much more.

Always stay in contact with professionals

Gamification the Experience

Basic gamification of the gym experience induces the users to be much more consistent and motivated. Users can scan QR codes to gain points at the time of gym check-in. Points can be redeemed however they like along with leaderboards to fight for the prize.

Experience Gamified

Smart App for Smart Watch

To make some features more accessible, a smartwatch application is also in the pipeline so that users who’re on the go or working out can easily access the app’s major features.

Aero Fitness for Smart Watch

Visual Identity

Creating an exquisite and intuitive visual design that makes use of the aesthetic usability effect to proffer a pleasing experience.

The reason for considering yellow color was because a warm variant of yellow is known to stimulate mental activity and generate muscle energy.

Brand Identity for Aero Fitness

Product Value

For the users

  • A single source of information for everything related to fitness and a healthy lifestyle
  • Improving a user’s gym habits and learning exercises easily along with keeping records of measurements
  • Get a user in contact with his trainer at all times so that he can get help whenever they want

For the Aero Fitness & Enterprises

  • Struggling gyms can get on the radar so they are more visible to more users plus advertise
  • Increase in sales of supplements and suppliers when users discover 100% authentic products
  • Self-actualization — The market space seems pretty vacant and can be expanded

Conclusion

Learnings

The design process was pretty thorough which helped me with my findings through research to understand the industry as well as the users. The users desire a useful app that would definitely help them achieve their goals. Engaging the users with the app was a challenge so the usability testing will be conducting in the natural environment of the user groups in which they’ll be using the application. The user flow is pretty clear for each user group and they can just follow the tab bar use cases to conduct a task-specific to them. The ability to tailor the features of the app according to the user goals is also one of the most important abilities of this app as described by the users themselves.

Future Work

The few things to be worked on in the future are listed below:

  • In-depth usability testing with actual users in their working environment to learn from their feedback
  • Explore the sleep/meditation feature
  • Narrow down the use-cases by removing the unnecessary elements with the aid of A/B Testing and analysis by R Programming
  • Creating a design system to ease the design and development process

Saleh is a product designer working on digital products, crafting their concepts, interactions, and experiences. Find more about him on Behance, Dribbble, LinkedIn, and Twitter.

--

--