Black Belt Fitness
Situation
In 2020, it became apparent that during extreme emergencies, gyms could close suddenly, leaving millions without access to equipment that ultimately makes them healthier and strong.
As a student of Martial Arts, I was unable to attend Jiu-Jitsu classes. The experience made me want to create a fitness app where I could easily access techniques and exercises based on Martial Arts training I love.
To be flexible for as many people as possible, the app should allow users to create customized workouts for their specific goals or level.
They start as White Belts, and by consistent use, and eventually become Black Belts in fitness.
The Application
Information Architecture
Process
Utilizing the Design Thinking process, I began with research into the market and identified the martial arts fitness concept as a path not taken by any of the existing applications.
After reading hundreds of user comments and doing some testing, I made a list of features that would be ideal for a Black Belt Fitness user.
Taking the Mobile First approach, I then began rapid iterations of sketched wireframes and selected the best ones as a starting point for the design.
Wireframes
Low FidelityPrototype
Mid Fidelity Prototype
High Fidelity Prototype
Moodboards
Choosing a Direction
Testing out different moods for the app, I ultimately went with option one.
The monochrome color pallet is better for color-blind users.
The black and white also helps the app stand out from competitors.
Many of which have adopted oranges blues for their fitness products
Style Guide
Putting It All Together
After a successful round of user testing with the mid-fidelity prototype, it was time to flesh out the application with the final photography and animations.
The monochromatic color palette creates a natural dark mode. The high contrast adds in legibility with bursts of red highlighting various elements of the interface.
Finally, the movements of the graphs, menus, and logo have sharp, quick movements that snap into place. I designed these animations to match the rapid motions of working out.
Animations
Onboarding
Mock Ups
End Result
The finished product is a design I'm proud of creating.
There is still room for improvement.
I'd want to try a few different approaches to the gamification component of the app and do some more user testing to see which one works best.
Also, I'd like to enhance the social functionality of the app so people can opt in to compete with other users for the top rankings.
I learned an immense amount from creating Black Belt Fitness.
The result is a responsive application that combines photography, video, and typography in a way that hopefully does gives the user a fun and educational experience.
View Prototype
Thanks for stopping by.