Tagfit is a social fitness app that allows users to create exercise challenges and tag their friends to compete.
My design challenge was to create an app to help people who lack the motivation to exercise and stay active in a fun and social way.
I conducted research and created the product's design. I also developed the UX and UI design aspects through desk research, user interviews, sketching, wire-framing, prototyping, and usability tests.
Project was completed in 240 hours, with in a span of 3 months.
I started desk research to find out why people do not exercise. Lack of motivation is the main reason why people do not engage in physical activity. The study also showed that lack of motivation comes in many sub-factors: bad time management, lack of confidence, gym is too busy, no child care, other obligation, does not enjoy it, and rather do something else.
Based on the data I found from my research, I came up with the following potential user profile.
I created a survey and conducted one-on-one interviews to understand goals and pain points when exercising. Time management was the number one reason they did not get the recommended amount of exercise. All participants mentioned how work or family life took priority and would instead do something else in their spare time. Participants mentioned they enjoy exercising in a social setting, whether with an individual friend or a fitness group.
"They can cheer you on, or you can cheer them on. It helps motivate you"...actual quote from a participant.
Social settings create an environment where they can keep each other accountable by motivating each other and bringing out competitiveness in even the most novice person.
After reviewing my interview notes and transcripts, my initial thoughts were that I wanted to create an affinity map of all the participant’s themes individually. I checked the notes and transcript of each individual’s interviews, highlighted essential quotes, and noticed a pattern in what they mentioned. I then separated these quotes, divided them into groups, and matched them accordingly.
I created two user personas from the information I collected from my interviews. The “motivated” persona is a former athlete who used to exercise most days of the week, married with kids, has a highly stressful job, and does not currently have time to exercise. The “passive” persona is generally not interested in exercise but enjoy the social benefits of being active. They also have a hard time exercising due to work and social obligations.
Ryan is a former athlete who used to exercise most days of the week.
Fitness goals
Pain points
Nancy is generally not interested in working out but does enjoy the social benefits.
Fitness goals
Pain points
Motivated vs Passive
Though these two personas have different lifestyles, their pain points, goals, and motivations are similar.
Based on the learnings from the interviews, I want to create an app where users can create personalized fitness challenges and tag their friends to compete with a given deadline, all while keeping them motivated to achieve their fitness goals.
I mapped out user stories and paths for each user persona as a guideline. Afterwards, I used the user stories to analyze which features were necessary for the app and made a list of the MVP.
"I had a friend that was training me that helped me stay motivated" ...Quote from an actual participant.
I came up with the user flow for each persona profile based on their goals and past exercise experiences. In brainstorming the different scenarios people experience when exercising, I found a way to visualize what functions and paths the users will take when performing specific tasks. This also informed me that the users would take a certain road map depending on each scenario.
I created a site map of my app’s content and pages using the user stories and MVP.
When sketching each frame, each element needed to have a precise task to ease the user’s overall experience while maintaining the motivating and fun experience I aimed to achieve.
I created a prototype with my sketches using the Marvel Prototyping App. I conducted a gorilla usability test with five participants. I gained valuable insights and learned some areas were confusing and re-sketched to prevent a bad user experience.
With the issues I found on my Gorilla Usability test, I fixed the problems and moved on to create low-fidelity wire-frames using Figma. From there, wire flows were created for three red routes scenarios.
I created a mood board to show the brand’s attributes which are motivating, fun, and social. The photos display friends motivating each other to live healthier lifestyles while keeping each other accountable. It also portrays that anyone, no matter what level of current physical fitness, age, or gender, can join Tagfit. The colors shown were picked to portray energy. The primary color chosen is sapphire which means openness and peace.
High-fidelity wireframes were created using Figma. I began with wire-framing all the red routes with my user personas in mind. Utilizing the user stories as guidelines, I completed wire-framing and created a prototype.
Users are introduced to the splash screen when first visiting. They are then directed to the sign-up / log-in screen.
New users signing up for the first time will be prompted to answer three quick questions regarding their fitness interests and level.
The home screen shows the user's fitness challenges based on who they follow, fitness level, interest, and location. If users decide to accept a challenge, a window will pop up asking for permission to access the mobile camera and send notifications regarding the challenge.
After completing the challenge, they can challenge other users to compete or post it as private to keep a record of their accomplishments.
If they decide to tag or challenge other users or friends, they can set a new challenge deadline to be completed at the given time.
For those posting or completing their first fitness challenge, a success screen will pop up congratulating them for their accomplishments, and the user will be redirected to their home screen.
I conducted usability tests with 5 participants to ensure the app was easy to use and established tasks and objectives. Tests were moderated and done remotely over video calls due to the Covid-19 pandemic. Participants were asked to complete a series of tasks and then asked questions to evaluate the app.
Participants revealed that they had difficulty finding other users' profiles. I also observed a major issue in theorder in which participants wrote a caption and tag their friends while posting a challenge. I redesigned solutions and conducted another series of tests using five different participants to ensure my solutions helped resolved the issues.
“View Profile” text was added under profile name so users could find their friends profiles easier.
I observed a major issue in the order in which they wrote a caption and tag friends while posting a challenge took too many steps. I added all the options on one page to reduce the number of steps needed.
After the redesign, I conducted a second round of tests with five new participants. The tests showed no issues. All the participants loved the app and its simple design. They found the option to accept or send fitness challenges to their friends fun and motivational.
"The ability to post any fitness challenge I want is golden"...Quote from an actual participant.
Participants also enjoyed the challenge deadline because it gave them a sense of urgency and accountability. They also revealed that they felt they were in control of what challenges they accepted and created, unlike other fitness apps, which are based on one specific exercise or workout.
