— PROJECT NAME
FitGal Pal App Concept
— ROLE
UI Designer
— DATE
May 2023
As I worked on improving my UI design skills, I was inspired to design an app that combined my passion for both fitness and UI design. I came up with the concept for an app that would empower women to easily locate and engage in fitness classes in their area.
I crafted a user-friendly interface that prioritizes simplicity and efficiency. With my app, women can effortlessly search for classes based on their preferred location, workout type, and schedule. Whether it’s yoga, pilates, strength training, or dance, the app offers a wide range of options to cater to diverse fitness preferences.
User Personas
User 1 – Simona
Simona is a university student in a new city. She likes to keep active, but being somewhere new means she doesn’t know anyone. She’s been having trouble finding people to take fitness classes with.
User 2 – Kristy
Kristy is a working professional who’s looking for more friends in her area, especially those who are interested in fitness activities. She needs a way to find classes and friends.
Big Picture Storyboard
In order to empathize with my users and understand their needs better, I focused on Kristy to create a big picture storyboard that features her searching for fitness classes in her area, having no idea who to share them with and then getting frustrated when things became too disorganized and overwhelming.
Paper Wireframes
To get started on this UI design project, I started by drawing out some paper wireframes. I focused on the search function and class details screens.
Digital Mockups
Because the main focus for this project was to practice my UI design skills, I wanted to challenge myself and attempt something I hadn’t tried before, which was creating both light and dark mode designs. I also wanted to include things like map views and pop ups to get experience designing different features.
Light Theme
For the light theme, I stuck with vivid, lighter pinks and oranges for highlights while keeping backgrounds and cards white or close to white.
Dark Theme
For the dark theme, I used more rich colours for highlights while using lighter colours for fonts. I also had to alter the graphics a bit so they stood out better on the dark background.
Light Theme High-Fidelity Designs
Dark Theme High-Fidelity Designs
Design System
I created a small design system to refer to while I created my designs for the FitGal Pal app. As I continue to work on the project, I’ll expand on the design system.
Going Forward
Testing – While the focus for this project was to create something visually appealing, it hasn't been tested as of yet for it's usability or accessibility. As a next step for this project, I plan to prototype the app and get feedback from the target audience on what's working for them and where things need improvement.
Responsive Web Design – Having a responsive web app for this product would allow users who prefer their desktop for browsing and booking fitness classes to have that as an option. I would also get the experience of designing a web app.
More Features – When I started designing this app, the idea was to include a function where users can swipe and match with other users who have the same fitness interests. This would help those users who are concerned about going to new classes by themselves. I plan to make some changes after testing to include this feature.
