Overview

Role

Lead visual designer, user experience and interaction design, UX writing

The Context

I redesigned Messenger with designers in Design Interactive, a student-run design consultancy at UC Davis. Our project received the Netflix XD Enterprise and Most Customer-Centric UX award from the panel of industry professionals during Presentation Day, which was sponsored by the Netflix Platform Team.

The Problem

Our team was tasked with enhancing the current Messenger app by identifying areas for improvement. We dedicated our efforts to improving user experience by tackling common pain points, optimizing workflows, and reprioritizing business goals like user engagement and user retention.

Team

Cheryl Cai, Project Manager

Jessica Mei, Designer

Cody Mak, Designer

Sriram Magesh, Designer

Jessica Chu, Designer

Timeline

6 weeks 

Tools

Figma, Notion, and Google Surveys

MSolutions_Final

Research

πŸ“š Literature Review

To start my research, I learned more about the context of Messenger through data and statistics. This initial research allowed me to craft insightful interview and survey questions while pinpointing crucial gaps to address during the research process.

Messenger_Stats

πŸ’¬ Interviews

I conducted ten in-person interviews with current Messenger users and posed customer-facing questions, to understand how they use Messenger, what they're saying about the app, and identify potential areas for improvement.

Messenger_Interviews8

After conducting interviews, it became evident that the majority of participants primarily utilized Messenger for group chats, messaging, and video calls. Apart from its primary uses, users emphasized the convenience of Messenger, citing features like connecting with others and engaging in activities such as finding roommates or selling items on the marketplace.

✏️ Surveys

My team and I collected qualitative and quantitative data by using a Google Survey, and we were able to gather information from 93 Messenger users and 4 non-users who were college students in their early 20s. Our questions inquired about the purpose, time spent, and their opinions regarding features like texting, group chats, video calls, and audio calls. 

Messenger_Survey

From the survey, we found that a significant amount of users lack engagement with the platform. Almost half of the users spend less than an hour a day on the app, and less than a quarter spend more than one hour on the app. Many users are opting to use other apps for the majority of their communication.

However, enhancing group communication could be a crucial area of focus for the redesign, given that the majority of activities were observed in group chats, and many users expressed a preference for communicating within larger groups on Messsenger.

Synthesis

Affinity Map

All data gathered from the research phase was then categorized into user behavior and preferences to enable us to draw solutions to enhance the Messenger platform.

Final_MessengerMap

User Persona

I created an in-depth user persona and imagined how users would utilize Messenger with additions like Rooms and Marketplace. The target audience enjoyed a cohesive environment that connected users together and further fostered business opportunities within the app. 

Messenger_Persona2

Meet Walter, a college student facing the challenges of moving across the country. He needs an app to help him find furniture for his new place and keep in touch with family and friends from home and overseas. Walter is excited to make new connections at college and stay connected with the people who matter most to him. Users like Walter progressed design decisions.

Ideation

Userflow

To establish a rough outline, I developed a guiding framework for the app and envisioned a  repurposed version of Rooms, improved Marketplace chat, and chat organization system for Messages

Messenger_Userflow2

Sketches

I began envisioning the new structure and features for Messages, Rooms, and Marketplace.

  • Messages present a toggle for organizing personal and group chats.
  • Marketplace resembles Messages, featuring a toggle for Buyer and Seller chats.
  • Marketplace chats have an integrated payment system, making marketplace transactions possible within Messenger.
  • Rooms enable users to create personalized spaces, enriching group communication and user engagement.
Messenger_Sketch

Design

Visual Framework

My team and I reviewed the latest brand guidelines by Meta for the Messenger app. As the lead visual designer, I checked that designs aligned with Meta's colors, typography, logos, icons, and components. 

Messenger_Standards

Messages Screen

I worked on creating a toggle for Messages that organized personal and group chats. My team and I decided on a new navbar that removed the 'Stories' tab, replaced it with Marketplace, and renamed the 'Peoples' tab to Rooms since it was just a contact list of friends. 

Messages_Screen6

Rooms Screen

With the sketches, I experimented with the grid and list view for the Rooms screen. Both views offered pros and cons, so I conducted A/B testing for more user insights. After the tests, it became evident that users leaned towards the list view, resulting in one standard view.

Rooms_Screen8

Refining Rooms Screen

Through testing, a question emerged: How do we manage regular group calls and Room calls? Our team decided to keep the call history and labels for calls consistent. The call history can be viewed and managed through Rooms and the Calls tab. 

Rooms_History4

Marketplace Screens

Following the sketches and previous designs, I separated buying and selling chats. There are two use cases in Marketplace chats: making offers and selling items, leading to unique user interactions.

  • Buying chats features listing price and delivery information in the description
  • Selling chats shows the listing date and offers received on an item in the description
  • Users can make payments inside Marketplace chats
Marketplace_Screens7

Visualizing Marketplace Chats

I created iterations of an expandable floating component that offers item details and a CTA button for both Buying and Selling chats. I adjusted wording and user interactions according to the respective use cases of Buying and Selling chats to ensure a seamless experience.

Users can "Make Offers" in Buying chats while inquiring about the item.

Buyer1

Users can "Manage Offers" in Selling chats by viewing the offer details of an item they listed. 

Seller1

Iterating Marketplace Transactions

After determining the appearance of marketplace chats, I worked on the screens for marketplace transactions, keeping continuity, feasibility, and scalability in mind. 

Design System

Colors & Typography

From Meta's brand style guide, I chose a few core colors to be used in our redesign's branding. Although I couldn't acquire the original font used by Meta, I picked an alternative font to ensure branding and design consistency.

Messenger_Branding

Icons

I selected icons that resonated with our brand's identity and conveyed our message effectively.

Messenger_Icons3

Spacing & Grid System

I used a four-column grid along with rows that adhere to an 8dp grid system. The size and proportion of elements, including typography, icons, components, grids, and margins were set to multiples of 8. 

M_SpaceFinal

Final Design

Messages β€”

Messages2

Say goodbye to cluttered conversations

You can now navigate between personal and group chats via the personal and group messages toggle.

Marketplace β€”

Buy and sell with clarity on Marketplace

With the redesigned chat interface, you're connected to listings, product details, and the buyers and sellers in a snap. 


MP_Buying1

Marketplace, Buying β€”

MP_Buying2

Ask, connect, and buy on Marketplace

Connect and negotiate directly with the seller, get informed by viewing the interactive card to view product details, and make informed offers with confidence.

Submitting an offer to the seller

Submit your offer through the interactive card and monitor the offer status after submission in the chat.

Mp_Buying3
Mp_Buying4-1

Notification for seller's approval of the offer

Following the offer submission, you will receive a notification and updated offer status upon the seller's approval. 

Marketplace, Selling β€”

Chat, connect, and sell on Marketplace

Spark conversations with eager buyers directly in chat, answer their questions, and build trust with your product.

Mp_Selling1
Mp_Selling2

Managing and reviewing offers as a seller

When considering product offers, you can decide whether to accept, counteroffer, or decline.

Reviewing the transaction details 

After accepting an offer, you can view the status update as well as transaction details from the chat. 

Mp_Selling3

Rooms β€”

Rooms1

Build community and converse with Rooms

Tired of juggling video calls and jumping into group chats to call? Create Rooms for effortless group connections in voice or video.

View call activity via Rooms

Monitor Rooms-related activity, and find call history too.

Rooms2

Home β€”

Messenger-Home

Presenting Messenger: Redesigned

We’ve reached the end of Messenger, concluding with a complete walk-through of the redesigned app. Explore the new Messenger now within the Figma environment.

Messenger_Final3

Takeaways

Balancing the core of Messenger with innovation

Creating seamless extensions for Messenger, such as redesigned Messages, Rooms, and Marketplace, required a deep understanding of each new feature's purpose and the user needs it addressed. Both design and language had to align with Meta's core values and established standards to ensure a cohesive and genuine experience.

Prioritizing research and iterations

At the heart of every decision, we prioritize and rely on our users. Whenever challenges arose, we returned to user testing and delved deeper into user insights, uncovering missing context and details that informed our next steps. Our focus on user research and constant iteration enabled us to develop impactful and functional solutions for a more engaging Messenger.

Collaborating and communicating in teams

Working with a four-person team of varying UX Design experience taught me to guide those new to the field and helped me develop as a leader and one of the project leads. During this project, I also enhanced my skills in using Figma for prototyping and deepened my understanding of the UI/UX design process.

JM

Β© Jessica Mei 2024