Fitted is a theoretical project of a responsive web app that was part of my course "UI For UX Designers" at CareerFoundry's bootcamp.
The Challenge
Fitted is a concept designed for people that want to keep or build healthy habits without the need to loose a lot of time or spend money on a gym or fitness equipment. This app offers a wide-range of exercises and programs based on user's needs thanks to the Artificial Intelligence. It estimates the needs and the time that the user needs to train depending on their goals and motivations.
User Flows & Sketches
Since a big part of the initial UX research was already done by CareerFoundry, I started by reviewing the project brief. In this brief, I was given the main features I had to design for, so I started drawing user flows in order to better understand the essential steps that the user needs to complete a specific task.
After that, I started the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.
Mid-fidelity Wireframes
Translating the sketches into digital wireframes allowed me to check the effectiveness of the design and the approach I was using. I was able to keep the structure of the app without loosing too much time on details.
Getting Inspired: Mood Board
UI Style Guide
High-Fidelity Screens
Responsiveness & Consistency
This app has been created with a mobile-first approach, which means I had to keep in mind how the elements would look like in bigger screens. It was very important to keep consistency between the different breakpoints while taking into account the different formats.
Takeaways
- I had to take into consideration the needs of the users on different devices, since they won't use the app for the same reasons on the different devices. For intance, users will use more the smaller platforms when working out and they are more likely to use the bigger formats for purposes like adjusting their settings, asking for help or exploring further functionalities.
- One of the main struggles that I had in this project was reflecting the mood I had in mind into the screens. When I started putting details like color and images I wasn't exactly designing what I had in mind, so it resulted in several iterations and modifications until I got a satisfying result. To resolve this, I went to check again for inspiration and rethink the mood.
- Another obstacle I encountered was when I had to expand to bigger formats. It's not about just making everything bigger, but rather about redesigning and rethink about the purposes of the bigger formats. What I did in this case was to explore on Mediaqueri.es, where I found many great examples of solutions.
