Fitness platform for online training.
Project overview.
- The product: Fitness Coaching platform for online workouts.
- The problem: People who can’t go to the gym generally rely on home workouts. However, people usually don’t know what to start and how to work out in the right way.
- The goal: Design an online platform where people can find different training programs based on their abilities or ask the trainer to create a personalized training program for them.
- My role: UX/UI designer, UX researcher
- Responsibilities: Conducting interviews, paper, and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User research: summary.
I conducted interviews and created an affinity map from interviews and surveys to better understand the users I’m designing for and their needs. Different groups were interviewed but through research, I came to know busy professionals who don’t have time to go to the gym prefer to workout at home, moreover, during COVID-19 it was the only way to workout.
Pain points.
Personas.
User journey map.
Mapping users’ journeys revealed how helpful it would be for users to have a website with the possibility to create a personalized training program and consult with a coach online.
Starting the design.
- Paper wireframes
- Digital wireframes
- Low-fidelity prototype
- Usability studies
Paper wireframes.
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
Digital wireframes.
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.
Low-fidelity prototype.
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was ordering a training plan, so the prototype could be used in a usability study.
Usability study: findings.
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Refining the design.
- Mockups
- High-fidelity prototype
- Accessibility
Mockups.
High-fidelity prototype.
The final high-fidelity prototype presented cleaner user flows looking for the training program needed, and also has a customized profile with the possibility to see the purchased programs and start doing workouts. All workouts have videos showing how to perform them.
Try the prototype.
Please note that this is only a prototype and may not have the full functionality of the final website.
Mockups for desktop and mobile versions of the dedicated website.
Final design with adaptation to mobile devices.
Accessibility considerations.
The whole work took 48 hours.
