FitSquad_BeautyShot04

Making remote group workouts fun and easy to organize through an all-in-one mobile app.

Client
FitSquad

Role
UX Designer
(with mentor guidance)

Timeline
3 weeks

Tools Used
Figma, Illustrator

The Challenge

  • Users who want to do remote group workouts currently do not have a single place where they can register for and stream classes.

  • Friends who workout together are organizing sessions solely through messaging apps, which are not optimized for planning and scheduling.

  • Users want to feel a group dynamic even when working out remotely, but might also be embarrassed being seen by others.

  • Inconsistent wifi connections mean that members might experience lag when someone else is sharing a video.

Project Goals

  • Create a platform that allows users to sign up for remote live sessions and organize group workouts with friends.

  • Allow friends to collaborate and take turns setting up group workouts.

  • Design an intuitive video interface for users who want to feel like they are in a class setting, and users who desire privacy.

  • Find a workaround to issues with video and audio lag when sharing videos.

My Approach

  • Let users choose between a variety of live classes led by real instructors and search for on-demand videos from streaming services like YouTube.

  • Create a hub that allows members of a squad to vote on and suggest dates, times, and workout videos.

  • Allow users to adjust their camera share settings with everyone, or with only the instructor.

  • Sync up videos so each member of a group is playing the workout on their own wifi connection and starts at the same time.

FitSquad_BeautyShot01-1

01 Research

Create-Room

Strength in Numbers

Getting motivated to workout can be tough as a solo endeavor. However, research studies show that people who exercise with friends are more likely to complete a workout program and are more likely to increase their duration and intensity. As gyms are closing down and gatherings prohibited due to the coronavirus pandemic, it has become more difficult for people to find the camaraderie they need within physical group settings. And with mental health concerns on the rise, the benefits of regular exercise on the mind and body are more important than ever. 

Different Tools for Booking, Streaming, and Organizing

I did a competitive analysis and found that there is currently no mobile app dedicated to both signing up for group fitness classes and doing remote workouts with friends. Existing apps are geared towards individual exercises. FitOn has "live" classes where you can burn calories alongside others but does not actually have a real instructor correcting form - in essence, it is still an app for on-demand videos. ClassPass includes registration for live sessions with local gyms, but is not geared towards self-organized workouts. Twitch, like Zoom, has strong video streaming functionality, but it is still tied primarily to the gaming community. FitSquad has an opportunity here to bridge the gap between the three: video chat, on-demand videos, and class registration.

GroupWorkOut_CompetitiveSecondaryResearch

Discovering Motivations Behind Group Workouts

I conducted one-on-one interviews with 9 users to better understand their motivations of attending group workouts, frustrations in organizing group workouts, and how they match up against in-person sessions. Results were synthesized using an affinity map to identify commonalities and organize where in the process obstacles lie.

FitSquad_AffinityMap-1
FitSquad_CaseStudyIcons02

Live Sessions vs. On-Demand Videos

My users were split between those who attended live sessions taught by instructors and those who participated in group workouts with friends by sharing on-demand YouTube videos. Both, however, used Zoom so I wanted to focus on optimizing the video chat interface and gearing it towards a fitness-oriented audience.

FitSquad_CaseStudyIcons01

Accountability and Embarrassment Through Screen-Sharing

While participants were motivated by watching their friends workout alongside them on-screen, some were also more shy when it came to live sessions. For users, it was embarrassing to be called out by instructors correcting their form, even though they admit that it is important. My challenge is to mitigate this negative experience while still keeping the classes constructive.

FitSquad_CaseStudyIcons03

Helping Users Find the Right Workout

With remote workouts, many students lack the equipment they would normally have access to at gyms. Moreover, some users wanted an app that can take into account varying fitness levels.

FitSquad_CaseStudyIcons04

Streamlining Registrations, Scheduling, and Attendance

At the moment, there are many ways users have been organizing or signing up for group workouts. Some people have used ClassPass, which allowed them find physical gym locations and sign up for classes. Others communicate with friends using chat apps, sending links and times back and forth. My challenge would be created a simple interface for users to organize group workouts, and allow them to register for and join live sessions on the same app.

Live Fitness Classes: An Ethnographic Field Study

To get a better understanding of how Zoom live sessions work and how students/instructors interact, I signed up for a kickboxing class. I reached out to an instructor a friend recommended, who added me to her mailing list. Every week day, an email would go to my inbox with the Zoom details. The regular class schedule I've only found on the instructor's website. The sessions were free, but students could donate via Venmo or credit card.

  • A Good Instructor Makes All the Difference
    As my user interviews have revealed, the instructor can make or break an experience. Thankfully, my kickboxing instructor was excellent at leading remote classes, quickly greeting students and allowing beginners (like myself!) to let her know if we are new to the sport so she could pay extra attention to us. She gave us a quick rundown of what to expect at the start of class. Throughout the lesson, instead of singling people out for bad form, she would remind us how to do the moves correctly and sprinkle in plenty of "good jobs."

  • Camaraderie Amongst Students
    Most students shared turned on their cameras (though everyone was muted). I could choose between just seeing the instructor on a full-screen view, or seeing other students' screens as well. This workout did not require equipment, but I found that a mat helped and noticed one student using a punching bag. By observing how hard other attendees were pushing themselves, it encouraged me not to give up. At the end of class, my instructor thanked everyone and gave a special shoutout to beginners like myself. Seeing other students applaud gave me a great sense of camaraderie. We were also encouraged to unmute and leave feedback towards the end, and many complimented the music selection.

  • Technicalities
    At the beginning of the workout, there were video lag issues. Fortunately, we were only doing warm-ups and the audio was still clear. The streaming cleared up later during the workout. I did have to Google how to mirror my phone screen to my television, but once I figured it out, it was a single tap on my settings screen. There was no countdown or clock to see how much of the workout was left, though.
EthnographicFieldStudy01-1
EthnographicFieldStudy02

02 Define

Varying Group Workout Activities

I put together personas based on two user behavior patterns I observed from my interviews: those who attend live sessions and those who do on-demand workouts with friends. Sometimes the two personas would overlap, but the process for signing up and organizing each is quite different.

The-Gym-Regular@3x-8-1

Separate Booking + Attending

For remote live sessions, Liza would typically have to register for classes using a service like ClassPass or reaching out directly to her instructor. Then, she would wait for a Zoom link to start class. She wishes there was one platform that can handle both processes.

Cluttered Group Chats + Video Streaming Issues

Raymond currently organizes his remote group workouts with friends using chat apps, suggesting dates and times and sending YouTube links that end up being quite difficult to keep track of. When the group actually starts a video, one person is streaming to the rest of the group, which ends up lagging if being shared through an unstable wifi connection. He would like a better way to organize workouts and for everyone to sync the same video.

The-Encouraging-Friend@3x-8

Visualizing the User Journey

I wanted to map out my user's current experience with attending group workouts. Using a storyboard, I delve into their motivations for joining a class or working out with friends, as well as where in the journey FitSquad can enter to solve their frustrations with organizing or joining a live session.

Establishing Information Architecture

Initially I had divided Live Sessions and On-Demand workouts in my site map, putting them both under the Global navigation as each one targeted a unique persona. As I developed my wireframes, however, I began seeing more commonalities with both these sections - the primary functions here are to look for classes or workouts and they are laid out very similarly. So I unified them into "Find Classes," especially as I had found in my interviews that users who attended live sessions were also interested in trying workouts with friends, as it could be a way for them to catch up. Additionally, I revised the positioning of workout groups following usability tests where participants sought an easier way to access their groups / plans.

FitSquad_SiteMap01-1
FitSquad_SiteMap02-1

03 Ideate

GroupWorkout_Sketches

Exploring Initial Ideas


Referencing the site map, I did some quick sketches of key screens users will be interacting with often (such as the workout calendar, video interface, and searching for a class). With the video interface, I brainstormed solutions for how to perform a variety of functions (muting, screen sharing, setting a timer, view toggling) using limited real estate. I also started thinking about how to lay out information such as video links, dates, times, and attendees for users who want to organize workouts with friends, as this is a more complex process that is currently being done entirely through chat. This gave me a good foundation before jumping into lo-fidelity wireframing and fleshing out the user flow.

Two Primary User Flows

My sketches helped me pinpoint which of my screens involve a more complex user flow. I decided to design solutions for the main tasks for each of my personas. For Liza, that would be finding and registering for a live session. For Raymond, it would be setting up a workout plan for a group of his friends. Though the use cases are unique, they do share space on the workout calendar and will have similar video interfaces. I want people to be able to easily switch between which type of group activity they prefer to do on a particular day.

Wireframing with Testing in Mind

I created lo-fidelity wireframes to test my user flows as early as possible. While I haven't introduced any branding yet, I did want to test and see if my iconography selections were clear to the user so I made sure to include those elements first. I also paid attention to the sizing of typography so I can test for visual hierarchy even before adding in final typefaces and colors. The group workout planning pages include a lot of information (dates, times, links, and voting). I want to see how users would respond to items they can interact with and whether it is actually necessary to include.

FitSquad_LoFiWires01-1

04 Prototype + Testing (Round 1)

Prioritizing Changes

Testing earlier with a lo-fidelity prototype enabled me to resolve larger issues related to user flow and iconography before painting over it with branding.

I ran moderated remote usability tests using Zoom and gathered key common feedback from 5 participants. This was then plotted on a priority matrix based on effort required and user value (determined by how helpful participants found a feature and/or their frequency of using it). Given time constraints, I focused on low-effort, high user value items first. High effort, high user value items were tackled next if the user experience will be significantly negatively impacted. For example, reorganizing Workout Groups required more effort, but because it was an integral part of planning, I wanted to find a solution for that as well even if it meant rearranging my global navigation and combining live session / on-demand searches.

FitSquad_OnDemandPage@3x-8

Reordering the Information Architecture

I combined the "Live Sessions" and "On-Demand" sections into one "Find Workouts," as both were used to browse classes/videos. Users can still easily toggle between the two. Participants were confused by the "Workout Groups" and "Create Room" icons, as they were unsure of which one would add a new group. After establishing the name "FitSquad" for the app, I decided to brand the workout groups as "My Squads." This was moved to the global navigation, as group workout plans had a high frequency of use. Now the "+" icon in the Find Classes section would not be misconstrued as a group-adding function.

Further Simplifying Planning + YouTube Integration

Participants lamented over having to create a new plan each time, so I added the option to set a workout as "recurring." This also matched up with my earlier interviews, where users mentioned that although figuring out workout timing was difficult initially, it eventually becomes a more regular schedule.

I also changed "Recommended" videos to "Synced Playlists" so there is tighter integration with YouTube, where users can pull in a playlist instead of having to search again on FitSquad.

FitSquad_PlanNextWorkout@3x-8
FitSquad_CreateRoom@3x-8

Distinguishing Member + Leader Screens

Previously I designated heart icons for logging votes on member screens. Seeing them again on the leader screen was confusing, and users were not sure if it was for bookmarking. In a later iteration, I removed the heart icons altogether, so there is only a singular button next to each proposed time. On leader screens, it will be labeled "Select" and on member screens it will be labeled "Vote."

Additionally, users were not aware they could select more than one workout. Workout videos from Youtube tend to be shorter, so users can have the option to queue up several. I added language to let users know this is a possibility.

05 Prototype + Testing (Round 2)

After implementing priority changes in my wireframes, I moved to a higher fidelity and incorporated the branded colors and shapes. From presenting these wires to weekly group critique sessions, other students associated the brand with "approachable, gender-neutral, and fun" which confirmed the attributes I wanted to convey. 

Original illustration credit goes to Freepik

ClassDescription

Accounting for Experience and Equipment

From user interviews, I found out that one of the user's pain points is finding workouts that match their fitness level. Also, they don't necessarily have all the equipment at home that they would otherwise in-person. I included this information in the class descriptions so they can also filter by these parameters.

Bringing People Together

Currently, users are organizing workouts using different chat services like texting, WhatsApp, or Facebook Messenger. With FitSquad, they can gather friends from a variety of contact methods and invite them for group exercising.

CreateSquad-1
Cast01

Easily Cast to a Larger Screen

Organizing workouts using a mobile phone is easy using FitSquad, but during interviews, users stated that they would need a larger screen in order to view and  follow along to workouts. Now users can quickly mirror or cast their screen to a laptop or TV with a single tap of the cast icon.

Member Voting and Video Syncing

Users from my interviews stated that they usually take turns choosing workouts. With FitSquad, they can swap leaders at any time, and members can vote on which dates and times work best for them. They can also add video URLs directly from streaming sites like YouTube, which will be synced up on individual devices when the session begins. Users were concerned about video and audio lag, so this will circumvent reliance on the leader's screen sharing and Internet connection.

PlanWorkout
Calendar

Planning Ahead

Usability testing shows that users want to see their upcoming workouts using FitSquad's in-app calendar, and sync to their native phone calendar to get a better idea of how their entire day looks.

Camera Privacy Settings

Being called out for bad form in front of other students is embarrassing for some of my shyer users, especially in a remote setting where the camera is pointed directly at them. To make workouts a little less awkward, they can change camera settings directly on the video interface.  There is an option where the instructor is the only person who can see them and can still provide feedback.

FitSquad_VideoControls
FitSquad_RainbowSpreadsheet

High-Fidelity Testing

I tested the high fidelity prototype with 4 participants, who viewed the color palette and rounded shapes favorably. They described the look and feel as "clean, modern, and simple." There also wasn't any confusion regarding the use of both photography and illustrations, as users understood photos to be provided by vendors to communicate the vibe of a class. Illustrations were more for general purpose, such as categories, sign in pages, and headers.
 
I also received feedback on what users are expecting to see in the Dashboard, so that would be tested in the next iteration. All data was gathered in a rainbow spreadsheet, with each piece of feedback assigned the same value. In this way, I was able to sort the highest priority changes based on the value sum.

06 Iterate

Designing the Dashboard

I conducted a quick Desirability Test of four designs for the Dashboard. From my prior usability test, users stated they expected to see Upcoming Classes, Instructors I Follow, and Saved Workouts. During user interviews, users also talked about sharing progress photos as extra accountability when working out with friends. I included all of these in the Dashboard and tested to see which pieces of information ranked higher in importance. Results from 14 participants actually came back split fairly evenly between options 2, 3, and 4. They did make a note of which aspects of each design were most important, however:

  • Calories burned during the week is nice to know, but does not need to be highlighted too much. The purple box behind it makes it appear as a button.

  • Users preferred the condensed view of Instructors and Friends, as that is information that they will access less often than Bookmarks or Progress Photos. It also mirrors Instagram's following/followers UI pattern that they are more familiar with.

  • In my final design, I included a second workout to account for edge cases where users might have more than one a day. Users did leave feedback overwhelming favoring seeing just today's workout, as opposed to viewing all of them at once in option 1.
DesirabilityTestResults@2x-8
FitSquad_DashboardDesigns@2x-8

Delivering on Brand Attributes

FitSquad's brand can be described as fun, approachable, and gender-neutral. In designing the logo and UI Kit, I kept these attributes in mind. Most of the app utilizes more muted colors like dark indigo, white, and pale blue so class photography can stand out. Friendly illustrations were used for more general areas, such as category browsing and the sign in page, carrying the brand through in its color palette along with a light, rounded typeface. The app is targeted towards users who are after the fun, social aspect of group workouts so I wanted to stay away from using too many dark colors that feel more serious and keep the shapes rounded.

Deciding on a Name

When brainstorming ideas on what to name this fitness app, I wanted it to sound casual, fun, and highlight the group and/or remote aspects of it. I took the following options and polled 30 people with a brief description of the app. FitSquad won the majority of votes, but GroupFlex and StayInStrong came in close. Generally, people favored more neutral-sounding names that appeal to a wider demographic instead of ones like "SwoleGoals" or "GroupSesh."

  • FitSquad
  • Witness the Fitness
  • TeamFit
  • SwoleGoals
  • ShredTogether
  • SquadBod
  • StrongerBuddy
  • ClubStrong
  • GroupFlex
  • GroupSesh
  • GymRatPack
  • Workout Party
  • WorkInOut
  • StayIn Strong
FitSquad_UIKit

Learnings & Next Steps

  • Testing with Fewer Variations

    I received some pretty mixed feedback from my desirability tests, as the results were split quite evenly. In the future, I would create better controls for my tests so users can focus on one design aspect at a time (for example, displaying or hiding followers will be one test, and different calendar views will be a separate test).

     

  • Not Reinventing the Wheel

    I wanted to optimize my video interface for fitness users specifically. But I learned through testing that introducing new controls, while it may have more targeted functionality, might be confusing for users who are not familiar with the iconography. In fact, staying consistent with Zoom controls allowed for greater learnability.


  • Instructor View

    In the next round of designs, I would interview some fitness instructors to get a better understanding of how they like to run their classes, and what types of controls would be helpful for their video interface. From my ethnographic field study, my instructor had also asked for feedback, so this could be part of the instructor dashboard as well.