Project Overview
The Project
As a student in CareerFoundry’s UI for UX Designers course, I was tasked with designing the UI for a mobile-responsive app that motivates users to follow an exercise routine that suits their fitness level, schedule, and interests.
The project duration was two months.
My Role
I was the sole UI designer on this project, responsible for end-to-end completion of the app’s UI design.
Tools
Pen and paper
Miro
Balsamiq
Figma
Deliverables
User flow diagram
Low, mid, and high fidelity wireframes
Mood board
Brand icon and icon set
Tablet and desktop breakpoint designs
Interactive mobile prototype
Style guide
High-fidelity mobile UI mockups
User Persona
The user persona was provided as part of the project brief, and was used to inform all aspects of the UI design.
User Flow Diagram
A user flow diagram was created in Miro based on the user persona and user stories provided in the project brief. The objective was to visualize the steps a user would take through the app and understand necessary features.
Low Fidelity Wireframes
Low fidelity wireframes were created in Balsamiq to represent the app’s key features and functions. Though the project had a mobile-first approach, three additional screens were designed for tablet and desktop breakpoints. Designing across multiple breakpoints makes it easy for users to access the Fitted from the devices that are most convenient to them.
Mobile
Tablet and Desktop
Log In Screen
Home Screen
Workout Screen
Mid-Fidelity Wireframes
Mid-fidelity wireframes were created in Figma with the intention of establishing a clear visual hierarchy. Grid and spacing systems were implemented, and basic UI elements were included.
Mood Board
With the main elements in place, a mood board was assembled to establish the look and feel of the app. The brief specifies that the app’s target audience is users who are getting back into fitness or getting into it for the first time. The sentiment is that personal fitness should be easy, enjoyable, accessible, and motivating.
The chosen mood board depicts an attainable version of fitness. The playful color scheme, lively icons, and smooth typography could appeal to target users. The quotes focus on gentle self-improvement and the images depict a diverse group of users, some of whom appear to be exercising in their own homes.
Visual Style Guide
High Fidelity Wireframes
The mid-fidelity wireframes were refined in Figma to incorporate the UI elements and design. Gestures and interactions were also included as part of the high-fidelity prototype to provide a more natural and engaging user experience.
Final Thoughts
Lessons Learned
This project was a great opportunity to learn and apply UI design principles. Through regular use, I gained deeper knowledge in design tools, especially Balsamiq and Figma.
Creating the mood board was helpful in establishing the look and feel of the app. Understanding what the app should and shouldn’t look like was essential in making design decisions further down the road.
Maintaining an organized digital workspace and clearly defining design elements was key to effectively handing off and presenting the project.
Challenges
As an app user, I didn’t fully appreciate the impact of gestures and interactions. When it came time to incorporate them into my design, I spent extra time researching and considering what would be intuitive and appealing to Fitted users.
Designing for different breakpoints was challenging at first because I wasn’t sure how to adapt the design. Referring to the project brief, user persona, and user flow helped identify the key features that should be expanded for tablet and desktop designs.
Next Steps
Conduct usability testing of the mobile prototype, analyze the results, and implement necessary changes in the next iteration of the design.
Continue expanding the functionality of the tablet and desktop designs.
