Fitsio - Social Fitness App
An end-to-end application that helps users find a virtual fitness community that helps them find a group to do challenges with and keep them motivated in their own fitness goals.
My Role
User Research, Persona, User Flows, Task Flows, Wireframing, Prototyping, Usability Testing, Branding, and UI Design
UX Designer
Team
Individual Project
Timeline
June - July 2023
Problem Statement
People try to learn from their online friends who post their fitness routines, but a lot of times, they don’t show or tell you how to do the exercises properly and there is no place to get directly involved to stay accountable. This leaves people feeling lonely, looking for community and confused.
Project Goals
Help users that are looking for ways to push themselves in their workouts find a community that motivates them to push themselves harder in their workouts.
Help users customize their own personal feeds on their personal account to maximize the information they receive on their feed.
Project Process
Getting to Know the User
Data Analysis
Starting the Design
User Testing
Refining Design
Final Results
Getting to Know the User
The feedback received through research & interviews revealed that users that want a social fitness application have a hard time finding applications that are the right combination of social media & fitness. Users want a healthy balance between the social media aspect and fitness/exercise aspect of an app.
Demographics of Fitness App Users
Gender Demographics
Age Demographics
Importance of Team & Community in Virtual Fitness
Virtual workout team participation being positively associated with virtual workout satisfaction.
Virtual workout team participation was also found to be positively associated with compliance with virtual workout team norms. Team members can assist each other to accomplish goals, provided that there is shared effort by all members of the team. It reveals that teamwork reduces an individual’s effort or increases benefits; it motivates individuals to comply with the team norms.
Results found that virtual workout team identification is positively associated with commitment to the team.
Virtual workout satisfaction is found to be positively associated with commitment to the virtual workout team.
Results revealed that commitment to virtual workout team norms is positively associated with post-pandemic team virtual workout intention.
Personas
Data Analysis
Through secondary research, interviews, surveys and competitor analysis, the many data points emerged for what areas of focus the users need designed. After the analysis of all of the data, the “how might we” questions emerged and the major focuses landed on group motivation/competition and the need for customization and personalization of profiles.
Interview & Survey Results
Need Motivation & Encouragement from Group
Getting workout ideas from others is very important in an online fitness community
Group challenges with community can be a great motivator for workout consistency
Customization/Personalization is a MUST
Customization for different fitness needs is important
Customization of “media feed” is important for users that have specific goals or needs (i.e. users with eating disorders, illnesses, etc.)
Even advanced fitness enthusiasts like pre-made workouts with proper instruction on how to properly perform exercises (tutorials)
Proper Education of Exercises
User Pain Points
Too much focus on “social media” on apps and not enough focus on the fitness and exercise. There needs to be a better blend of both.
Pain Point 01
In the feeds that users experience, there is a mix of everything together with limited ability to filter information they want to see.
Pain Point 02
Even if you join a challenge, there is not a way to really check in and compete with others to help keep users accountable.
Pain Point 03
Competitor Analysis
After analyzing the three competitors, CoreCircle seemed to have most of the features that users were looking for in a social fitness app. The biggest issue with the app was how the features were implemented and if they were as effective as users wanted them to be.
Strava & Nike Running Club, however, did a wonderful job fostering community, creating interesting challenges, and getting users to interact with one another.
How Might We Questions
Once all of the data was looked at and the users needs were realized, two “How might we…” questions emerged to help address the problems that we needed to design for.
help users that are looking for ways to push themselves in their workouts find a community that motivates them to push themselves harder in their workouts?
How might we…
help users customize their own personal feeds on their workout community apps to maximize the information they receive on their feed?
How might we…
Starting the Design
After gathering all of the research and studying competitors, I started off the design process with establishing the features that were needed in the app and then created a site structure using Sitemaps & Design Flows. Once the basic structure of the site was established, I dove into the design of the app.
Feature Roadmap
Before diving into the site structure, I established the features that were most important to achieve the project goals, according to the data.
Site Map
User Flows
Onboarding User Flow
Starting Challenge User Flow
Low-Fidelity Wireframes
Onboarding & Personalizing Account
User Media Feed & Challenge
High-Fidelity Prototype
Onboarding
Personalize Account
Workout & Ranking Board
Personal Feed & Challenge Sign Up
Branding & Logo
For the Fitsio App, I decided to use the colors of yellow and navy blue. Yellow symbolizes optimism, energy, joy, happiness and friendship, while navy blue represents trust and stability. With the purpose of this app being a social app that cultivates comradery and motivation for users, I found it to be a suitably symbolic combination of colors that paired well with simple imagery of working out together, represented in the logo.
I kept the color, typefaces, and styles simple to ensure simplicity and ease of navigation. The biggest stylistic differences come into play when distinguishing the start up process versus the main application interface.
User Testing
Usability testing was used to test the efficacy of the design and what improvements need to be made to increase the quality of the user experience and address user pain points.
Usability Study Parameters
Study
Moderated Usability Study
Location
Seattle, WA & Remote Testing
3 Participants
Participants
Length
Avg. 15 minutes
Ease of Navigation
Rate of Errors
Failure/Success Rate
Success Metrics
Sign Up for the Fitsio app and personalize your account
Find the “Back Strength Challenge” in your feed and join it
Work your way through Day 1 of the challenge and see your ranking on the scoreboard
Tasks
Usability Test Findings
Adjust the language of the “Experience Level” page & Workout Page(s) to make information clearer
Adjust Language
Add “Skip” Option & “Back” Buttons
Add an option for users to skip profile set up for users that want to test the app first & add “Back” Buttons
Too much content at once. Simplify to make it more easy to see and access
Simplify Home Screen
Add Challenge scores as an option to opt in/out of in the profile set up
Add Personalization Option
Refining Design
Usability Testing was extremely useful and eye-opening. Through the commentary and testing of the users, I was able to make overall improvements to the website, as well as make useful tweaks to specific parts of the task flows.
Design Developments
Add “Skip” Option to Profile Setup
Add “Back” Buttons
Simplify Home Screen
UI Improvements
Consistency of Buttons
Add a “Progress Bar” to Sign Up Process
Gamify Workout Completion & the Score Board
Final Results
Onboarding & Personalization
Users made a point, during the interviews and surveys, to express frustration with apps that do not allow for personalization of content, especially those with specific needs or are not interested in wasting time with information that they are not interested in.
To help minimize wasted time, personalization of the user’s account was added after the initial sign-up process.
User Feed & Finding a Challenge
The personal feed on the app kills two birds with one stone. The user’s personal interests are shown on the feed, based on their topics of interest. They are also able to specify interests further with the use of a filter.
The feed also helps users get motivated to join challenges with friends who have already joined and try something new with their community of friends.
Challenge & Ranking Board
Fitness challenges have pre-made workouts with instructions, if the user needs them, and ends with the user’s ranking in comparison to their friends who also competed in the challenge.
The competition within the challenge helps bolster competition and motivates the user to push themselves harder than they would alone.
Lessons Learned
This case study was a challenge because of the amount of forethought and planning involved with designing an end-to-end application. There were many more interactions that I ended up designing and a lot of alterations in the end, to improve the design and functionality, but it was worth the challenge and ended up being a tremendous growing opportunity for me.
Next Steps
More Gamification of Challenges
It would be very helpful to find a way to add more of a gamification quality to the Fitsio App, to help the users find the experience more enjoyable and fun.
Research has shown that group activities do wonders for motivation, both in the realms of being consistent & helping participants push themselves harder. Adding more ways to add a group setting would help users to reach their goals more successfully.
Add more Group Activities
Wow! Thanks for making it until the end!
Roadie Rendezvous
Road Tripping Planning & Budgeting Website
Autobooks PDF Upload
Added OCR PDF Uploaded Feature
Pianese
Piano Learning App