FitFriends
My Role: UX/UI Design, User Research, Visual Design
Duration: 8 Weeks
Tools Used: Figma, Miro
Overview
Problem
People who use fitness apps from home would like a way to exercise with friends because they enjoy the social interaction as well as the motivation and accountability, they give to each other.
Solution
I created FitFriends as an in-app video calling fitness application. Subscribers will be able to video chat with their friends while completing a workout together. Since the start of the pandemic, local gyms have been shut down and many people have taken their workouts to their homes. While challenging enough to change fitness routines, people were no longer able to exercise with their workout buddy, which is a prime motivator for some to continue working out. This application aspires to allow people to exercise alongside their friends despite their location.
Discover
Before starting any interviews, I decided to brainstorm what this app might entail; what kind of fitness app it would be, and who it would cater to?
In order to do this, I made a list of “how might we’s” and placed them where they might fall into a customer map.
“Can we provide a sense of togetherness using this app?”
User Research
I began the research phase by conducting user interviews to better understand how exercise habits have changed due to the pandemic, as well as how people felt about using digital products to remain connected with friends and family.
What I found
Pandemic Influence
There were mixed results in terms of how the pandemic affected people’s workout habits. Some people now exercise less than before the pandemic, while others are working out more than ever before.
Emotional Pain Points
Most people reported they did not feel comfortable going to the gym anymore due to Covid-19. They miss their old workout routines and do not feel like they are getting the same results.
Social Interaction
Exercisers felt that working out with a friend would help build accountability and that it would help motivate them to workout harder, because someone is pushing them to do better.
Top Feature Influence
The top feature people felt was most important in a fitness app was the ability to connect the app to a personal playlist or the ability to sync with Spotify. They felt that music was a large contributor to their workout success.
When I finished conducting user interviews, I separated my notes into themes, which lead me to organize my thoughts in an affinity map.
Interview Notes
Common themes and affinity map
Empathy Map & User Personas
After gathering information from interviews, I created an empathy map to sort out the thoughts and feelings of my users.
I also created user personas to focus on my target audience for this app.
MVP Prioritization
The next part of the process I created an MVP Prioritization Matrix. This was important to me to view how this app would come to life from a business standpoint as far as, which features were most important for the app, and from the user perspective.
Top 3 Most Important Features
Workout with video chat screen
Playlist option to connect to Spotify
Tracking and Progress screen
Competitive Analysis
Since fitness apps and related technology are in high demand, I created a competitive analysis to compare popular apps with each other. I wanted to incorporate ideas that I thought would complement FitFriends and make it easier to use amongst friends and family.
I compared aspects from the following apps and programs:
STEEZY Studio
All Out Studio
Nike Training Club
In addition, I wrote up a Heuristic Analysis to learn other ways of enhancing the UI in my designs.
UI Competitive Analysis
Heuristic Analysis
Design
Before moving on to the designs, I sketched out some ideas I had in mind. I looked for inspiration in my competitive analysis and tried to incorporate what I learned from my user interviews.
I also created a site map in order to make sure my designs had the required sections for calling a friend and doing a workout together.
Site Map
Wireframes
Once I had a better idea of the information architecture, I went on to create wireframes to see how a user might start to interact with the app.
Visual Design
Before moving on to high-fidelity designs, I created a color palette to base my designs on. I chose the color Purple as the primary color because it emanates a fun and friendly environment, and I wanted this app to be inviting towards users with their friends.
Color Palette
High-Fidelity Mockups
After creating wireframes, I went on to design high - fidelity mockups.
When it came to these designs, the call feature was my primary goal while the fitness app was secondary. I wanted the app to be similar to screen sharing, where friends can scroll through the app and discover workouts together.
Iterations
Call Button
When designing this app, I went through a series of iterations. The placement of the Call Button was the priority. It needed to be in a location for people to access right away and it needed to be large enough with added texture, so users could decipher the significance of the button.
Tap to Minimize
A question that came up was, How Can We continue conversation without video? Adding a minimize button allows users to remove the video aspect and transfer over to voice call. This way, users can continue to to chat and explore the app without being on camera.
Landscape View
Landscape view was another important screen since it enlarges the video, which makes for better viewing. I decided to add smaller screens of each friend on the side, so they can see each other while working out. Having the ability to view each other while watching the workout video adds to the social connection that I was aiming for.
Dark Mode
In addition, I made a dark mode option for those that prefer dark to light colors. The darker colors bring out a more intense feel as well as provide less eye strain.
Final Product
After some consideration, I decided to keep the lighter tones as the default colors. I felt that it set a more inviting and friendly tone, which will encourage more users to workout from home, stay connected, and accountable with their friends.
