< Back to Projects


Fitness App Case Study

The Mission: 🎯

This was a personal project to further enhance my UI skills. The goal was to learn how to incorporate the needs of a few people, then narrow down them down to the most important ones that could be beneficial to a whole group of that would use the application. I also chose to do a mobile-centered interface because we rarely had the chance to do so in our projects. We were more focused on web design, not software/app design. And since UI tackles not just web design, this gave me a window of opportunity to learn and develop an interface on a technology that the majority of the population uses.

This project is about not just workouts but fitness in general. I had to think further on the exercises and include features that can enhance someone’s health in the long run. 

Empathy Map

User Personas

Challenges Faced: 🤔

  • Brainstorming notes on empathy maps was a challenge since I had no real data to pull from as I was more focused on the UI aspect of the project. I had to rely on what other people have told me about their experience on the fitness app they used, what I experienced in the past, and do some competitive analysis research.
  • I had to keep in mind other features that can be used in the app that people tend to use while keeping track of their fitness goals (I created a food/water tracker page, and a music page). 
  •  “Which fonts and colours will look the best and will send out the tone of voice I’m trying to convey?” (Tone of voice: Strong, Encouraging, Friendly)
  •  “Which elements would be better to have on this landing page? Which elements would be more beneficial for the user?”
  • “What signifier can I implement to let the user feel accomplished about tackling their daily workout challenge and keep them motivated?” 

Low-Fidelity Wireframes

Medium Fidelity Wireframes

Outcome: ✅

After drafting multiple wireframes and debating with various choices, I was able to create and put together a finalized design. I’ve went with a minimalistic design as the attention should be on the functionality of the app. I have included elements that may be helpful when it comes to someone’s fitness journey and overall physical health. I also included a social aspect: sharing their progress on their social media and the top exercises done that week. This may entice the person to be more motivated if others were involved in their journey. There are also trophies to be earned, which may be beneficial to those who are competitive and gets motivated through achievements.  I kept in mind the types of people that might use the app, so the workouts are divided into three separate levels according to the person’s fitness intensity. 

High-Fidelity Wireframes & Prototype

> To access the prototype, please click here.


This is a solo project. Responsibilities included: 

  • UI Design
  • UX Research/Design
  • Graphic Design


  • Adobe XD
  • Adobe Illustrator


1 month