Comrade: A way to make connections along your fitness journey

CSE 440 Staff
6 min readDec 16, 2021

--

Our Team

Tad Grindeland: User researching, initial sketching, documentation

Aaron Meheret: User researching, initial sketching, documentation

Camden Foucht: User researching, paper prototyping, digital mockup designer

Problem Overview

Exercising with a friend or group of friends has numerous proven benefits. These include things like added motivation, increased likelihood to stick with a routine, the ability to hold each other accountable, and in general more fun. However, for freshman, transfer students, or really anyone new to a university, it can be a very daunting task to find people who share similar workout schedules and interests. There is currently no easy way for students to connect with each other specifically based on their exercise or athletic interests.

Our Solution

In order to combat this problem, we designed Comrade, a smartphone app that allows users to connect with partners and groups to workout with and play sports. With our design, users can create and join groups, connect with like-minded individuals, and schedule workouts and sporting events. Comrade gives users the ability to interact with each other and specify their exercise goals, interests, and availability so that making meaningful and long-lasting connections is effortless.

Initial Prototyping and Usability Testing

Paper prototype

Paper prototype of Comrade for usability testing

Testing Process

Using the paper prototype pictured above, we conducted three usability tests in order to further understand flaws in our current design and to iterate accordingly. We also wanted to gain insight into aspects of the original design that users enjoy. For each of the three user tests, Tad was the facilitator, while Camden acted as the computer and Aaron was the note taker.

The two main tasks that we had participants complete were:

  • Join a basketball group that plays on Wednesdays
  • Find a gym partner that goes to the UW IMA

Results

Based on the usability tests that we conducted, we gathered valuable information that we used to iterate on our prototype and ultimately inform us on how we would later translate this into a digital mockup. Outlined below are three of the biggest changes we made to our prototype based on critical incidents and user feedback during testing.

Matching & Invites

We created a new section in the matching tab that showcases a user’s active and pending invites. When a user requests to join a group, they will be notified of their request to join, and the requests will be displayed in a pending tab until they are approved. Once approved, the member will get a notification, and the group will now be listed in their active list. We also added options for users to leave groups, and manage privacy settings for instant-joins or approval required joins.

Search bar on search page

We added a search bar to the search page for a few reasons. The first is that the label ‘search’ gives users the assumption that searching anything they choose will be an option. Next, we realized that it gives users a lot more flexibility for searching and finding groups/workout partners. We didn’t think about the scenario where a user may want to join a group that they already know the name of. In this case, it is much easier to just search for the name, rather than to have to go looking through existing groups.

Scrollable results page

As an enhancement/modification to our paper prototype, we made the results page scrollable. We believe this is an important modification because it captures a vital user interaction in our design and wasn’t apparent before. It helps us understand our app better and helps us plan for the digital mockup. It also makes our prototype more realistic since we’d hope our results page to be more than just two groups.

Digital Mockup

After compiling our results from usability testing and coming together as a team, we worked to resolve any flaws that we identified and finalize our paper prototype. Based on this design, we began to translate it into a digital mockup. Outlined below is an overview of the final digital mockup and walkthroughs on how it supports our two primary tasks.

Digital Mockup Overview

Task Walkthroughs

Task #1: Create a group to play a specific sport

Mockup Screen

Description

To complete this task, we start from the home screen, and navigate to the groups tab in the middle of the tab bar on the bottom.

This will take us to the groups page, where we will then click on the Create Group option to create our custom group.

Then we submit our desired information for our group, like the name, description, potential search tags, whether or not it’s private or public, and whether or not people can join freely or must request to join.

After that, all that’s left is to click create, and the user is greeted with a success message, whether they can then create an event for their new group or invite members to join it.

Task #2: Find a workout partner that goes to a desired gym

Mockup screen

Description

To complete this task, we start from the home screen, and navigate to the search tab, the second in the bottom tab bar.

We can then navigate to gyms, to find partners for our specific gym in mind.

We are then taken to a list of nearby gyms, and can then click on our desired gym, in this case the IMA.

This will bring up a list of users from that gym and with a preview about the user. From here, we can click on a user to bring up a detailed view of their profile.

The detailed view shows more information about the user, including a short bio. If it seems like they’re a potential gym partner, we can click on ‘Add as Friend’ to become friends.

Assuming the selected user has their privacy settings to allow anyone to add as a friend, a success dialog will popup and allow the user to take further action to interact with their new friend by sending a message or checking their calendar.

Conclusion

We found that many students want to meet new people to workout with and play sports but don’t have any easy ways to do so. That’s why we designed the smartphone app Comrade. We hope that with Comrade’s unique support for user interactions specifically revolving around exercise and athletics, we can help students create long-lasting connections to take their fitness journeys to the next level.

--

--

CSE 440 Staff
CSE 440 Staff

Written by CSE 440 Staff

University of Washington Computer Science, Intro to Human Computer Interaction