Creating Fitness Application: UX/UI Design Case Study

1,193 reads

@ 2muchcoffee 2muchcoffee Web and Mobile Development

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.

reactions

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.

reactions

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.

reactions

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.

reactions

Challenges

Build an application with different online workout programs for everyone. Motivate users to stay physically active by fitness challenges and sports podcasts. Create a detailed activity monitoring system to track progress. 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.

reactions

Length of Project

2 months.

reactions

My Role

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

reactions

Research (1st phase)

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

reactions

Find a way to motivate users for regular exercises to stay fit. Determine users’ biggest frustrations in other fitness apps. Define why users give up on doing sports. Understand how to allow people to do workouts without a coach and achieve the best results. 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.

reactions

Business and User Goals

Information Architecture

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

reactions

reactions

reactions

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

reactions



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

reactions

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.

reactions

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.

reactions

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.

reactions

Hopefully, you'll find the article useful and good luck with your future project endeavor!

reactions

Tags