Trainx - Your personal trainer is always a click
Trainx – Your personal trainer is always a click
A mobile application with online courses and personal trainer to boost your performance.
Objective
Developing a mobile app that helps personal trainers to communicate & train their students
This idea was developed to pitch to potential business partners in order to find a way to realize it.
Challenge:
Learning by doing is the main principle of Trainx. Users can start a class at home from the Mobile app and continue with it on the training ground or gym. This approach has a significant impact on creating the UX/UI design. UX continuity across platforms mandated keeping the design simple and reducing it to only the most important elements, so users can focus on their training rather than learning how to use the program. Furthermore, it was crucial to find a way to let the trainer know the status and constant communiation with the trainee
My role
As the main UX/UI designer, I was involved in all phases of the project, from mapping out the problem to delivering final designs. I worked with a digital marketing strategist to form a cross-functional team.
Tools
Illustrator & Photoshop
Adobe XD
Figma
DESIGN PROCESS
Design Thinking
The development process of Trainx was shaped by the principles of the design thinking methodology. It helped me to keep a solution and action-focused mindset within every design phase
EMPATHIZING WITH USERS
Focus on Context to understand Users
Personas
Beginning the project, I created different personas based on online research and my understanding of personal acquaintances who are sports enthusiasts. Since users can take classes on the go, but also from home on a web app for desktop, I needed to take both interactions into account, when developing the personas.
DEFINITION PHASE
Job Stories instead of User Stories
Personas
After developing the personas, I next focused on figuring out what they need from Trainx that will keep them motivated and keep training the folks . The “what” was crucial to the exploration of di erent contexts in which users would interact and provide the relevent data to the application without making it combursome to the end user/trainee
For this process, I used the Jobs Stories framework developed by the people from inside Intercom to ensure a seamless user flow. It helped me to define key functionalities of the app:
– Better way to display the data to the trainer
– Make the communication seemless between the trainer and trainee
– Let the trainer change the plan according as per the data
User Flow
The user flow is based on the job stories and focuses on the two main goals users want
to achieve with “Trainx”
Check Trainees’ Fitness Data:
“When communicating to a trainee, I want to see and communicate the data, So I can make required changes in the program.”
Communicate data and training module with customer:
Whenever I communicate with trains, I want to show him data wher he permormed and where he needs to improve, so I can suggest the Changes in program”
DESIGN EXPLORATION
Ideating Solutions
Low-fidelity-wireframes
After defining the overall structure, it was time to pull out the pencil. I sketched the low-fidelity wireframes for mobile and desktop. I conducted audits of different online learning and course platforms to discern common patterns and pain points.
The most challenging part was the communication design where the trainer can share the data. It took a few concepts and revisions until I created a structure that was clear,
concise and easy to use. I always reached out for feedback and tested the design with different individuals throughout the entire process.
VISUAL DESIGN
Dashboard - Trainee list
Simple and cleaner dashboard wit main focus to the list of trainees and the plans/goals they are being trained for. the Trainer can check the financials and the profile settinga as well as app settings with simple swipe
Trainee Dashboard
When the trainer selects the individual trainee a dashboard is presented to him where he can see the data ans stats around the goals of the user. The user programs and chat are a swipe away. The Trainer can change a trainee by selecting the trainee from the dopdown.
Training Programme page
Program contains a clear indiactions of the days, weeks and the individial goals and exercise endered. The trainee can make it simple for trainee and precise. He can add more listing that include Nitrition or exercise and add video toe explain the exercise
Trainee Dashboard
In chat panel, the Trainer can be in touch with trainee to answer the queries he migh have, he has option to send attachment images or even voice notes.
Trainer can use key phrases followed with double hash (##) to import the data, e.g ##BMR to bring tha data of BMR of user in the system or ##nutrigoallastweek to bring the data for nutrition goals achievement by the trainee for last 7 days.
In similar fashion, trainer can add a listing in program with simple keywords followed with single hash (#) e.g. #benchp15kg10rp3rd will add benchpress with 15kg weight, 10 repetitions and 3rounds to the exercise list.
The user is has suggestions based system or can simply go to the individiual section and share the stats or add the exercise to the program that shows up in chat.
PROTOTYPING
High-fidelity-Wireframes
Using Figma and/or Adobe XD for High-Fid wireframes always gives the edge to design, prototype and conduct usability test seemlessly. This helps to figure out pain points at an early stage
Usability testing
The five precipitants had to achieve the three main goals of the user flow to indicate a successful design.
“You are a Trainer and you want to log in to your account and check the health data for one of your trainee.”
“You are a trainer and you want to share a Fitness Goal data associated with the user to the user in the chat.”
“You are a trainer and you want to share a exercise to the user in the chat.”
Test Results:
I sorted all pain points by priority and implemented participants’ feedback into the next stage of development.
The good news: All users could complete both tasks successfully!
The bad news: During communication, the trainer had to go to di erent pannels to share data or additional exercise. The trainer wished ther could be another alternative way to do samefrom same pane
Wireframes and Screens
5
Userflows
3
Iterations
27
Screen designs
15
User participants
in usability tests