Fitmates
The Fitmates app allows users to connect with a community of fitness enthusiasts and join free group workout sessions happening near their location. Fitmates was designed to contribute to social good - helping lower-income groups to stay physically active and meet new friends. Project Timeline: March 2023 to April 2023.
Fitmates
My Role: UX designer – designing the app and website from conception to delivery.
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Problem: Some people may feel isolated and do not exercise due to a lack of motivation, no access to suitable facilities, or financial constraints.
The Goal: Fitmates aims to connect people with others near them to exercise together. Group workouts, such as fitness classes, can provide a sense of community and motivation to exercise regularly. Exercising with others can also be a great way to socialize and make new connections, which can help combat feelings of isolation and loneliness.
Understanding the user
The first step in the design process is to understand who I am designing for - what drives them and how can the product drive their needs.
Research Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was lower income individuals in urban areas with little to no physical activity. The user group confirmed initial assumptions about the target audience being mostly urban, with little knowledge of sports and a desire to save time, money and be healthier. Such users will engage with functional easy-to-use apps that offer a straightforward experience.
User Personas
”I haven't worked out in a while and feel intimidated/ self-conscious about exercising in a gym..”
- Paulin (User research subject)
”I sometimes see people running together at the park. How do I find running partners in my area?”
- Steven (User research subject)
Starting the design
After research it was time to get to the design. Paper wireframes / Digital wireframes / Low-fidelity prototype / Usability studies.
Digital Wireframes
During the initial design phase, I made sure to base screen designs on feedback and findings from the user research, addressing the identified user pain points.
Low-Fidelity Prototype
The low-fidelity prototype connected the primary user flow of exploring the map, selecting the desired workout, consult workout details, and join workout. The prototype was created to be used in a usability study with users.
Usability Studies: Findings
Users need a way to edit or view details on created workouts.
Users need clearer indications on the type of workouts available
The bottom nav bar should be reworked to be clearer as to what the function of each button is, and possibly reduce the number of options on the bar.
I conducted two rounds of usability studies. Findings from the studies helped guide the designs from wireframes to prototype.
Refining the design
Once I gathered insights from user research, I got back to my designs to iterate on earlier versions. Mockups / High-fidelity prototype /Accessibility.
Early designs included an “Info” button on the bottom nav bar, but after the usability studies, I polished the design and replaced that button with a button linking to the “Friends” section to emphasize the social features of the app. Icons and buttons were added to improve the UX.
High-Fidelity Prototype
The final high-fidelity prototype presented cleaner user flows searching workouts on the map. I also met user needs for more cues to easily move from one screen to another.
>
>
The usability study revealed a need to streamline the design of the “workout details” screen to better highlight important information. To do so I reworked the layout and hierarchy of content on the screen. I also used color to draw the attention of the users to the main functions.
Mockups
Accessibility Considerations
Used Icons and buttons – with careful attention to the components colors and height – to make navigation easier.
Used detailed imagery for product displays to help all users better understand the design
Provided access to visually impaired users through adding Alt text to images for screen readers.
Responsive design
Once the design of the mobile app was finalized, I moved on to design a responsive website, adapted to other screen sizes.
The responsive website’s architecture mostly follows the app’s navigation and features, but I added a landing page with information on how to download the app, as it is the easiest and preferred way to use Fitmates.
Mockups
Thank You!
Hope you enjoyed reviewing my work! If you would like to see more or get in touch, fill in the form below and I will get back to you as soon as possible.