Project overview
I aimed to refine my design and interaction skills by taking on one of the many UX challenges available online. I selected a challenge centred around developing a health and fitness app for athletes, as I thought it would provide an opportunity to focus on refining my skills in interaction design and animation, rather than conducting extensive user research, as is the case in most other projects I'm involved with. I would complete this project independently.
The app
Mindset Fit is a health and fitness app tailored for athletes who aim to train their mindset and enhance their mental fortitude to achieve peak performance. The app offers tools and exercises to help users achieve their full potential by strengthening their mindset. This case study explores the design journey of Mindset Fit, primarily highlighting the design decisions and final outcomes. I'll create this app for IOS only.
Tags
UI Design, Interaction Design, Animation, Prototyping
Tools used
Figma, Mobbin, Adobe Stock
Plan
App features
I'll design Mindset Fit with the following features:
-
Personalised plans: based on the user's fitness level, sport or exercise of choice, and their mental strengths. Each plan will feature audio sessions and mental assessments that adapt based on the user's progress and the day of the week.
-
Coaching: Access to a range of articles and professional coaches for advice and support for mental conditioning.
-
Profile options: Allow users to view their plan details, change their email and password, and log out of their account.
-
Additional options such as refer a friend, report a problem, view terms and contact the company etc.
Design
Variable library
To begin, I decided to set up variables using the latest variables feature 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 set up variables for typography and later for prototyping.
Component library
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 reflects its focus on mental well-being for professional athletes.
Prototyping
After establishing the variable and component libraries, I moved straight onto high-fidelity designs, which were designed to present the app’s final look and feel, including interactions.
The screen below shows the splash screen for Mindset Fit. I used a fitness-themed stock video with a gradient overlay that loops in the background. From here the user would be able to log in or sign up.
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.
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.
After completing the assessment, the user would arrive at the 'Plan' screen, which serves as the app's home page. Here, they 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.
From the 'Plan' screen, users could view their weekly progress. The following screens illustrate these scenarios: 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.
If the user wanted to run their next session from one of the previous screens, they'd see the following. For this screen I wanted to give a meditative kind of feel, hence the smoke background video. By also integrating variables into this prototype, I was able to create a realistic countdown timer, whilst also having the progress bar move gradually like it would for a real meditative session.
Upon finishing their session, users would be guided through the next few screens. This quick questionnaire helps to track their feelings and mental values, with the responses being recorded to monitor their progress.
For additional support, users could access the Coaching screens. These screens offer 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.
By selecting the Profile screens, the user had the option to enable push notifications.
Along with enabling push notifications, users could view plan details, update their email address, and change their password.
The final tab was 'More,' where users could refer a friend to the app by sending a code to their email address.
In addition to referring a friend, users could report a problem within the app. This also gave me the opportunity to test a dropdown component within the prototype using variables.
Learnings
Overall, I’ve developed a solid understanding of creating a consistent and organised component library by making use of Figma's latest 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 reduced the number of screens and frames needed for the prototype, aligning with my personal goal of efficient, advanced prototyping.