Fitness App Mobile-First Design
This product provides free workouts and programs to inspire and support users in their journey towards better health and happiness.
As a UX designer, I am responsible for the UX/UI design of the app and responsive website using Adobe XD, from the initial concept stage to the final delivery.
User research summary
The user research and empathy maps showed that lack of motivation and expensive memberships hindered the positive experience of online fitness for many users.
Digital Wireframes
On the home screen, it shows workout stats and favorite free workouts, which can be started using earned coins from completing planned workouts or rewards from daily login.
Low-fidelity Prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of planning a workout program. Illustration on the right shows the detailed connections.
Ideation
I ideated solutions for free training programs, streamlined planning, and in-person guidance through a quick exercise.
Usability Study
Following the low-fidelity prototype testing and ideation, I conducted a usability study utilizing the parameters on the right, that uncovered some key findings:
Planning: Users want a brief & concise program planning confirmation and the option to set a start date.
BMI: Users want BMI measurement while planning a program.
Workout Search: Users preferred workout covers with some info instead just images.
Wireframe To Mockups
To address the findings from usability study, I included BMI measurements to aid in workout program selection, with the flexibility to switch programs if desired.
Mockups: Additional Changes
The changes included adding a drop down menu to trigger calendar in order to let the users setting the program’s start date.
Key Mockups
Here are the main mockups that showcase key features and design decisions.
High-fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
Accessibility Considerations
Sitemap for Website
The website's primary focus is to introduce the mobile app, highlighting popular workouts, various levels of difficulty, and the app's unique features to visitors and users.
Responsive Designs
The designs for screen size variation included mobile and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Things I learned & What’s Next?
Despite the challenges, I followed the design process closely and focused on user needs, resulting in practical and effective solutions.
Next I will
Thanks for your lovely stay :)
© 2023 Your brand name
