Mobile UX/UI Case Study Project


1 month (remote)


Adobe XD, Adobe Illustrator


UI Design, UX Research, Graphic Design

The Mission: 🎯

This was a personal project to further enhance my UI (and a few of my UX) skills. The goal was to practice mobile-centered UX/UI design as I’m more used to doing web design. The application focuses not just in workouts but fitness in general. I had to think and do further research on the topics and include features that can enhance someone’s health in the long run in a interactive way. 

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 competitive analysis research on various fitness apps that were similar, and my own experiences from the past.
  • I had to research what other features can be implemented in the app that users tend to keep in mind while keeping track of their fitness goals (I created a food/water tracker page, and a music page). 
  •  Question in mind: “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)
  •  Question in mind: “Which elements would be better to have on this landing page? Which elements would be more beneficial for the user?”
  • Question in mind: “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 included a social aspect to it: 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.