Creating Fitness Application: UX/UI Design Case Study

Hey! I'm Danil and I'm part of the 2muchcoffee team. I have over 6 years of experience in UX/UI design including research, analysis, interaction design, and visual design. We specialize in creating intuitive design and user-friendly applications. So, in this article, I'd like to share some step-by-step procedures on how to create a fitness application.

Problem

The no.1 reason why a lot of people don’t work out regularly is the lack of motivation. Even if a person is motivated to start his journey to a healthy lifestyle, still it's hard to find a quality online personal trainer.

Idea

The idea was to create a unique app for workouts and fitness training. After revealing all the problems that exist on the market we decided to implement the social feature to increase interest for the app. Besides regular training programs, we add different types of challenges like charity workouts, marathons. The idea to create charity events comes from social problems around the world. Our goal is not only to make people healthier but to help organizations to hold their charity events.

Challenges

1. Build an application with different online workout programs for everyone.
2. Motivate users to stay physically active by fitness challenges and sports podcasts.
3. Create a detailed activity monitoring system to track progress.
4. Create an extensive database with training programs.

Approach

Using the design thinking approach, I tried to find the balance between users' needs, business goals and technological capabilities to achieve the best results.

Length of Project

2 months.

My Role

Lead UX/UI Designer (research, analysis, interaction design, visual design).

Research (1st phase)

During the research phase, I wanted to achieve a few goals:

1. Find a way to motivate users for regular exercises to stay fit.
2. Determine users’ biggest frustrations in other fitness apps.
3. Define why users give up on doing sports.
4. Understand how to allow people to do workouts without a coach and achieve the best results.
5. Define people's behavior while searching for workouts.

Research (2nd phase): User Personas

The data collected during the first research phase helped me create a few user personas. Understanding the target audience allowed me to find out the main fitness goals and frustrations of users.

Business and User Goals

Information Architecture

The main task was to analyze and organize all the incoming information to visualize content blocks and features.

Case 1: User wants to find special workout programs which meets all his requirements

Case 2: User wants to take part in marathon challenge with his friends

Wireframes: Low-Fidelity

I start wireframing with sketches on the paper. I chose to start with the main screens. It helped me to figure out what layout would be the most comfortable for users and how to structure information. During this process, I consulted with developers to be on the same page about app vision and realization.

Wireframes: High-Fidelity

After I’ve finished with sketched I had a clear vision about how to implement all features and created a satisfying structure for both users and business. Then I started the research part to find visual inspiration. And I chose a dark theme for our application to make less stress on eyes and bring unique feeling during usage experience.

Conclusion

It is always inspirational to build a valued product that can influence the daily life of the people who use it. The most crucial part is a clear idea and plan for development. Developing an inclusive application takes less time when the whole flow is structured and finalized.Hopefully, you'll find the article useful and good luck with your future project endeavor!