ADD A NEW FEATURE TO THE EXISTING MOBILE APP
Introduce a new AI feature on WhatsApp that generates a smart summary of messages a user has missed in group chats.
MY ROLE
Product Design,
UI/UX Design
MY TASK
UX Research, Qualitative Interviews, Visual Design, Wireframing, Prototyping,
User Testing
TIMELINE
Discovery & Research:
3+ weeks
Design & testing:
6+ weeks
TOOLS
Figma, Figjam
Illustrator
Photoshop
Background
I often see a common challenge faced by users of WhatsApp, particularly in group chats. The issue is that, over time, group threads accumulate a large number of messages. As a result, users find themselves having to scroll through numerous messages from the past days to catch up on the content and stay informed about ongoing discussions.
A large volume of messages in the group chat can make it time-consuming and cumbersome for users to catch up on the conversation.
In today’s fast-paced world, navigating a backlog of messages can
be inconvenient for individuals juggling multiple responsibilities.
-
Problem Statement
Many group messaging users encounter challenges in managing their communication due to the overwhelming volume of messages, leading to difficulties in keeping up.
MY Solution
CREATE A NEW AI FEATURE THAT CAN DISPLAY A SUMMARY OF THE MESSAGES A USER HAS MISSED IN GROUP THREADS.
User Interview
I did a User Interview aiming to directly learn and hear about people's experiences with using group messages and identify any pain points.
I reached out to 8 people who are part of a large group chat. Some key findings were:
100% of them sometimes experience difficulty in keeping up with
a large number of messages that pile up.75% of them have muted group threads before due to excessive buzzing.
62.5% of them prefer to only see the conversations that are relevant to the topic of their group.
50% of them don't scroll back up to catch up on group threads due
to overwhelming feelings.
IDENTIFIED CHALLENGES INCLUDE:
Excessive amount of message
Irrelevant topic messages or side chats from others
Too much buzzing
Not knowing everyone in the group
Project Objectives
01. HOW MIGHT WE SUPPORT USERS IN HANDLING A LARGE VOLUME OF MESSAGES WITHIN GROUP SETTINGS
SO THAT THEY FEEL LESS OVERWHELMED AND ENGAGE BETTER IN CONVERSATIONS?
Embed an AI feature that summarizes unread messages in group threads for users.
-
-
02. HOW MIGHT WE ESTABLISH A HIERARCHY AMONG MESSAGES TO PREVENT USERS FROM
MISSING IMPORTANT INFORMATION?
Create an optional function in the summary AI, allowing users to add specific keywords or
sentences to receive only the relevant content of message summary.
USER PERSONA
TARGET AUDIENCE: Busy professionals who use group messaging regularly but feel overwhelmed by message volume. They want to:
Catch up quickly on missed messages
Identify and prioritize important content
Stay engaged despite limited time
Reduce anxiety from message overload
They value efficient, user-friendly solutions that fit into their fast-paced routines.
taskflow
DESIGN CHALLENGE: While mapping the user and task flow for enabling the Summary AI feature, I encountered a design decision challenge around how users would discover and manage AI tools.
-
PROBLEM IDENTIFIED:
The existing Chatbot button labeled “Show Meta AI
Button” does not clearly communicate its purpose or
function to users.
DESIGN DECISION:
To improve user understanding and control, a dedicated
“AI Features” section will be added under Settings.
-
SOLUTION DETAILS:
Each AI feature (e.g., Meta AI chatbot, Summary AI) will be listed individually.
Users can toggle each feature on or off based on their preferences.
This approach promotes transparency and enhances user trust and customization.
wireframe
First, I sketched and created low-fidelity screens while studying the WhatsApp platform and its current navigation and design system. At this stage, I focused on the general flow, placement of the Summary AI feature, and ensuring its functionality integrates seamlessly with the existing WhatsApp system.
Design itertaion
I built high-fidelity screens and focused on refining the user interface details. I also explored a few design iterations for the AI summary buttons.
DESIGN DECISION:
At first, I considered merging the Meta AI button with the "Unread Messages" bar to reduce visual clutter and save space.
I chose ‘Option A’ because it aligns with WhatsApp’s existing design system and closely resembles the current Meta AI chatbot display. It also felt the most familiar to users during feedback sessions.
HIGH FIDELITY UI SCREENS & PROTOTYPE
What I Learned
01. STUDYING EXISTING DESIGN SYSTEMS
One key takeaway from this project was the importance of understanding the existing design system. By closely studying how WhatsApp structures its interface and guides users through their experience, I was able to ensure that the new feature felt seamless and consistent within the platform. This step helped me design with intention and respect the patterns users were already familiar with.
02. EARLY USABILITY TESTING MATTERS
Conducting usability tests in the early stages gave me clear insights into how users think and interact. Observing their behavior helped me catch potential issues early and refine my ideas before moving forward. Quick tests using low-fidelity wireframes—even just rough sketches—were incredibly helpful for shaping the design direction and building a more effective solution.
03. THE POWER OF LANGUAGE IN DESIGN
I came to realize how much of an impact wording has on the user experience. Even small changes in microcopy can shift the tone, create clarity, or reduce confusion. Choosing the right words became just as important as the visual design itself in guiding users smoothly through the feature.