PROJECT OVERVIEW
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. The challenge is to repurpose it as a goal-oriented messaging app by amplifying successful features like Marketplace and Rooms while streamlining user interactions, and reprioritizing business goals like user engagement and retention.
In the span of 6 weeks, our team redesigned Messenger for users to amplify successful communication features.
I was the Synthesis & Ideation lead and product designer on the Messenger Redesign Team. My contributions focused on redefining Messenger as an app for simple communication in personal chats, video calls, and marketplace features while also ensuring flow consistency among screens.
Awarded: Netflix XD Enterprise, Most Customer-Centric UX
RESEARCH
In order to build a strong foundation for redesign, it was imperative to empathize with our target audience. This involved a multi-faceted approach encompassing literature reviews, user surveys, and user interviews.
Literature Reviews
We first started with conducting literature reviews, analyzing people’s current pain points with the Messenger app on the app store feedback section. By doing this research, it allowed us to craft insightful interview and survey questions while figuring out the painpoints that we wanted to address during the research process.
Early Research Goals
Building on the initial insight we found from the literature reviews, we decided to create early goals for our user interviews and surveys to better understand specific pain points and experiences of the current Messenger redesign.
User Surveys
To effectively gather data from a diverse user base, we strategized on how best to reach Facebook Messenger users. Our decision to employ Google Forms for surveys was driven by its capacity to engage a wide-ranging audience, ensuring comprehensive insights into user behaviors and pain points.
Our primary objective with the survey was to ensure simplicity and brevity, enabling participants to provide accurate responses. We meticulously crafted questions to eliminate biases and facilitate genuine insights. Key inquiries focused on participants' familiarity with Messenger and their primary usage patterns within the app. This approach aimed to gather valuable data while minimizing participant burden and ensuring the integrity of our findings.
Our Goals From the Survey
- Understand how many people have or had used Messenger
- Analyze what aspects of Messenger were successful/failures
- Determine why people lean towards other messaging-apps
- Observe how frequently they use Messenger based on specific features
User Interviews
Our user interviews were instrumental in fostering empathy and understanding users' experiences with Messenger. Following the interviews, we employed a nuanced analysis framework, capturing participants' verbalized expressions, emotions, actions, and thoughts regarding the current Messenger application. This holistic approach aimed to delve deeper into users' perspectives, allowing us to gain profound insights into their needs, preferences, and pain points.
We conducted a total of 11 user interviews and broke each of the interviews down into:
- Why they use technology, what technology means to them
- Questions about their use of Messenger
- Reactions and behaviors in a realistic setting
- Personal thoughts and experiences with Messenger
- Suggestions or questions they have to address specific features
Persona
Based on our comprehensive understanding of our users' perspectives, our team developed a user persona to encapsulate the typical experiences and behaviors of a Messenger user. This persona served as a narrative tool to illustrate how a specific individual would interact with the app. By empathizing with our target audience, we crafted a detailed user persona that reflected the diverse needs and motivations of Messenger users, facilitating a more focused and user-centered approach to our redesign efforts.
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 in communicating with all of his friends at once. He is using Messenger to look to furnish his new apartment in the midst of maintaining his close connection with his family outside of the United States, while also strengthening bonds with friends within campus.
SYNTHESIS
Following our research, we employed various analysis strategies such as affinity mapping, HMW’s, and pain point identification to create our first sketches for the redesign. We initiated the process by creating an affinity map to organize common responses and gain insights. This involved categorizing findings into distinct groups and noting down identified issues. Subsequently, we collectively voted on focal areas based on the most prominent feedback. Refining our focus, we narrowed down to three key points which we thought would be helpful in identifying the main purposes for our redesign: organizing chats, improving the video call feature, and emphasizing connection with others. This systematic approach allowed us to hone in on critical aspects for redesign, ensuring alignment with user needs and priorities.
Within these areas, we pinpointed specific pain points that warranted consideration. These main pain points included:
- Being unable to separate personal chats from Marketplace chats
- Easy to lose track of all the different conversations with people
- Video call features are barely used
- Tedious process to navigate from Marketplace to messages.
Defining the Problem
After synthesizing our data from our affinity map, we considered all HMW questions to create our problem statement:
IDEATION
Initial Sketches
With the pain points and problem statement guiding us, our team delved into brainstorming possible solutions for our redesign. We sketched out iterations for key areas such as the navigation bar, tabs, video call functions, and the homepage, aligning closely with our synthesized data.
Our sketches explored various possibilities, including integrating Facebook and Messenger into a single app for enhanced navigation convenience. Additionally, we contemplated the implementation of tabs to segregate personal messages and Marketplace chats, offering users clearer representation between different types of conversations.
This collaborative ideation process allowed us to generate diverse ideas and iterate through potential solutions, ensuring that our redesign efforts were grounded in user-centric design principles and effectively addressed identified pain points.
Wireframes & Prototypes
Based on insights received from our user research, we initially structured our mid-fidelity design into four primary flows: Personal, Groups, Videos, and Marketplace.
The Messages flow serves as the home page, allowing users to navigate through their personal chats and access other areas of Messenger. In response to user feedback, we prioritized the placement of the video and call buttons over features like the” who's active" and "stories”.
Our Group Chats flow consolidates all group conversations into one organized section, reducing clutter on the home page. Additionally, we introduced features such as pinning, removing, and renaming group chats to enhance user control and customization.
Within the Marketplace flow, we centralized all marketplace-related chats into one designated section. Users can view these chats from both buyer and seller perspectives, facilitating seamless transactions. Furthermore, we integrated a payments section directly within Marketplace chats, streamlining the payment process without relying on third-party services.
Recognizing the prevalence of video calls among Messenger users, our Videos feature aims to strengthen connections by enabling users to initiate video calls with friends, family, and relatives, regardless of device compatibility. This feature emphasizes meaningful interactions and fosters closer connections among users.
USABILITY TESTING #1
Following the completion of our Mid-Fi Prototypes, we prepared a script for Usability Testing and proceeded with our first round. Our testing primarily focused on testing individual flows to ensure a comprehensive assessment of each feature's usability and functionality including:
Key Findings
Postive Feedback
- Marketplace Chats being separate are useful to help declutter all the chats
- Interviewees liked the emphasize on spaces for communication
- Videos is a very unique feature that could be adapted better to be more consistent as a unique Messenger feature
Areas to Improve on
- Wording for the Marketplace Chats is a bit confusing
- Groups feature seemed to be a little redundant
- Videos Feature felt a little too similar to Face-time
HIGH FIDELITY PROTOTYPES
Building upon our wireframes, we transitioned to prototyping high-fidelity designs, integrating adjustments informed by our usability tests.
USABILITY TESTING #2
Multiple rounds of testing were done during this phase, and feedback given reminded the team to look beyond a visual redesign. Here were some of the steps we took:
- Finalized names of the pages: Messenger, Rooms, and Marketplace
- Reevaluate current designs, and transform redesigns to be new, unique, but also recognized in Meta’s story and branding
- Establish consistency throughout all pages and components used
During the transition from high-fidelity (Hi-Fi) to final designs, numerous minor adjustments were made to enhance the overall flow and coherence of our work. Notably, I focused on ensuring seamless alignment and continuity between different design prototypes, ensuring a smooth transition from one flow to the next.
Messenger Home Page
Based on feedback from our initial round of usability testing, particularly from Alexa, who suggested consolidating chats and group chats on one page while separating the Marketplace onto another page, we revamped the bottom navigation bar accordingly:
- Messenger
- Video Call
- Marketplace
In collaboration with other interviewees like Tassja and Alexa, we refined the sub-navigation bar, ensuring that personal and group chats remain separate but are conveniently located on a single page. Numerous minor details were adjusted based on usability testing insights to enhance the overall user experience.
The final design reflects consistency with the subsequent screens for Marketplace, maintaining coherence throughout the Messenger redesign.
Marketplace
Following feedback from Briana and Jasmine during our initial usability testing, highlighting the desire for Marketplace to offer more than just chats, we recognized the need for a revamped approach. Consequently, we embarked on creating a distinct look for Marketplace chats, differentiating them from the Messenger page.
Incorporating the innovative idea of displaying items as the group chat image for Marketplace, we iterated on the design multiple times to achieve a polished and refined aesthetic. This iterative process aimed to deliver a cleaner and more visually appealing Marketplace interface, aligning with user expectations and preferences.
Make An Offer
Continuing our iterative design process, we prioritized our audience's ease of use and comprehension. To enhance clarity and streamline the user experience, we removed the pop-up feature, signaling official transactions for buying or selling items. Additionally, we minimized excessive text to prevent cognitive overload and maintain a clean interface.
Furthermore, we ensured consistency in colors, adhering closely to our design standards. By maintaining a harmonious visual palette, we aimed to create a cohesive and intuitive design that resonated with our users and facilitated seamless interaction with the Messenger platform.
Rooms
Rooms posed a significant challenge for our team initially. However, insights gathered from the first round of usability testing prompted us to revisit an earlier concept developed during ideation. Recognizing the potential of this concept, we opted to experiment with creating a dedicated page for video calls, subsequently named Rooms, in our iterative design process.
While the ability to make video and phone calls to individuals remained within chats, we aimed to elevate Rooms to a more integral role within the Messenger platform. Throughout our iterations, we conducted further user testing with another group of individuals to gather feedback and refine our designs. This iterative approach enabled us to iteratively refine and enhance the Rooms feature, culminating in the final design.
Video Call
In response to usability test feedback, we iterated through various layouts for video calls to optimize user experience. These iterations focused on refining the layout for intuitive interactions with icons and buttons, aiming to enhance the user's experience when initiating calls with friends and family. By carefully considering and incorporating feedback from usability testing, we arrived at final designs that prioritize usability and facilitate seamless communication within the Messenger platform.
DESIGN SYSTEM
To maintain consistency and align with Meta's branding, we opted to utilize Meta's existing design system for Messenger. This decision ensured uniformity across typography, color palettes, and icons, closely aligning with Messenger's current UI standards. Additionally, we employed gestalt spatial heuristics to facilitate quick orientation within each interface.
To uphold consistency across all pages, we meticulously crafted and implemented all components used in the high-fidelity phase. This approach ensured a cohesive and seamless user experience throughout the Messenger redesign project.
So What Changed?
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!
Messages
Find Chats More Easily
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.
Marketplace - Organized Page for your Marketplace Chats
A Streamlined Way to Buy/Sell/Bid Items
We decided to create 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 items, organizing conversations to help streamline transactions and bidding.
Marketplace - Creating a Counteroffer
Using the Counteroffer Feature to Bid with Ease
With a simple click, both parties can propose new terms, review counter offers, and finalize agreements quickly and efficiently. This intuitive functionality not only saves time but also fosters a more dynamic and interactive marketplace, ensuring that users can secure the best possible deals with minimal hassle.
Rooms
Connect with your Loved Ones
Rooms went through a major transformation that led to a 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.
REFLECTION
I'd like to extend a heartfelt shoutout to my incredible team for their dedication and collaboration throughout the Messenger Redesign project, completed in just 6 weeks! Working alongside such talented individuals was an absolute pleasure, and I'm immensely grateful for the opportunity to learn and grow not only as a designer but also as a person.
This project marked my first experience working with a team of designers and it was truly transformative. Through our collective efforts, I gained valuable hands-on experience with Figma and had the chance to prototype an entire app, expanding my skill set and boosting my confidence in UX design. This project has solidified my passion for UI/UX design and marked the beginning of my journey in the field. I'm excited to continue honing my skills and contributing to impactful design projects in the future.
I'm also incredibly proud of our team's achievement in winning the Most Customer-Centric UX Award, as well as being highly recognized by a Netflix Product Designer and receiving a Netflix XD Enterprise Award. These accolades serve as a testament to our hard work and dedication to creating exceptional user experiences.
Next Steps
For our next steps, my team and I would like to refine the UI and further develop and research the rooms feature and bidding/selling aspect of Marketplace. This would be done by conducting more rounds of user interviews and usability testing.
Prototype
Click below to view the prototype if you would like to experience the redesign yourself!
@Jessica Chu 2024
made with love 
and lots of sunsets 