.png)
.png)
FitReel
Team: Jenani Yoganathan, Angela Li, Yasmine Rowe and Eric Li
Role: Project Manager, Researcher and Product Designer
Timeline: Four months
Overview
Problem
Being consistent in the gym is an essential requirement for a healthy lifestyle. Various students tend to find difficulty in balancing accumulated school work with physical health. In addition to this, students tend to lack motivation leaving them stuck in a continuous cycle of distress. To combat this, we have decided to create a fitness application that provides students with various fitness guides along with motivational features to ensure they stay focused on their fitness aspirations.
Our Approach
Our design process was rooted in empathy and a user-centred approach. We aimed to deeply understand the challenges faced by post-secondary students in maintaining their physical health amidst academic pressures. By identifying pain points and motivations, we could create solutions that are both practical and impactful. To ensure our app addressed real user needs, we began with thorough research and collaboration, combining our diverse skill sets to ideate and iterate effectively. This process enabled us to design a product that not only motivates users but also fosters a supportive fitness community.
User Interviews
While we had a basic understanding of the challenges faced by students regarding gym motivation, we decided to dig deeper to gain more insights. Our approach involved conducting interviews with post-secondary students, each team member interviewed a post-secondary student with varying levels of gym experience using a list of questions we created together. Through these conversations, we aimed to uncover detailed perspectives and understand the underlying factors influencing gym attendance.
To the right, you will find personas developed from the insights gathered through these interviews. These personas serve as representative profiles, capturing the diverse perspectives and challenges faced by students regarding gym motivation. Below, you will find the list of interview questions each team member used during their interviews with post-secondary students.
User Interview Findings
Analyzing the data from this user-centred approach enabled us to learn about concerns that might cause students to prioritize their physical health less. Based on the interviews, we created personas and identified three key pain points.
.png)
Emotional Barriers
Emotional barriers students faced was a common issue. Feelings of nervousness, lack of motivation, or anxiety often deterred them from going to the gym, particularly when dealing with other stressors in their lives.
.png)
Resource Constraint
A significant number of students stated common challenges such as limited time, ability, or access to equipment. The crowded nature of gym facilities also did not help with these barriers, making it difficult for students to engage in workouts effectively.
.png)
Fitness Literacy
Many students, especially those new to the gym, expressed uncertainty about which exercises to perform to meet their fitness goals. This lack of knowledge acted as a significant barrier to initiating regular gym routines.
By understanding these pain points, we gained valuable insights into the complex dynamics influencing gym motivation among post-secondary students. These findings provided a solid foundation for developing targeted solutions aimed at addressing these challenges and fostering a more supportive gym environment for all students.
Ideation
To address these challenges, my team and I conceptualized and developed a mobile application geared towards empowering users to overcome barriers to exercise.
I proposed the BeReal function, aiming to cultivate a supportive gym community. Users can share their gym experiences, interact with others, and foster motivation and accountability. This feature aims to address the common lack of motivation among students by providing a sense of community and encouragement to attend the gym regularly. BeReal exemplifies an application fostering community and reactions, prompting encouragement and validation while allowing users to track memories over time. Celebrating and acknowledging accomplishments are vital for staying motivated and encouraged at the gym, inspiring users by witnessing intentional change. This feature is designed to help overcome emotional barriers by creating a supportive environment where users can share their challenges and successes, receiving encouragement and validation from their peers
I led the development of the Exercise Explore page, a curated resource hub offering a variety of exercise-related content. This feature aims to enhance users' fitness literacy and equip them with the knowledge needed to achieve their fitness goals by providing informative videos and articles on various exercises. Building on this idea, my team suggested additional enhancements. A recommended section will be provided, and users may search for specific exercises. The page is divided into individual exercises and whole workout routines. If users select an individual exercise, they can choose a specific body part to focus on. To improve search functionality, we decided to implement a filter and sort feature based on experience level, allowing users to find relevant content more easily.
Finally, the last key feature we wanted to add was a personal records page to keep track of the user's progress. This feature includes a progress calendar feature that will have the user's posts saved to the date it was posted. On this calendar, users can also use emojis to indicate what muscle group they worked out. For example, on November 6th the user worked out the arms. The user can then add the emoji of an arm to indicate this. Finally, on this page, the user will be able to see and edit their personal records. All these features are meant to help boost productivity, motivate users, highlight their achievements and build a community with other users.
These features directly address the common challenge of users feeling unsure about which exercises to do, offering clear guidance and consistent support as they progress on their fitness journey. Our goal was simply to create a strong sense of community, motivation, and satisfaction for our users by providing helpful resources, inspiring content, and interactive experiences.
Digital Wireframes
Low Fidelity
After establishing our key features, we started translating our sketches into low-fidelity digital wireframes on Figma to bring our vision to life.
Mid Fidelity
During mid-fidelity prototyping, we began incorporating and refining our features using colours, icons, and images.
Testing Using The Heuristic Evaluation Method
Mid fidelity
For the heuristic evaluation, we designed it by creating five pre-designed tasks that the tester had to complete/do. These tasks are:
1. Sign upFind fitReal for November 13th
2. Explore workout routines
3. Find a body image quote
4. Find tips for deadlift exercise
5. Upload a photo
While the tester was completing these tasks the conductor of the evaluation took notes on problems the tester faced, proposed fixes and any positives and negatives about the prototype.
Participants
The participants we chose for the heuristic evaluation are Global Business and Digital Art (GBDA) students who have experience and knowledge in user design and heuristic evaluations. Even though these participants pursued the same degree they however had different experiences when interacting with our prototype.
Summary
As the three participants went through the pre-made user tasks they found similar problems and design errors. The four main issues the participants all mentioned were:
1. The back buttons were missing on some pages which left the user trapped and unable to proceed to the next screen.
2. The navigation bar is only available on the home screen and then it later disappears.
3. When users click on the Fitreel logo it doesn’t bring them back to the homepage all the time. It is inconsistent.
4. Certain elements such as buttons, arrows and text shift as the user goes through the app and are also not aligned.
Reflection
After reviewing the feedback and heuristic evaluation we realized that when designing we tend to forget about the small things such as back buttons and ensuring that all the logos link back to the homepage. We prioritized the main features of the app rather than the basic and essential features.
Changes
After looking at the results of the heuristic evaluation we learned that we needed to fix certain features and add things to our prototype in order to ensure the user can efficiently and successfully use our prototype to the fullest capacity.
High Fidelity Prototype
After conducting several heuristic evaluations and identifying any issues with the app, we created the final prototype using Figma and Adobe Illustrator. Some videos are provided below to explore our complete high-fidelity prototype of FitReel. You can also click the button to see our Figma file as well.
.png)
.png)
Key Takeaways
Mastering Figma for UI/UX Design 🖌️
This project was my first time using Figma extensively, and it proved to be a great learning experience. I was able to refine my skills in UX/UI design by focusing on finer details like colour schemes, icons, and layout consistency. Figma’s collaborative features allowed me to work seamlessly with my team and iterate quickly, which helped me gain a deeper understanding of the tool’s full potential. I paid close attention to the visual flow of the app, ensuring that each screen was not only functional but also aesthetically pleasing. As I worked through multiple iterations, I learned how to create intuitive user interfaces that were both engaging and easy to navigate. This experience helped me become much more proficient in Figma, significantly improving my design process and solidifying my confidence in using the tool for future projects.
Evolving Through Feedback 🔃
Throughout this project, I quickly realized how crucial it is to embrace reflection and adaptability in the design process. After conducting heuristic evaluations, we identified several issues, such as navigation inconsistencies and misaligned elements, that could hinder the user experience. Rather than seeing this feedback as a setback, I saw it as an opportunity to improve. This process reinforced the importance of being open to changes and adjusting designs based on real user feedback. I learned to prioritize not just the features but also the fundamental elements, like navigation and consistency, that make an app truly functional. The ability to adapt and refine my work based on insights from users and team members was a key takeaway, and it helped me grow as both a designer and a problem solver, ensuring that my design decisions were always aligned with the user’s needs.