01. Project overview
Fitted is a conceptual project that was created as part of CareerFoundry’s UI for UX designer course. I acted as the sole UI designer and completed the project in Figma over the course of one month. The project’s personal and user stories were established. As the UI designer, I translated these stories into users flows, a design system, and wireframes.
Problem Statement:
Create a product that provides users with an intuitive way to discover activities that match their interests and fitness levels, participate in fitness challenges, and manage their schedules by easily adding sessions to a calendar. The goal is to encourage and motivate users to establish a consistent routine that promotes a healthier lifestyle.
Solution:
Fitted is a conceptual, responsive web app designed to help users discover workouts tailored to their preferences—whether they have equipment or not—offering a range of intensities and durations. Users can commit to daily, weekly, or monthly fitness challenges and invite friends to increase motivation. The app supports habit-building with encouraging reminders and notifications, making it easier to stay active and integrate fitness into daily routines.
02. Empathize
To better understand our users' goals and needs, I developed a proto-persona based on the information outlined in the design brief.
Additionally, I researched the negative health effects associated with prolonged sitting, as many individuals—including myself—spend over eight hours a day at a desk. Various medical and news sources highlight the increased risks of heart disease, dementia, diabetes, weight gain, and numerous other health issues linked to excessive sitting. According to the Mayo Clinic, 'an analysis of 13 studies on sitting time and activity levels found that those who sat for more than eight hours a day with no physical activity had a mortality risk comparable to the risks posed by obesity and smoking' (Edward R. Laskowski, M.D., 2020).
Even small amounts of exercise can significantly improve overall physical health.
03. Ideate
Understanding why Rebecca needed a solution allowed me to focus on creating a valuable product to serve those motivations. With goals, tasks, and stories in mind, I created a user flow that mapped out the basic functionality and flow of the app.
I then created low-fidelity wireframes by translating the user flow. This ensured that all major functionality was accounted for.
04. Design
Grid System
Once the low-fidelity wireframes were sketched, I created my organizational system and grid to bring structure to my responsive design.
I created a 4-column grid for my mobile design, 8-column for tablet, and 12-column for desktop, as recommended by Material and Human Interface Guidelines.
Mise En Place
Using the atomic design methodology, I created re-usable components, which would help maintain a consistent user experience and efficiency in designing the product.
I consulted my sketches for the various components. I then created buttons, inputs, and other reusable elements.
Mood Board
Before getting started with the visual design I consulted the project brief again to prioritize the partial branding guidelines for key messaging and style. Fitted needed to be easy, informative, and fun. Fitted also had to be anchored in the brand colors, orange and black.
I created two different mood boards to explore how I wanted the application to look and feel. I chose the first mood board because I felt the style was more energetic and playful - it was the better match for Rebecca’s goals. The second mood board was too targeted towards existing athlete. I felt the bold tone could be mistaken as intimidating.
Color
When I began this course, I was most apprehensive about working with color. It’s always been a challenging area for me, so I knew this would be one of the most difficult aspects. I experimented with several color schemes, not only to push myself but also to find combinations that conveyed the sense of joy and energy Rebecca looked for in the app.
Designing for Breakpoints
Fitted was designed as a responsive web app, so the final phase of the project involved adapting the screens for different devices. I designed for mobile first and then scaled the design up for larger devices. I ensured the design remained responsive and functional across various breakpoints.
-
Width: 414 px
Columns: 4
Gutter: 20 px
Margin: 35px
-
Width: 834 px
Columns: 8
Gutter: 20 px
Margin: 32px
-
Width: 1440 px
Columns: 12
Gutter: 20 px
Margin: 40px
05. Style Guide
The mood-board and preliminary ideas helped define the style guide. I came up with basic principles to ensure the product had cohesive and consistent feel.
06. Deliver
The final step for this project was creating high-fidelity wireframes for mobile, tablet, and desktop breakpoints. I also created a mobile prototype to show interaction details. This prototype could be used for user testing in the future.
All of my design assets and documentation were compiled so that a developer could create a real product in the future.
07. Takeaways
This was the first project where I could fully immerse myself in the aesthetics, with less emphasis on user experience. Throughout the process, I learned the value of proper file naming conventions, the challenges of designing custom icons, and how impactful the right use of color can be—for both designers and users. Since I’m more accustomed to designing for desktop, creating for smaller screens was an exciting challenge, especially in finding the right balance at each breakpoint.
I’m eager to continue working on this project and iterating on my components to craft an even more dynamic and visually engaging application.
