Case Study
5 Mins Read
Enhanced Management and Goal Tracking Gym Trainer Web App
Overview
What is FITsociety?
Fit Society helps fitness coaches build stronger client relationships by offering a platform for creating effective workout plans, monitoring progress, and providing personalized nutrition support.
Team Members
1 Designer (My Self), 1 Project Manager (My Client), 2 Lead Software Engineers, and 4 Software Engineers
My Role
Led a comprehensive redesign of the entire product, from research to final implementation for Coaching Environment, the Customer environment (Mobile App) and Website assets
Tools
Figma, Figjam, Adobe Illustrator
Timeline
Started the project by spending 2 weeks researching similar products and planning the app's layout. Then, I spent 7+ months designing the app's user interface, constantly testing it with Coach or users, and making improvements.
Scope
Challenge
FitSociety offers a pair of applications; one designed for trainers, the other for clients. The initial application helps trainers oversee and train their clientele. This project segment concentrates on the trainer-facing app. I commence ventures with my client to comprehend their operations and the issues they experience with their existing app. Additionally, I conduct UX audits on their web application. In doing so, I identified three primary UX challenges that training professionals encounter.
Data Accessibility
Coaches struggle to access essential enterprise and client summary data from the current overview and tables.
Progress Tracking
Monitoring and managing member progress is inefficient due to a lack of clear and actionable insights.
Plan Creation
Developing personalized nutrition and workout plans for each client is time-consuming and difficult to adjust based on client needs.
Data Correlation
Coaches find it challenging to analyze the relationship between client goals, workout performance, and dietary intake.
Project Scope
This case study focuses only on the redesign of the coaching environment SaaS
Responsibility
Led the redesign of the FITsociety coach SaaS platform. Collaborating closely with the project manager and tech lead, I oversaw the entire design process from research to final UI implementation. This included establishing a comprehensive design system, creating intuitive user interfaces, and developing thorough testing guidelines to support UX evaluations.
Design Process
Competitor Research
I do reseearch to identify industry best practices, benchmark against competitors, and ensure that FitSociety introduces innovative and competitive features. This research informs decisions that will set FitSociety apart in the market, especially in Netherland market.
Insight 💡
Most competitors prioritize gym member experiences, focusing on goal setting, plan creation, and progress tracking. However, a notable gap exists in providing simple, accessible meal planning solutions for gym members and modern-clean user interface
Information Architecture
Creating a clear Information Architecture enhances user navigation, making it intuitive for trainers to access essential tools and functionalities. This step lays the foundation for an efficient and user-friendly app.
Wireframe
I started by creating simple sketches of the app's layout, focusing on where things would go rather than how they looked. These helped me and my team quickly see how the app would work. I showed these sketches to the client and we do a brainstorming & feedback session before moving on to the next part.
Moodboards and Style Guide
Moodboards will help me visualize how UI and visual elements come together to achieve the desired look and feel.Style guides will ensure I maintain consistent design throughout the app, reflecting the brand's personality.
Concept and Testing
I collaborate with my Client (PM) and will present the high-fidelity design to fitness coaches, gathering their feedback to refine the user experience. Additionally, we will conduct user testing to ensure the design aligns with end-user needs and preferences. By incorporating this feedback, we will address usability issues and validate design decisions before final implementation. Here some main case that we found and refine
Navigation Layout
Initially, we opted for a top navigation to maximize content display area. However, user testing revealed a stronger preference for left-side navigation due to its familiarity and ease of use.
Member Details
We explored various layout options for the user summary. The most effective approach involves a page layout with user tabs on the left and engaging content on the right, rather than using the menu on the top
Calendar
We're implementing a monthly calendar view on the left-hand side to provide coaches with a clear overview of their availability. Customer booking inquiries will be displayed as overlays on the calendar, allowing coaches to easily match requests with their schedule.
Meal Plan
A day-by-day timeline effectively guides users towards personalized meal plans. By creating a cyclical structure, we can streamline the planning process and ensure consistent meal suggestions.
Settings
Tab navigation for numerous settings proved inefficient. To enhance usability, we'll implement a settings bar with key options readily accessible. Before diving deeper into settings, coaches will benefit from a pre-set overview of available configurations.
Final Design
Through effective collaboration, we've finalized the Coaching Webapp redesign and handed it over to developers for implementation.
Customer
Easy to use design to track the customer progress and assign the meal-training plan to each customer
Nutrition
Design a meal plan schedule to assist clients in attaining their weight objectives and managing their calorie intake. In this diet planner, the coach can locate and include food items and add them into the day-to-day plan session.
Calendar
Effortless toggle between monthly and weekly display, enabling coaches to accept or decline scheduling requests
Create Training Plan
Easy to add exercise and setup the set, repetition, weight and rest time in the train plan menu
Chatting
Allow coach to communicate with their customer, it also can create new group chat to handle group session
Business Overview
Easily get an overview of their studio, track the financial things in this menu
Setting
Allow user to manage the customer preferences and also make mobile app customization
Key Takeways
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Next
