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.

LinkedIn

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.

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-

  1. What is the preferred location of the priority button and why?

  2. 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.