GroupMe Case Study: A Fresh Experience
Utilizing Adobe XD and Figma | Individual Case Study | Skills: User Research, Wireframing, Prototyping
General Overview
GroupMe is a group messaging app, currently owned by Microsoft, which gives millions of people the ability to send group text messages. It doesn’t matter if different users have different types of phones; all users can communicate with others in one place with this application. People who utilize GroupMe tend to use it for productivity such as school, clubs, sports, work, and much more. GroupMe is a very established product that helps consumers achieve the goal of sending group messages, however, there are some situations that arise in which users may not able to use the app to its fullest potential leading to an unfulfilled user experience.
The Problem
GroupMe, which is currently ranked #21 in social media on the Apple app store, is definitely one of the most popular group messaging apps on the market. To take the app to the next level, GroupMe can definitely make some big improvements. The biggest issue that I have identified is a lack of features built in to the app, as well as a design that is in desperate need of renovation. There are scenarios in which users want to perform different tasks in the app but aren’t able to because of a lack of features. Because of this, users might find frustration in GroupMe and look towards other apps. As a whole, GroupMe needs to take a step towards a more modernized product.
User Research
Discussion/Interview Findings
To begin my research process, I created a discussion guide to delve into the GroupMe experience. I specifically wanted to focus on the interviewee’s environment and how GroupMe catered to them and their needs. Here are some of the questions I asked along with some of the answers I got:
What do you like/not like about GroupMe?
“I like how simple it is. I was able to learn how to use it very easily. I think it could use some more features that others apps have though” -Interviewee 1
“Its pretty easy to navigate through and send messages. It’s really helpful with school work for me too. One thing I don’t really like is how jammed the content is. When a bunch of people send messages to the group, it looks pretty unorganized. I also wish I could quote or reply to an individual message” -Interviewee 2
How do you think the GroupMe experience compares to other apps?
“I think it’s definitely way more simple than other apps. It’s more about sending meaningful and important messages rather than sending media and other types of content. I do wish the app was a bit more up to date with other texting apps like iMessage and Messenger though. There’s some features that the app desperately needs to keep up with others. I also think the design of the app looks outdated. It could definitely use a revamp” -Interviewee 2
“Compared to other apps, I think GroupMe is really good for productivity. It’s straight to the point unlike other apps. I like the simplicity of the app, but I think they could do more to make it more modern. I like sending lots of media like voice notes and reactions, but GroupMe doesn’t really have those features. I’m not too opposed to the actual design of the app, I like its simplicity” -Interviewee 3
If you could add one feature to GroupMe, what would it be and why?
“Like what I was saying before, the thing that really bugs me right now is the lack of a reply or quote feature. Instead of being able to reply to message, the only way to let a person know you’re replying to message is ‘@-ing’ them. It would be way better if you could hit a reply button and have the message you’re replying to quoted above the response.” -Interviewee 2
“I think they could add something along the lines of a video call. Sending text messages can only convey so much and there might circumstances where people need to communicate face to face. If they could do this through the app, it would definitely be helpful” -Interviewee 1
Overall, I think the results of the discussion guide were really constructive and did a really helpful job of driving my design process. From this research, I learned that users really like the simplicity of the app, but they feel like it could use a little more in terms of features. Compared to other apps, GroupMe is in great need of a “modernization”. From this research, I was also able to create my user persona: a general idea of what a GroupMe user might look like.
Building Empathy for Our Users
To begin my design process, I wanted to put myself in the shoes of the user and gain an understanding of their perspective. This led me to create an empathy map based on my user research. I found creating this empathy map to be really helpful. I could get an idea of the users environment, as well as any pain or gain points they have.
User Scenarios
To further this process, I came up with some succinct user scenarios. These scenarios highlight pain points that users may be having because of a lack of a specific feature.
- As a manager, I want to quote and reply to a message of one of my employees so they know I am responding to their specific message.
- As a student in a study group, I want to stop seeing all of a specific user’s messages so I no longer get spammed by them.
- As a friend, I want to be able to react to my other friend’s messages with emojis so I don’t have to type out a whole response.
- As a classmate, I want to be able to communicate in a video call so I can convey my messages face to face.
The Solution
After conducting my research, I felt as though I had a good idea of potential problems users are having. My focus on this redesign was to build off of what users already love while adding features to compensate for anything that might diminish a users experience. Below are some features that I chose to implement based on my research:
- Reply/Quote Feature
- React Feature
- Blocking Other Users
- Video Calls
In short, I want to allow users to do more while keeping the simplicity of the app that users are so fond of.
Early Design Iterations
After identifying how I wanted to go about my redesign and the features I wanted to implement, I created some low fidelity wireframes. The goal of these wireframes is to get a rough idea of how I would arrange the content within the interface.
Low Fidelity Wireframes (New Features)
When I was coming up with my low fidelity wireframes, I wanted to make sure the app was still easy to use. Lots of users felt like the content was organized in a way which was very accessible to them, so I made sure to stay true to that. Before I focused on the style in my final design iterations, I wanted to make sure the layout didn’t confuse the user. I intended to make each feature very easy to access. Before moving to more detailed iterations, I didn’t focus on respacing the content, however, it was something I looked towards while creating my final high fidelity design.
High Fidelity Iterations and Styling
For my “final” design, I took a step into the actual styling of my redesign. I chose to use the same color scheme GroupMe uses now, which is a combination of light blue and white. I wanted to utilize these colors to create a much more vibrant interface. In the current GroupMe interface, content seems very blocky, so I opted to stray away from that and experimented with different shapes and structures to add my own flair. Another change I made was adding more spacing throughout the app. Instead of having loads of content clumped up, I wanted to make sure everything was spaced out so it doesn’t overwhelm the user. As mentioned throughout this case study, I sought to maintain the simplicity of the app that users love.
Reply Feature
One of the biggest issues I’ve heard from users was a lack of a “reply” feature. If a user sees a message they want to reply to, they would have to compensate by @ing the user they want to reply to. An issue that arises with this is the fact that no one will know what message is being replied to without assuming what the message was. With these issues in mind, I created a reply feature. In order to access it, all the user has to do is hold down on the message they want to reply to until the widget bar at the bottom appears. From there the user would simply tap the reply button and submit a response. After the user sends their reply to the chat, there will be a quoted message right above letting group members know which message is being replied to.
React Feature
One feature that is currently unique to GroupMe is the “like” feature on every message that is represented with a heart. A heart represents a “loving” emotion, but what if the user wants to convey a different type of emotion? This drove me to add a “react” feature. To react to a message, the user would tap and hold on a message until the widget bar comes up. From there, they would tap on the emoji of their choice. Following this, the emoji would pop up under the message of choice. Instead of typing out full responses in reaction to messages, users could simply find an emoji to respond with using the react feature.
Video Call
When coming up with user scenarios, one specific scenario stood out to me. GroupMe is mainly meant to be an app to send text messages, but what if the situation needs users to communicate face to face? This lead to to add a video call feature to the current GroupMe design. Rather than using a different app to start a video call, they could simply do it through the app. To utilize the feature, users would have to open their group of choice. Once they’ve opened their group, they would have to tap the camera icon to initiate a group call. Once the call has started, the screen will be split up depending on how many other users join the video call. To exit the call, the user just has to hit the red button at the bottom of the call.
Block User Feature
This last feature that I decided add to the app is rather simple. In other apps, when a user is getting messages from people they don’t want to, they have the option to block them. This feature hasn’t been added to GroupMe yet! The only option a user has is to remove the other person from the group. Because of this, I opted to add a block feature which would stop a user from receiving messages from people they don’t want to receive messages from. To block someone, the user would have to press on the other user’s profile picture. From there, an option would pop up at the bottom of the screen to block the user. After this, the user would be able to stop seeing messages from the person they blocked.
Desktop Prototype — Tapping Into Adaptive Web Design
Along with designing a mobile app, I wanted to design a web application which would bring a similar experience to desktop users. In order to do this, I ended up using “adaptive web design”. I conducted this GroupMe redesign with a “mobile-first” approach, meaning that the design starts for mobile devices and then expands to fit bigger devices such as tablets and desktops. Because of the many different ways users could navigate through the mobile app, I decided to slightly adjust the layout for the desktop app to make use of the overabundance of space and to ensure users can perform tasks optimally. Compared to responsive web design, where the interface simply changes/adjusts size based on the display, adaptive web design focuses on tailoring the interface for each individual device. For example, I added a new navigation bar for users to access their settings with. On the mobile app, users have to hit the “column” button in order to bring up this navigation/settings bar. Since there is more space on desktop pages, I decided to add this navigation bar so users can easily access their settings while also maximizing screen space. For the portion of the screen and the group chats themselves, I was able to scale the sizes of all the content to make it more suitable for the desktop, similar to what occurs in responsive web design. I also combined different components of the application from the mobile app into the main interface. Now, the user has a navigation bar, a homepage/list of groups, and a group chat in one place. This allows user to go from chat to chat much easier, while also seeing potential chat activity in their groups list while they have a group chat open simultaneously! All in all, I wanted to design a desktop version of the app that carries over the great experience from the mobile app while also making changes to further benefit users.
Conclusion
Takeaway and Next Steps
As a whole, I really enjoyed this process of redesigning GroupMe! As a student, GroupMe has been critical for college students alike, especially during the current COVID-19 pandemic. While using the app, I instantly noticed that the app could be taken to the next level and that fueled me to do a redesign on it!
A big part of this case study was finding ways to empathize with users and sift through any potential hindrances users might be facing. To redesign GroupMe, I had to base the design off of what people already like, while implementing ways to solve issues users have with the app. This is something that I really took personal satisfaction in. I want to create the best experiences for people, and that is only possible if I take a look at the issues from their perspective.
This project is something that I definitely intend on coming back to. As many people know, there is never really a “final” design. Designs always evolve and have room for improvement, and that’s something which I look forward to working on. I was thinking about taking a bigger delve into the “social” aspect of the app, but chose to focus on the main point of the app which is sending group messages. When I add onto this project, I definitely want to explore the possibilities of social features within GroupMe.
Brief Reflection
Thanks for reading! This was a really cool experience for me as this was my formal first case study and redesign that I have done. This past semester, I took a Human-Computer Interaction course which sparked an interest in UI/UX design. I was able to learn a ton of skills in the class, and it really helped me get on my own feet to do this formal case study. I’d love to hear any feedback on this project so feel free to leave a comment. Once again, thanks for reading!
