Spotlight Feature
A WhatsApp mobile app feature that helps users organize and prioritize their messages efficiently
Role
UX/ UI Designer
Responsibilities
User Research
UI Design & Prototyping
User Testing & Iterations
Timeline
Feb - Apr 2024
Tools
Figma, FigJam, Discord
Background on WhatsApp
WhatsApp is an instant messaging (IM) and voice-over-IP (VoIP) service owned by technology conglomerate Meta. It allows users to send text, voice messages, and video messages, make voice and video calls, and share images, documents, user locations, and other content.
WhatsApp is ranked as the most used mobile messenger app in the world. Over 140 billion messages are sent on it daily, which is about 1.6 million messages per second. On an average users spend around 38 minutes per day on it.
Why the Spotlight feature?
WhatsApp users typically receive around 30 messages daily, which can make responding to them a stressful and overwhelming experience. Often, users are unable to address these messages for weeks, causing them to pile up. As a result, important messages requiring timely attention may easily get overlooked. Additionally, due to the large number of piled-up messages, users could feel less motivated to go through them.
While WhatsApp offers features like pinning or starring messages, identifying which messages need to be starred or pinned still requires sifting through all of them, often leaving users overwhelmed or lost.
Spotlight feature aims to help WhatsApp users improve their messaging experience by helping them prioritize and organize their messages better.
Business Goal
Design a feature for the WhatsApp mobile application to assist users in organizing and prioritizing their messages
Solution
Important message tag
This feature allows senders to label a message as “important” before sending it. The recipient will see the message marked as important, indicated by a red exclamation icon, a red message count, and a red timestamp.
In group chats, if an important message is sent without tagging anyone, it will appear as important to all the group participants. However, if a specific participant is tagged, only that individual will see the message marked as important.
Urgent message tag
This feature allows senders to mark a message as “urgent” before sending it. The recipient will see the message labeled as urgent, indicated by a red bell icon, a red message count, and a red timestamp.
For urgent messages, the recipient will receive reminders twice every 10 minutes to open the message. In group chats, if an urgent message is sent without tagging anyone, it will appear as urgent to all the group participants. However, if a specific participant is tagged, only that individual will see the message marked as urgent.
Chat list screen
On the chat list screen, important messages will be prioritized over regular messages and displayed at the top of the chat list.
However, urgent messages will take precedence over both important and regular messages, appearing at the top of the chat list.
Design Thinking Steps
Empathy
Research
To understand the current challenges and opportunities in the WhatsApp messaging feature, I performed primary (user interviews) and secondary (competitor analysis) research.
As part of primary research, I conducted user interviews, to understand user pain points and requirements from the WhatsApp messaging feature.
As part of the competitor analysis, I reviewed messaging apps. I then analyzed their strengths and areas of improvement.
Competitor Analysis
I conducted a competitor analysis involving two direct competitors and one indirect competitor, gaining valuable insights into how messages are managed and organized within these apps.
This analysis was a key step in the design process, enabling me to understand current market trends and identify opportunities to make the spotlight feature distinctive and impactful.
Direct competitor - Teams, LinkedIn
Indirect competitor - Gmail
All the messaging apps try to prioritize or manage messages in different ways. The following are the insights on the different options they use.
Teams
Gmail
Key Insights
User Interviews
I interviewed 4 participants who have been using WhatsApp for around five years now, primarily for messaging.
Most of the participants used WhatsApp frequently to message or call (mostly international) and opened the app at least twice per day, daily.
Overall, all the participants had good information about various features and workflows on WhatsApp.
The main focus of the interview was to understand
How users currently prioritize messages on WhatsApp
How users manage large number of messages
How it affects their mental health
Key Insights
Define
Research Synthesis
After completing the research, I worked on creating personas. These personas are fictional characters that represent two user groups. One represents individuals with busy schedules, who do not have enough time to go through direct messages. The other one represents individuals who are part of multiple groups and communities finding it challenging to reply to a large number of messages.
Personas
I created Alice and Anant to represent WhatsApp users who will benefit the most from the Spotlight feature. Alice and Anant represent two key user groups for my research.
Alice is a young ambitious woman. She is a warm and kind person, who wants to be there for her family and friends. Due to her busy schedule, she does not have time to go through direct messages. She prefers responding to priority messages during the week.
Anant is an outgoing and jovial person. He loves socializing and meeting new people. He leads a lot of community events and is a part of multiple WhatsApp groups. He prefers to receive replies for priority messages promptly.
Going through a large number of messages is intimidating
Alice Smith (she/her)
Alice works at a book store part time for about 5 hours daily. She is highly ambitious and wants to pursue a career as a yoga instructor. She is enrolled in a yoga institute and conducts classes on weekends. Yoga helps her connect to herself and new people. She has a big family and is very close to all the family members. Due to her busy schedule she often finds it difficult to call people frequently and prefers messaging them instead. She feels intimidated due to the large number of messages from her family and close friends. She prefers to only get to the most important ones during the week and remaining ones on the weekend.
Motivations
1. She is motivated to foster healthy relation with her family and friends
2. Despite her busy schedule, she is determined to stay connected and be there for her close ones in times of need
Needs and Expectations
1. She wants to be able to access important or urgent messages promptly
Goals
1. To understand which messages need immediate attention without having to go through all of them
2. To be there for her family and friends during an emergency
3. Foster healthy relationships while maintaining a busy lifestyle
Challenges
1. Having to go through all the messages to know which ones need immediate attention
2. Sometimes missing important messages that need immediate reply due to busy schedule
I love to stay connected with my close ones
Anant Ambani (he/him)
Anant lives in the US, away from his family in India. As he stays away from his family, he has always been very close to his friends and is part of a number of WhatsApp groups. Anant is very social and leads a lot of Indian community events. Balancing his demanding work and community events has been quite a task. As he leads most of the events, he is often responsible to collect responses from RSVP’s. WhatsApp has been a very handy tool for him specifically to gather RSVPs or responses for any upcoming events.
Motivations
1. He is highly motivated to lead events for his community
Needs and Expectations
1. He wants to be able to mark messages as important or urgent before sending them
Goals
1. To get prompt replies on time sensitive messages
2. To remove communication gaps when organizing events
3. Strike a balance between social network and his busy schedule
Challenges
1. Having to individually follow up with people regarding RSVP’s for events is exhausting
2. It is tough to communicate to members of groups about messages that are time sensitive and need an immediate response.
Affinity Mapping
Working on affinity mapping helped me to understand common patterns and themes in user pain points, challenges, and preferences.
It consists of two main steps -
1. Gather insights and information from the user interviews
2. Identify common patterns in user pain points, challenges, preferences, etc. and cluster them into different themes
Problem Statement
For the problem statement, I decided to focus on two core POVs. One for the sender and the other for the receiver of the messages.
POV 1
As a sender, who wants to send a message, I need a way to mention the priority - important or urgent of a message, so that it is not lost in the large number of messages.
HMW
How might we assist WhatsApp message senders in sending messages of significance or time sensitivity?
POV 2
As a receiver, who receives a large number of messages, I need a way to promptly get to the important or urgent messages, so that I don’t feel overwhelmed and spend a lot of time searching for them.
HMW
How can we display messages of significance or time-sensitivity in a way that allows Whatsapp message receivers to quickly access them?
Feature Set
I then worked on listing down various features needed for the first MVP. Using the MoSCoW prioritization technique, I grouped the features into different levels of priority. Some of the factors I considered while deciding the priority on the features are user requirements, client requirements, impact on the business and development time.
MUST HAVE
Important message tag
Urgent message tag
In app notification
COULD HAVE
Reminder notification for urgent messages
Locate priority messages
SHOULD HAVE
Search priority messages
Filter priority messages
Edit priority messages
WILL NOT HAVE
Audio change for priority messages
Auto suggestion replies for priority messages
User Flow
To understand the end-to-end user flow for sending and receiving messages, I created user flow diagrams for both the sender and receiver. It helped to get a good understanding of the different scenarios and screens I would need to design to handle all use cases.
Ideate
Mid-Fidelity Wireframes
In this step, I digitized and refined my low-fidelity wireframes to create mid-fidelity versions, ensuring greater clarity for user testing.
Testing with low-fidelity wireframes can sometimes confuse participants; unclear sketches may lead users to interpret the designs differently, resulting in less accurate feedback. The refined mid-fidelity wireframes addressed this issue, providing a more precise foundation for testing.
Added below are a few samples for mid-fidelity wireframes.
Priority button (Option A)
Priority button (Option B)
Priority button (Option C)
Priority dialogue
Important message
Urgent message
Priority message for receiver (Option A)
Priority message for receiver (Option B)
1) Priority button (Option A)
Add a priority message option next to the input box
2) Priority button (Option B)
Add a priority message option on the bottom sheet next to the Poll option
3) Priority button (Option C)
Long pressing the send icon will open the bottom sheet to select the priority of the message
4) Priority dialogue
Once the user presses the priority button, the ‘Choose Priority’ bottom sheet shows up, from which the user can add an important or urgent tag for the message.
5) Important message
Once the user has selected the important priority option, this screen shows the visual changes on the input text box to reflect this.
6) Urgent message
Once the user has selected the urgent priority option, this screen shows the visual changes on the input text box to reflect this.
If a message is marked as urgent, the receiver will be reminded thrice about the message every 5 mins.
7) Priority messages location for the receiver (Option A) :
This screen shows an option to reflect how the priority messages will be ordered at the top of the chat list. This helps the user to promptly locate them.
8) Priority messages location for the receiver (Option B) :
This screen shows an option where the priority messages can be grouped together in a separate priority tab. This helps the user to promptly locate them and easily separate them from the regular messages.
Style Guide
The style guide is created by referencing the WhatsApp app and matching colors and fonts as closely as possible. I extracted the colors using Adobe Theme Extractor and the font using WhatFont as the WhatsApp official style guide was not available to use.
High Fidelity Wireframes
I worked on user testing the high-fidelity wireframes with three participants. In the user testing, I primarily focused on the following two tasks-
What is the preferred location of the priority button and why?
What is the preferred way for receivers to access the priority messages promptly and why?
On the basis of the feedback received, I worked on creating high-fidelity wireframes.
Testing
Usability Testing Findings
I conducted usability testing on the high-fidelity wireframes, with four participants.
The participants were given three tasks. Two of them focused on scenarios where the sender would use the important or urgent priority for sending messages. The last task focused on how the receiver would access important or urgent messages.
Key Insights
Priority Revisions
Final Prototype
Sender
Receiver
Next Steps
For my next step, I would like to test the priority button for the fat finger error with a large number of users.
Additionally, workflows like editing a priority message and providing flexibility for changing the time interval and frequency of reminders for urgent messages would be some great enhancements to the user experience.
Lastly, I think WhatsApp for business would be a great use case for using priority messages. I would definitely like to explore that domain.
