Fitness Bud
UI/UX Design and App Development
Embedded Files
Overview
This is one of the final projects that I created during my last semester at OCAD University. I also created a promotional responsive website after I completed building the app.
The purpose of this project was to find a solution to encourage staying fit during the COVID-19 pandemic.
My Contributions
Handled the entire project alone from research to conception, visualization and, testing.
Tools used: Adobe XD, Adobe Illustrator, Flutter, Firebase
Timeline: 4 months
Purpose
"Since the COVID-19 crisis started and people are confined to self-isolation in their homes they started being lazier and more glued to their screens all day with work-from-home enforced. Hence, there was physical activity being done"
The Challenge
Create a proficience-focused app experience to motivate athletes who use to work out at gyms to stay fit. This app should also promote working out to other individuals who are stuck at home and are slowly becoming lazier as they are stuck working from home all day/night.
The Problem
To prevent the spread of COVID-19, people started to work from home with minimal human interactions and all social activities were closed. So I conducted some online research on the problems of people being isolated. I also did a couple of short interviews to get a better perspective about their physical and mental health in their isolation.
Through these research methods, I found out that many people are becoming lazier as they are not motivated to work out anymore and they are not having any social interactions with their friends and families. As a result, many of them started being potato couches but in front of their work laptop.
User Persona
From the primary and secondary research, I built 3 personas from different generations who will be using the app and have different goals.
Affinity Diagram
To brainstorm some ideas, I grouped some key points based on our research to come up with a design guideline. This would also outline the key features needed for the app.
Since the diagram pointed out that the app needs to show friends, motivate the individual to work out, and personalize their workouts. I decided to add the following main features:
Leaderboard (with points system)
Synchronized workout
See buddies online
Ask a buddy to join work out
Edit workout session (timer, reps, exercise)
User Flow Diagram
This diagram was useful to understand how the features are linked together. It helped me visualize how a user would flow through the app which takes them from their entry point to their final action. The user flow below shows the basic function of a user asking a buddy or a workout and what happens afterward.
Wireframes
Low Fidelity wireframe assets from Hand-drawn UI Kit by Impekable
Visual Design
Since the main function of the app is to promote working out, the overall design(style guide) had to follow a sports theme to give users a sense of fun and action appearance. The chosen color theme and typography helps to make the app more engaging and exciting.
When it came to designing the logo, it had to emphasize on the buddy experience. So, below you will find rough sketches of some logo ideas with the final result
Solution
1. Starting an individual workout
GOAL: User wants to do a workout during their free time
2. Encouraging buddy to workout
GOAL: User wants to do a workout with one of their friends and to climb the leadership board.
Prototype
With the help of Flutter and dart language, I tried developing the app for Android and iOS. During this process, I learned to put myself as a developer and understood how the whole process works. Below you will find a video of my app that will demonstrate all of its features and how the function.
Final Thoughts
After I completed the design and development of the app, I definitely learned a lot throughout the process. It wasn't an easy project to design and develop at the same time as the designing process by itself can take a long time especially if I would follow a human-centred approach and needless to say how much time I spent on the development side.
All in all, this project allowed me to think like a developer and learn the importance of the UX flow and that every little detail in a screen is important such as a simple animation or settings page.
Google Sites
Report abuse