“Best Shape”: Mobile Fitness App Prototype

"Best Shape": Mobile Fitness App Prototype

UI/UX Design | User Flow | Wireframing | Prototyping | Figma

Contents

About the Project

Initially this project was created for my MDIA 2330 Prototyping Tools course in BCIT. The purpose of the project was to apply Figma concepts learned in this course by creating a simple mobile app prototype.

As an active user of several fitness apps, I saw this assignment as an opportunity to create my own fitness app prototype —one that incorporated useful features I had always wanted but couldn’t find in existing apps.  As this was my first ever UI/UX design project, I used the skills I learned in class and created four key screens for my mobile fitness app “Best Shape”: Home Page, Search, Map, Profile Page.

As I further developed my design thinking and prototyping skills, I decided to refine my initial prototype. My goal was to add more functionality to my fitness app to make it even more useful for fitness enthusiasts.

The Initial Prototype

Design Process 

To organize the prototype refinement, I sticked with the following design process:

  1. Brainstorming
  2. Research
  3. Wireframing
  4. Image and Video Collection
  5. Prototyping

1. Brainstorming 

I started the refinement process by brainstorming the structure of the new prototype. My goal was to integrate the existing screens with the new ones in a logical and cohesive way. To achieve this, I created an app map that outlined different possible features and pages for the fitness app. This helped me visualize the structure of the prototype and organize my ideas effectively.

App Map

After exploring multiple feature ideas, I decided to focus on one: the ability to invite a workout buddy. This feature felt particularly relevant in today's digital world, where many activities are done alone. My next step was to create a flowchart that mapped out the step-by-step journey of inviting a workout buddy—from opening the app to completing a workout together.

A flowchart in UX design is a diagram that visually represents a process or user journey using symbols and arrows. This technique allowed me to plan and structure how users would navigate through the app in a clear and intuitive manner.

I used FigJam to create both the app map and the flowchart. FigJam is a flexible digital whiteboard designed for mapping ideas, which made it a perfect tool for the brainstorming phase of this design process.

 

Flowchart

2.Research

The next phase of my design process was research, where I compared my app’s three main competitors in the fitness industry.

Before identifying my competitors, I asked myself: “Who is my fitness app targeted at? What is its main goal?” Since the main user flow of my prototype centers around the feature of inviting a workout buddy, I realized that the core purpose of the app is to make exercising more accessible and fun. The best way to achieve this is by reducing any friction users might experience when starting a workout session. Motivation is also key—it’s easier to overcome challenges with a friend, which is why the buddy-invite feature is so compelling. To summarize, my target audience consists of people who want an easy-to-use tool to help them exercise, and who value working out in a community of like-minded individuals.

Based on this, I compared three major competitors: Alo Moves, Nike Training Club (NTC), and Find What Feels Good. These apps, from well-established fitness companies (Alo and Nike) and a popular yoga instructor (Adriene from “Yoga with Adriene”), are ideal examples for anyone looking to make exercising a habit.

A potential member of our target audience

After thoroughly analyzing these apps, I identified several common features that could inform my design decisions:

  • User Interface (UI): All three competitors have sleek UI and well-organized menus that make the apps easy to navigate and user-friendly.
  • Personalization: Both Alo Moves and NTC excel at personalization by offering users recommendations based on their preferences and past activities. NTC places a strong emphasis on progress tracking, with visual indicators showing how users are progressing toward their fitness goals.
  • Community Engagement: All three apps foster community engagement to varying degrees. Alo Moves and NTC promote this through fitness challenges and achievement tracking, while Find What Feels Good takes a more direct approach by emphasizing comments and support systems, allowing users to motivate each other.
  • Gamification & Motivation: Alo Moves and NTC incorporate gamified elements like achievement badges, progress tracking, and reminders to keep users engaged and motivated.
  • Offline Accessibility: Both NTC and Alo Moves allow users to download workouts for offline access, which is great for users who may not have internet access during workouts.

3.Wireframing 

After completing my research, I moved on to designing a low-fidelity wireframe.

Wireframes serve as a blueprint for the final design. They help visualize the basic structure of a screen without distractions like color, typography, or images, allowing designers to focus on layout and content organization.

Since this phase does not require polished designs, I used the traditional pen-and-paper method for wireframing. I find this to be the fastest and easiest way to sketch out my ideas.

To create the wireframe, I followed the flowchart from the first phase of this project, ensuring a logical and seamless user flow. As a result, I wireframed the following key screens:

  1. Home Page – Displays featured workouts, text content, and a CTA button to start a preplanned workout.
  2. Workouts Library – Includes multiple carousels with video thumbnails, a search bar, filters, and category pills for different types of workouts.
  3. Workout Video Player – Features a workout video with a CTA button to invite a workout buddy.
  4. "My Workout Buddies" List – Allows users to select a friend to invite.
  5. Camera & Microphone Activation – Ensures users can enable their camera and microphone for the shared workout experience.
  6. Shared Workout Space – Displays a video call between two users alongside the workout video in progress.

 

Low-fidelity Wireframe

4. Prototyping 

The final phase of my design process was creating an interactive prototype in Figma. I enjoy using Figma for prototyping because of its extensive functionalities that streamline the process. While refining my design, I fully appreciated the range of tools available, which helped enhance efficiency and maintain consistency.

Since this was my second iteration of the project, I was able to reuse and refine existing components from the first prototype—such as the header and bottom navigation—which saved me time. Additionally, having a style guide from the first iteration allowed me to skip the step of selecting typography, icons, and colors, while ensuring design consistency. This design includes fitness-related images, all of which were sourced from stock photo websites such as Adobe Stock and Unsplash.

You can find the interactive prototype walkthrough in the video.

The design of my mobile fitness app is a culmination of all the previous design phases, including research. The insights from my competitive analysis directly influenced my design decisions. You can see these strategies reflected in multiple aspects of the prototype:

  • Sleek and Minimalist Design – I maintained a clean UI with a minimal color palette and a consistent navigation bar to ensure smooth user navigation.
  • Personalization – The app recommends workouts to users ("Recommended for You" section) and allows them to start preplanned workouts (CTA: "Start Preplanned Workout").
  • Community-Focused Approach – Users are encouraged to work out with a friend through the "Invite a Workout Buddy" feature.
  • Motivational Features – During the video call, users can send encouraging reactions (heart, fire, clap emojis) or write motivational messages in the chat.
  • Offline Accessibility – Users can download workouts for offline use (download icon in the video player). However, the workout buddy feature requires an internet connection, as it relies on video calling.

The final interactive prototype does not represent the entire app but instead demonstrates one user flow—choosing a workout video and inviting a buddy to work out together. Some sections, such as Community and Profile pages, are included in the navigation bar but are not interactive in this prototype because they are outside the current user flow.

You can interact with the prototype provided.

Final Thoughts

To conclude, I’m glad I had the opportunity to refine this prototype. I believe that reflecting on and improving your work is one of the best ways to grow as a professional. During this second iteration, I not only practiced my prototyping skills but also strengthened my design thinking. While brainstorming ideas for the updated prototype, I realized how challenging it is to balance all the necessary app functionalities while creating a seamless user experience. I found that creating a flowchart was an especially useful tool in this process, as it visualized the user journey, making it easier to maintain a cohesive design.

I’m excited about the potential of this fitness app and how it aligns with my goal of fostering a sense of community. I look forward to gathering more user feedback and making further improvements—such as expanding the Community section to explore new ways of connecting people through fitness.

References 

To see references for this project, view Resources page.

Comments are closed.