Messenger Redesign -A UX Case Study

Making Daily Communication Simple

Background Info

Facebook’s messaging app, Messenger, has been one of the most downloaded apps for years. Many discover the messaging platform through its integration within Facebook but often users defect to other apps such as iMessage as their main communication platforms. Its plethora of features makes finding information and using it to its full capacity difficult.

In the span of 6 weeks, our team redesigned Messenger for users to amplify successful communication features.

Awarded: Netflix XD Enterprise, Most Customer-Centric UX

Meet the Team

Problem Statement

Although messenger is not the most popular app to use in comparison to its competitors, it serves niche roles, which other messaging apps don’t utilize or prioritize.

“How do we repurpose Messenger as a goal-oriented messaging app through amplifying successful communication features, such as Marketplace and Rooms, while also streamlining user interactions by de-prioritizing less favored features.”

Our Solution

We redesigned Messenger by focusing on Messenger, Rooms, and Marketplace in order to improve user communication.

Project Timeline

In the six weeks of our redesign, we used Figma, Notion, and Google Surveys to document, record, and create our solutions.

User Research

To begin our research, we contemplated how we might reach out to as many people who use Facebook Messenger as possible to understand why people use Messenger and their pain points with it and concluded that using Google Forms for our surveys would allow us to reach a large diverse group of people.

User-Survey

We wanted the survey to be quick and simple so our participants would be able to answer the questions to the best of their ability. We also made sure to eliminate any biases in our questions. Some questions we asked were about their familiarity with Messenger and what they use Messenger for.

Among the 96 responses we received, a majority were from college students. We used the survey responses, as well as the context from our user interviews, to guide our affinity mapping.

Interview

We wanted to understand Messenger users on a deeper level and user interviews

We conducted a total of 11 user interviews. We broke down our interviews into:

1. Why they use technology, what technology means to them
2. Questions about their use of Messenger
3. Reactions and behaviors in a realistic setting
4. Personal Thoughts and experiences with Messenger
5. Suggestions or questions they have to address specific features

User Persona

From understanding our user’s standpoint, we created a persona to narrate the experiences of how a certain user would use messenger.

Meet Walter Rodriguez, a first-generation college student who struggles with maintaining communication with his family outside of the U.S. From learning to live alone, Walter seeks affordable options to be more financially secure. Walter is a popular kid, so he finds difficulty communicating with all of his friends at once.

Synthesis

After our research, we used a few analysis strategies, including affinity mapping, HMOs, and pain points to create our first sketches for the redesign

We made an affinity map to look through common responses and go from there. We took notes of all the problems we found, categorized them into different groups, and voted on what we would like to focus on.

After voting as a group, we narrowed down the pieces of feedback that stood out in our affinity mapping which helped us understand and create customer pain points.

We narrowed down our thinking into chat organization, improving the video call feature, and emphasizing the connection with others.

Next, we defined certain pain points that we needed to consider.

These 4 pain points guide us into the main focuses of our redesign.

Defining the Problem

After all the synthesis of our data, that’s when we constructed a clear and goal-oriented focus.

Ideation

We brainstormed different possible solutions for the redesign.

From our synthesized data, we focused on iterating through the navigation bar, tabs, video call functions, and the homepage.

Wireframes

Based on the information received from our user research, we initially chose to divide mid-fidelity into 4 main flows: Personal, Groups, Videos, and Marketplace.

Mid-fi Prototyping

Usability Testing #1

Once we had completed our Mid — Fi Prototypes, it was then time to test out our individual flows.

These were some of the key aspects of what we looked for within our Usability Tests.

1. Testing out transitions from personal to group chats

• “Look for your family group chat.”

2. Creating and adding people into a video chat room

• “Create a group with Marcy, Erik, and yourself.”

3. Navigating among buyer and seller chats

• “Look for your marketplace conversation about purchasing a lamp.”

4. Sending and Offering money to Buyers and Sellers

• “Buy a lamp from Marcy for $20.”

Here were our key findings:

Positive feedback

1. Marketplace Chats being separate are useful to help declutter all the chats
2. Interviewees liked the emphasize on spaces for communication
3. Videos is a very unique feature that could be adapted better to be more consistent as a unique Messenger feature

Areas to Improve on

1. Wording for the Marketplace Chats is a bit confusing
2. Groups feature seemed to be a little redundant
3. Videos Feature felt a little too similar to Face-time.

Hi-fi Prototyping

Usability Testing #2

“Messenger should be more than just chats”

Multiple rounds of testing were done during this phase, and feedback given reminded the team to looking beyond a visual redesign. Here are some of the steps we took:

1. Finalized names of the pages: Messenger, Rooms, and Marketplace
2. Reevaluate current designs, and transform redesigns to be new, unique, but also recognized in Meta’s story and branding
3. Establish consistency throughout all pages and components used

Our Final Product

Design System

We wanted to use Meta’s current design system for Messenger to maintain consistency and branding. Majority of our design standards from typography, color palettes, and icons aligned closely with Messenger’s current UI. We also applied gestalt spatial heuristics that enable quick orientation for each interface.

Before & After

Here’s a shot with the existing design and our proposed design. Walter can now use Marketplace, Rooms, & Messenger with ease. Chats are no longer one long list, but organized and clean. Video calls to his family in Ecuador, texts to his friends, and communication with sellers and buyers should be no sweat!

Messenger

We redesigned the landing page for quick orientation and a more defined information hierarchy from a user’s personal and group chats. This new design focuses on a better experience for our users while using Messenger chats.

Rooms

Rooms went through a major transformation that led to complete redesign from its Mid-fi counterpart. We used feedback from our testers to reassess our progress in meeting communication goals and solving salient business solutions. We redefined Messenger’s Rooms by making it a more integral part of the app with this new and improved design. Personalization features for rooms and convenience in connecting with their close ones in video and audio calls together was the primary focus of this design.

Marketplace

We decided to created a different look for the Marketplace page. While this page is used as communication between buyers and sellers, we wanted Marketplace to be separate from Messenger. Marketplace utilizes item, organizing conversations to help streamline transactions and bidding.

Reflection

Challenges

• Creating the concept of Rooms without losing the concept of Messenger
• Deciding what the Navigation Bar should include: personal, groups, Marketplace
• Choosing the correct wording for old and new features to clearly emphasize its functions

Takeaways

• Clear and open communication especially when narrowing down ideas
• Prototyping on Figma and becoming more familiar with the UI/UX design process
• Consolidating and better organizing the information and features of Messenger

Next Steps

• Refine UI
• Further develop and research the Rooms feature
• Further develop and research the Make Offer feature of Marketplace
• Conduct more user interviews and rounds of usability testing
• Create a computer application