UX Challenge
Health and fitness app for athletes
Project overview
I set out to refine my design and interaction skills by tackling a new UX challenge: designing a health and fitness app for athletes. This project would provide an opportunity to refine my user interface design, interaction design and animation skills.
Mindset Fit App - Splash Screen
Mindset Fit is a health an iOS fitness app designed for athletes looking to strengthen their mindset and enhance mental resilience for peak performance. It provides tools and exercises to help users reach their full potential. This case study covers the design journey, focusing on key decisions and final outcomes.
The app
Tags
UI Design, Interaction Design, Animation, Prototyping
Tools used
Figma, Mobbin, Adobe Stock
Plan
I designed Mindset Fit with the following features:
Personalised plans: Tailored to the user’s fitness level, chosen sport or exercise, and mental strengths. Each plan includes adaptive audio sessions and mental assessments that adjust based on progress.
Coaching: Access to a range of articles and professional coaches for advice and support for mental conditioning.
Profile: Allow users to view their plan details, change their email and password, and log out of their account.
More: Refer a friend, report a problem, view terms and contact the company etc.
App features
Design
To begin, I decided to set up variables in Figma. I knew how powerful this feature was in ensuring a consistent and organised design library. I began by creating primitive variables, which I then linked to token variables. Additionally, I would set up variables for typography and later for prototyping.
Variables library
Primitives, Tokens, Typography Variables - Figma
I would then create the following component library (or style guide), which would ensure visual consistency throughout the app, adhering to a clean, modern aesthetic that I thought would reflect its focus on mental well-being for professional athletes.
Component library
Components - Figma
After setting up components, I then moved straight onto high-fidelity designs, which were designed to present the app’s final look and feel. The screen below shows the splash screen. I used a fitness-themed stock video with a gradient overlay that loops in the background. From this screen, users could log in or sign up.
Prototyping
Splash Screen - Mindset Fit
After the user selects an option from the splash screen—either to log in or sign up—they are directed to the respective screen. These screens illustrate both the log in and sign up options, shown in their fully completed/filled-in states.
Log in & Sign up - Mindset Fit
The following set of screens involved the user assessment, which begins after the user completes the sign-up process. This assessment was designed to assess the user's current fitness level, preferred sport or exercise, and mental strengths before presenting a tailored selection of plans.
A key challenge in this user journey was managing screen triggers. I aimed to ensure that primary buttons only became available once users had interacted with specific areas on certain screens, effectively guiding them through a survey-style assessment.
Additionally, I integrated a separate calendar component as an interactive overlay, allowing users to select both the month and day. Once a plan was chosen, a loading animation was displayed while the user's personalised plan was being built.
Completing an Assessment - Mindset Fit
After completing an assessment, the user would arrive at the Plan screen, which essentially serves as the app's home page. Here, users could view their current progress and statistics. I took the opportunity to be more visually creative on this screen, experimenting with graphs and other visual elements to enhance the user experience.
Plan (Home) - Mindset Fit
On the Plan screen, users can track their weekly progress by selecting a specific week. The following screens illustrate the scenarios when doing so: Screen 1 displays the user's current week in progress, Screen 2 shows a completed week, and Screen 3 highlights a week where a session was missed.
Week Scenarios - Mindset Fit
Once the user launches a session, they’ll see the screen below. For this, I wanted to give a meditative kind of feel, hence the smoke background video. By also integrating variables into the prototype, I was able to create a realistic countdown timer, as well as a moving progress bar to add to the realism of a live session.
Session - Mindset Fit
Upon finishing their session, users would be guided through a post session questionnaire shown on the next screen. This very quick survey would help users track their feelings and mental values, with the responses being recorded to monitor their progress.
Post Session Questionnaire - Mindset Fit
For additional support, users could access the Coaching screens. These screens offer users the option to either explore other trainers related to their plan and switch to one, or read external articles that are also relevant to their specific plan.
Coaching - Mindset Fit
In the Profile feature, users could enable push notifications from the available options.
Profile & Push Notifications - Mindset Fit
From Profile, users could also view plan details, update their email address, and change their password.
Profile > Plan Details, Change Email, Change Password - Mindset Fit
The final feature was More, where users could refer a friend to the app by sending a code to their email address.
More > Refer a Friend - Mindset Fit
From More, users could also report a problem within the app. This gave me the opportunity to test a dropdown component within the prototype using variables. The idea here was that users had to select a specific issue from the dropdown, followed by details of that problem before they could proceed.
More > Report a Problem - Mindset Fit
Learnings
Overall, I’ve developed a solid understanding of creating a consistent and organised component library by making use of Figma's variables feature, applying them to various design aspects such as spacing, colours, borders, text, and radius etc.
I also significantly improved my prototyping skills in Figma, learning how to add videos as backgrounds, use component triggers by applying variable actions, create timer effects with delays and 'What If/Else' actions, and further utilising the auto-animate feature to design micro animations. By doing so, I was able to reduce the number of screens needed for the prototype.