Jan 4, 2021
Mingle Hall
Designing a charades-based mobile app to help students meet during the pandemic
Introduction
In light of the pandemic, all students were impacted by the isolating effects of social distancing. However, we noticed that freshman students were especially vulnerable. Due to the lack of social opportunities, they’re unable to build a network of peers and study partners. In turn, they’re more likely to experience loneliness and feel overwhelmed with their schoolwork.
To answer this need, I along with a team of 3 other students created Mingle Hall, a mobile app that fosters social connection by playing games of charades. We focused on the following design question:
How can we replicate the informal communication provided by in-person lectures so that students can find study partners suited for them?
So what’s missing in Zoom University?
We wanted to understand the barriers behind forming connections in online lectures and interviewed 4 different college students:
Research Insights
- All participants expressed a desire to meet more people, and couldn’t do so through Zoom lectures.
2. Participants would use social media to learn more about their peers and reach out to schedule meetups
3. Participants rely on study partners and groups to learn and reinforce their understanding of conceptually challenging materials.
4. Of the few connections made, there is often a mismatch between skill level, attitudes, objectives, and schedules
5. Some participants will seek out others and try to form groups while others are more introverted and would rather tag along.
Refining the People Problem
At first, we thought students wanted more social interaction in general. However, our research illustrated a deeper finding:
During COVID-19, students not only want to meet more people, they wanted to find others they’d specifically get along with.
Persona
To aggregate all the information from user research, we created the following persona:
Design
Affinity Diagramming and Brainstorming
Choosing our main design solution.
After our brainstorming session, we settled on creating a mobile app that syncs to Zoom lectures where students can play games of charades with each other in groups. After, students can reach out to each other via in-app messaging. The main scenario would go as follows:
Main Scenario
- During the second half of the first lecture of a course, the professor will instruct students to open our app, framing it as a social opportunity to meet other students in the course.
- Within the app, students build a quick profile by entering basic information like names, emails, and phone numbers. The app then organizes students into teams where they will compete in a virtual game of charades.
- Students will play the game 4 times in a different team each time.
- Within the app’s game history, students can use the scores from different games to determine who they worked with best.
- Students can then directly message each other and/or form group chats.
Rationale
We agreed that this concept solves our core design problem of connecting with classmates and finding study partners:
- Students get to informally meet each other and break the ice.
- Students get a wide range of exposure to others by playing so many different games
- Matching occurs in a natural context through actual social interaction.
- The app also serves as a central hub to find classmates and message them.
Storyboarding and Initial Sketches
Paper Prototyping and Low Fidelity Testing Insights
Paper Prototyping Observations and Feedback
- Participants liked the idea of using a game to meet people.
- Some participants used game history scores to determine who they wanted to contact while others were confused. Overall, they would prefer more personality-based information to find compatible partners.
- Some participants were worried about their privacy, fearing they’d get messages from people they didn’t know or didn’t want to work with.
Shaping the Medium Fidelity
Themes
energetic, friendly, and social
Color
We used a bright blue-green color with orange accents to serve as the main color palette. Since these colors are bright and noticeable, we opted for a mainly black and white UI for the remainder of the design to provide balance as well as to follow the recommendations from the Material and iOS design guidelines.
Typography
We chose the font “Noto-Sans” to serve as the main font for the interface since it helps foster an energetic and friendly atmosphere while still maintaining legibility.
Medium-Fidelity Interaction Design Decisions
1. A more detailed profile section where users can add personal attributes, class information workstyle preferences, and fun facts. These attributes would then be added to the game history list-view.
2. A star rating interaction at the end of the game where users can rate their enjoyment of the recently completed game. This information would also be accessible within the game history to help users find others from past games they enjoyed.
3. An “Add Contacts” feature that is prompted at the end of the game and accessible within a user profile. Message access is allowed once a contact request has been accepted. Given this is a new type of interaction, we made sure to add plus-icon signifiers so that the affordance is more perceptible
4. Bottom navigation for easy mobile access
5. Choosing list view for the Game History for sifting through large amounts of information
Conducting Usability Testing
Observations and Feedback:
- Some participants weren’t able to gauge the rules of charades
- The Star Rankings system was confusing and raised privacy concerns as to whom the ratings could be seen by
- The Game History wasn’t seen as a resource to find others
- The profile message button lacked discoverability
Iterating from Participant Feedback
1. Enhancing the learnability of the game
Some participants were new to charades or didn’t fully understand the rules before playing. To solve this, we added a dedicated rules page that is prompted before playing the game and is accessible within the game screen itself
2. Removing and replacing the Star Rankings system
Several participants didn’t understand what the star rankings meant and were worried that other players or game developers could see the ranking. We decided that a better approach to show one’s enjoyment of a game is to display the number of contacts made within a round.
3. Improving the discoverability of the Game History screen
We found that several participants didn’t initially navigate to Game History when trying to find other students. To increase exposure to this page, after completing a game and adding a contact, the interaction ends on this page.
4. Improving the visibility of the message button within profiles
Participants initially couldn’t find the message button when viewing a profile. To solve this issue, we increased the length of the message button and added a label to act as a visual signifier.
Final Flow for Mingle Hall
Final Prototype Demonstrations
Join a Game and Add Contacts:
View Game History and Find Potential Study Partners:
Join a Game and Add Contacts:
Reflection
Social isolation can have drastic negative impacts on one’s mental health. New college students already have a difficult time coping with loneliness, finding friends, and study partners. The pandemic only further exacerbated these difficulties.
This project was a compelling challenge for us because we needed to solve how to replicate the informal communication that occurs between students during in-person lectures. It would have been easy to immediately latch onto ideas such as Tinder for Study Partners or Hinge for Freshman. However, we aimed to create a social opportunity that was inclusive to all.
We hope that through Mingle Hall, new students will have the opportunity to meet each other, create friendships, and have a positive college experience.
