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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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:
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.
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."