User experience design process for RealTimeGym App - An app for real-time exercise guidance.
Nowadays, more and more people want to improve their physical fitness, but they are often faced with the uncertainty of where to start. To address this challenge, we are excited to introduce an innovative real-time fitness mobile app called “RealTimeGym” that will not only guide you through your workouts but also allow you to share with friends and surpass your own personal goals.
Our app goes beyond offering simple exercise routines; We are committed to personalization and constant motivation. Through the real-time workout function, you can follow your routine progress, making the way you exercise sensational and unique.
Additionally, the app will provide personalized routines based on your individual characteristics and personal goals. Whether you're looking to lose weight, gain strength, or improve your endurance, our app will adapt to your specific needs.
At this stage of the project, we focus on the user interface and its key elements: strategy, scope, structure, skeleton and surface. We are committed to offering an enriching exercise experience that not only guides you towards your goals, but also motivates you to exceed them day after day.
- Gustavo Díaz - Project manager
- Roberto Illesca - Analyst
- Javier Ortega - Designer
- Daniel Ruiz - Analyst
- Claudio Sáez - Designer
The first step taken by the team is to formulate the strategy for the Real Time App. A "Value Proposition Canvas" is employed to assess Real Time Gym App in relation to the customer's needs and the potential solution.
This analytical process has assisted us in comprehending how our application aligns with the needs and desires of our target market, as outlined in our "Value Proposition Canvas." Key elements highlighted include real-time exercise visualization, the creation of goal-based custom routines, and training days. Additionally, we've identified differentiating features such as real-time exercise playback, which add extra value to our offering. Our application addresses common user concerns by providing personalized workout routines and real-time guidance to enhance their physical condition. The anticipated benefits encompass the ability to observe real-time results and maintain effective progress tracking, while the problems we aim to mitigate involve the lack of guidance when commencing an exercise routine, uncertainty regarding exercise selection, and the absence of progress monitoring.
After defining a product strategy, it is essential to establish a scope. At this stage, we create a profile of our ideal customer and visualize how our product will work for them in the context of our application.
In the context of our Real Time Gym project, based on the UX Personas we've established, we develop the customer journey map as a representation of the anticipated interactions and experiences that users will go through while using our application. This map provides valuable insights into the user's path and helps us better understand their journey within the app.
Based on the feedback form the class assitant we removed the brands section from the UX Personas.
To create a Real Time Gym application that effectively fulfills user expectations and requirements, conducting a comprehensive analysis of existing applications in the market is imperative, particularly those that directly compete with our product. This process, commonly referred to as benchmarking, enables us to pinpoint the strengths and weaknesses of these applications, allowing us to integrate their positive aspects seamlessly into our own offering.
Through an in-depth study of competing gym and fitness applications, we can learn from their past mistakes and ensure we don't repeat them in our Real Time Gym app. Simultaneously, we can identify successful features and functionalities that we can adopt and implement in our solution, elevating the overall user experience.
The navigation diagram illustrates the interaction between different views of the application, outlining the steps a user needs to follow to reach their desired screen.
The navigation diagram was been updated with the new features (add friends and accessibility).
Wireframes
Full document here
Link Figma here
Mockups
Full document here
Link Figma here
A heuristic evaluation was conducted to inspect the usability of the RealTimeGym App.
The heuristic evaluation involves examining the usability of the interfaces by multiple evaluators (belonging to another similar application in the same domain), based on the fulfillment of recognized usability principles: the heuristics.
From this evaluation, some issues were identified and addressed to enhance the application. The solutions to these problems include:
- Adding a progress bar in the registration.
- Providing more options in the gender selection view.
- Highlighting the user in the progress view.
- Adding experience points to the progress.
- Specifying the purpose of each timer when performing exercises.
- Placing pause and resume buttons in the real-time exercise view.
- Standardizing the style of all inputs.
RealTimeGym App is committed to providing an inclusive and accessible fitness experience for a lot of users, regardless of their abilities or disabilities. Our app incorporates a variety of features and design principles to ensure that everyone can navigate, use, and benefit from the application seamlessly. Here's an overview of the accessibility features implemented in RealTimeGym App:
- More options in sex selection.
- Enlarge text.
- Change the theme to grayscale.
- Text to voice.
- Add subtitles to videos.
- Visual alerts.