Jan 9, 2021
GroupMe Announcements Concept
Creating an announcements feature to help users access important messages
Introduction
GroupMe unites people of all mobile platforms for a fun and social group messaging experience. However, when chats become especially large…pandemonium ensues. In GroupMe, the high influx of messages can make one feel they’re in a scene straight out of Harry Potter:
To help GroupMe users escape this overwhelming feeling, I investigate the following question:
How might GroupMe help users more easily find important messages?
Navigating through a GroupMe chat is tough.
When searching for the root cause of this issue I assumed the following hypothesis:
When people try to find important messages in a GroupMe group chat, they’re often met with frustration due to the difficulty of searching through the high volume of messages.
To verify this assumption, I sought to further understand how others use GroupMe to broadcast and find important messages.
User research — understanding why GroupMe feels so chaotic.
I interviewed 7 different GroupMe users to learn how they used the app, why they used it, and what frustrated them. From these interviews, I found the following three insights:
Key Research Insights
- People dislike the wild and disorganized nature of the group chat.
- People often frustratingly scroll through the chat to find messages.
- People appreciate the fun and social environment GroupMe fosters.
Reflecting on this user research, it seems that in large group chats, an attention-driven “tragedy of the commons” occurs. Members try to share high-priority messages, but they get lost due to getting buried by the incoming messages posted by others. As a result, it becomes exceedingly difficult for the rest of the group chat to access that important message where they need to frustratingly scroll to find a certain message.
People want to stay up to date with their group.
The user research insights confirmed my initial hypothesis but also clarified how messages get lost and what frustrates users.
People Problem
People want to keep track of group logistics, but they have to spend a lot of time scrolling to find important messages.
Market Research — How other products help users stay up to date.
To make users aware of important messages, Slack utilizes different channels while Microsoft Teams has a dedicated announcements feature.
While there is a lot to learn from competitors, considering GroupMe’s fun and social spirit is key when trying to improve access to important messages.
Brainstorming — how might we improve access to important messages?
I recruited my friend Tim Reeves to be my brainstorming buddy. After this exploration, we decided on pursuing the following solution space:
GroupMe Announcements: Making important messages more visually salient and accessible.
For the scope of this concept, we agreed that the announcement creation feature should be limited to group chat owners. Otherwise, the issue of high volume found in regular messages would be replicated.
Creating Announcements in GroupMe
Exploring Different Announcement Interactions
I started out by exploring various interaction mechanisms for announcements in GroupMe.
Determining the Announcement Interaction
Having a separate page for announcements could be useful for viewing previous announcements, but as the main entry point, it had low discoverability. Highlighting an announcement within the group chat is salient in the short term, but runs the same risk as getting buried as other messages. With the modal announcement, the user has clear access to read the message, but by forcing this interaction, it takes away the user’s control — one of the major iOS Human Interface design guidelines.
I moved forward with the Pinned Announcement as the main interaction because of its combination of accessibility and subtlety.
Out of all the different explorations, it struck the right balance between visual salience, access, and flexibility. It’s visible but doesn’t dominate the group chat. In addition, I added a separate announcements page to handle overflow and serve as a central location for all previous announcements.
Initial User Flow for Creating Announcements
Testing the Pinned Announcement
For testing the medium-fidelity prototype, I recruited 5 different participants and asked them to complete the following three tasks:
- Compose an announcement
- View an announcement
- Access previous announcements
Testing Results
During the session, all participants described their frustrations with finding messages in GroupMe providing further validity to the problem being investigated. Testing revealed three areas the prototype needed to improve on
- The entry point for composing announcements needed to better align with users’ mental models.
Most participants failed to find the compose button either thinking it would be in the settings sidebar or within the panel activated by tapping the plus button. This makes sense given Polls and Calendar Events are accessed in a similar fashion.
2. The visual salience of the announcement needed to be improved.
Even though the announcement was pinned to the top and blue in color, it still didn’t command enough attention to be immediately noticed. A possible explanation could be due to the fact that new messages are also highlighted in blue resulting in some potential confusion.
Iterating from Testing: Revising the User Flow
Learning from the test results, I added entry points within the sidebar and plus panel.
Understanding GroupMe’s Visual Design
After analyzing the current GroupMe interface, I generated the following UI Kit to guide my higher fidelity explorations:
Iterating from Testing: Making the Announcement More Distinct
Deliberating Different Visual Design Approaches
When revising the visual design of the announcement, the goal was to have the announcement command enough attention but also not take over the rest of the group chat. Increasing the size and adding a border made the announcement more salient, but was overly distracting and simply didn't fit in with the rest of GroupMe’s design system.
Final Announcement Design
I moved forward by adding a drop shadow and a slightly darker background color. This made the announcement feel as if it were on top of the screen, to invoke the metaphor of a post-it note.
Furthermore, I added a signifier on top of the profile picture to show that the pinned widget is an announcement and different from a regular message. I specifically chose the visual metaphor of a bullhorn since we commonly see speakers using them to make announcements amongst large crowds.
What happens when there are multiple announcements?
To handle the case where multiple announcements are made, I decided to stack them on top of each other to show that there is more than one announcement. When tapping this stack, it expands showing the full set of announcements and gives the user the option to exit the expanded view or dismiss all of the announcements.
Final Interaction for Creating and Viewing Announcements
Final Prototype
This final prototype demonstrates the following process:
- Creating an announcement
- Discovering an announcement
- Dismissing announcements
- Accessing previous announcements.
Reflection
This project helped me understand the subtle yet important differences in the design of text-based messaging apps. Since they cater to different primary audiences, understanding the social context in which group messaging occurs is key to designing new features.
This project presented a unique challenge because it focused on bringing structure to a wildly unstructured atmosphere. With GroupMe Announcements, people can find the important information they need, but still, have fun while they’re at it.
Gone are the days of infinitely scrolling up.
