Overview
Fitted is a project that I completed for Career Foundry’s UI specialization course. It is a responsive web app that helps users discover new exercises no matter their skill level or schedule.
Obective
Motivate people into an exercise routine that suits their level, schedule, and interests by building a product with clean UI that is easy and fun to use.
Context
While there happens to already be a plethora of exercise apps on the market already, a large portion of them are poorly designed and uninspired. So instead of reinventing the wheel in terms of features I chose to build a product with a clear focus and a simple design that users would be able to incorporate into their daily lives.
The Process
Like every product it starts with an idea that is put through a process (and not a linear one).
User Flow
Given that this was a UI project and some of the initial tasks were already completed, my first step was to create a user flow based on several of the end user’s goals.
Low-Fidelity Wireframes
After Creating the user flow I began to quickly create some low-fidelity wireframes in Balsamiq to help visualize what this product would eventually become.
Mid-Fidelity Wireframes
Having been pretty satisfied with the initial wireframes I increased the fidelity by creating them in Figma, which is the program I would be using to eventually create my final wireframes and mock ups.
Mood Boards
Since the wireframes I had made were in greyscale I created a couple of mood boards to help identify what colors I should use and give the app a distinguished feel for my users.
I had initially wanted to go with a more colorful/playful vibe represented in the first board, however after implementing it into my actual designs I opted for the more muted palette of board number 2.
High-Fidelity Wireframes
With my style guide complete I was able to put the finishing touches on my final screen.
Takeaways
This project was overall pretty fun for me as it allowed me to focus more on the UI of the app for a change instead of more UX heavy work such as research, testing, and interviews . As much as it was a challenge for me at points to come up with final designs it felt very rewarding when I was able to create an aesthetic that I felt proud of.
What I Learned
I learned a lot about the industry standards regarding UI design, specifically how different fitness apps choose to arrange their sites. I also gained even more familiarity with Figma during this project as well as numerous plug-ins that helped me find stock photos, make icons, and create mock ups.
Next Steps
Given more time and resources I would like to incorporate more original content into the app (i.e. photos and videos) to give it even more consistency. It would be great to work with a handful of personal trainers to develop their own workout programs and routines. This would give users the ability to follow and browse their favorite trainers and give them even more options to discover workouts.