top of page

Achieve your fitness goals

UX/ UI Case Study


April 2023 - June 2023


Mobile App & Website


Figma & Google Suite


As the lead UX researcher and designer, I designed an app that helps users find personal trainers who will create tailored workout programs to achieve their goals.


I am a UX designer responsible for overseeing the app design process from conception to delivery.

  • Conducting interviews

  • Competitive audits

  • Creating paper and digital wireframing

  • Designing Low and High-fidelity prototypes

  • Planning and conducting usability studies

  • Analyzing research findings

  • Iterating on designs 


The common challenges individuals face in maintaining a consistent fitness routine due to time, a lack of guidance, accountability, or access to resources.

Understanding Users

​User Characteristics

  • Users that have a busy work/personal life.

  • Users that don't know how to workout properly.


  • Users that are unsure of how to structure their workouts effectively.

User Research

Through interviews, I learned about our fitness app users, including gym-goers, outdoor enthusiasts, students, and working professionals.

Participants wanted guidance, personalized plans, instructional videos, and progress tracking.

Pain Points we identified after the first round of research


Users have a busy personal life or work schedule to find the right times to work out. 


Users want a personalized workout program to help them reach their goals.


Users want progress trackers to help them count their steps, calories, weight, etc. 

Defining the problem

After identifying pain points, I defined the problem with the help of "how might we statements."

How might we help users to make exercising a regular part of their daily lives? 

Our Users

Based on primary research, I created personas that represent and point out the users goals, frustrations, and needs.

User Persona


User Journey Map

Hokulani's journey map highlighted the need for a user-friendly fitness app that enables direct communication with a personal trainer.

Hokulani Journey Map


After creating a User Journey Map, I then did a Competitive Audit with key competitors in the fitness app market. I was then able to identify the opportunities to make improvements for our fitness app. 

Ideation Phase

During the ideation phase, I used the Crazy Eights method to generate creative ideas for the development of the fitness app. It helped me explore, and come up with different concepts and solutions in a limited time.

Crazy Eights Fitness


I brainstormed and sketched app screens based on ideas from the Crazy Eights exercise. Key elements from my sketches made it to the digital wireframes. 

PW 3.jpg
Image 6-16-23 at 4.04 PM.jpeg

Low-fidelity Prototype:

After generating ideas and creating initial paper and digital wireframes, I proceeded to develop the initial designs for FitZone, offering workout suggestions and a list of personal trainers to help users find the fitness guidance they are looking for.

Usability Testing

I conducted two rounds of usability studies to learn how users interacted with our app.

The first study used a low-fidelity prototype to assess navigation and task completion. These findings guided the design of wireframes and mockups.


The second study used a high-fidelity prototype to further refine the mockups.

The usability studies addressed key questions:

  • Is it easy for users to find a personal trainer?

  • Are users able to find their preferred way of selecting personal trainers, exercises, etc.?


  • How did they feel about the fitness app overall?


  • What did they like and dislike about it?​

These were key findings or insights we wanted to highlight.


Some users had issues navigating around the app from the home page.


Users preferred to add more colors on the app, and also suggested bigger, bolder letters.


Users wanted trackers for steps, heart rate, and for food.

Low-fidelity - Digital wireframes

- Homeage

Low-fidelity - Digital wireframes - Personal Trainer's page

Low-fidelity - Digital wireframes

- Self Introduction page

Screenshot 2023-06-17 at 3.36.15 PM.png
Screenshot 2023-06-17 at 3.36.21 PM.png
Screenshot 2023-06-17 at 3.36.23 PM.png

Final Designs


The app's early designs underwent significant changes in background, color scheme, and text. Descriptive imagery was added, along with bigger and bolder text for easier reading.

We improved the fitness app's layout and card title by adding color to make the titles clearer and more noticeable. We also filled up empty spaces for a more engaging and polished look.


High-fidelity Prototype:

After ideating and drafting paper wireframes, I created the initial FitZone app designs. They offer diverse exercises, access to personal trainers, and workout tools to help users achieve their fitness goals.

Accessibility Considerations 

  • Used icons with text to help make navigation easier.

  • Used detailed and descriptive images for each subject to help users better understand buttons and fuctionality.

Lessons Learnt

While designing the app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app's designs.

Next Steps

  • Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

  • Conduct more user research to determine any new areas of need. 

Thank you for taking the time to read this case study

FitZone Logo_edited.jpg
movie theater.jpg

Next Case Study

Snack Ordering App 


Problem Statement

Final Designs

Lessons Learnt

Our Users

bottom of page