UX/UI Case study: A New Feature For WhatsApp

Mirkka Osorio
7 min readJan 6, 2020

--

Brief:

During the 5th week of the Ironhack UX/UI Bootcamp my task was to create a new feature for Whatsapp to receive the relevant information in big chat groups.

  • Time for the project: 4 days
  • Tool for prototyping: Figma
  • Used research methods: Survey, interviews and desktop research

UX research

The topic was interesting because I didn’t really have any experience in having over 10 people WhatsApp groups. So I started with interviews and desktop research to build an idea of what is it about.

To my surprise the issue was huge! People seems to have groups from 10 to until 200 people and everyone felt overwhelmed with that. After getting some insights from the interviews, I did a survey to find out with what kind of things people really are struggling with in big chat groups and how do they manage to find needed information from them at the moment.

Research results

Interviews: 6

Survey replies: 55

Almost everyone had big WhatsApp groups which meant in this case study over 10 people’s groups.

Over 80% had felt overwhelmed with the amount of messages they got in the big groups.

People’s experiences with big WhatsApp groups.

People felt often frustrated with the groups because the big chats made it impossible to follow the conversations and to find the important messages among the others.

“It’s hard to know if some messages concern you or not. It also takes time to read all the messages if there’s lot of new.”

“100+ messages per day you don’t want to read”

“too many messages non related to me”

As a result of feeling overwhelmed, people turned the notifications off:

In the interviews people mentioned that it’s easier to turn off the notifications than leave the groups. People felt social pressure to be in the chat groups because leaving from there would make them look rude or give the impression they don’t like the people in the group.

The most common way of trying to manage with the volume of messages was the “skim & scan” method were people try to scroll the text fast and find important keywords among the messages.

Interestingly, even if people turned the notifications off, 72.3%
would turn on the notifications if they could customise them better.

Main painpoints

People had problems with 4 main things:

  • They turned notifications off because of the overwhelming amount of messages they got.
  • People felt it’s hard to follow the conversations and find the messages that are relevant to themselves.
  • People didn’t find the search feature from the app.
  • People didn’t find the customising options for the notifications, and even if they found them they felt they were too narrow to be useful.

Problem statement

According to the data I gathered I started to get a greater picture of the main problems people were struggling with. For the problem statement I used How might we -sentence to make my target goal clearer:

HMW help people to manage the information better from their big WhatsApp groups and keep up with relevant messages?

The target group

Most of the people who answer to the survey and I had an interview with were women. The ages varied between 20–40 years. A common thing between the people was that they really appreciated their friends and family and nobody wanted to leave the groups in order to not appear rude. However, groups felt often pointless with the huge amount of messages and it was easier to be in the group and just turn off the notifications.

User Persona

Solution: Customised notifications

The solution to solve the main pain points were:

  • Adding more options to customise which notifications the user wishes to receive
  • Making the settings more visible
  • Adding the search icon
  • Creating an easy navigation between relevant messages

First: Less options in the overflow menu

In oder to modify the notifications or find some other settings people needed to find them from the application. That brought problems! It was confusing that there were too many options listed in the overflow menu. Also, almost all of those options directed the user to the same next screen.

Solution: I decided to merge the options to 4 categories and create a one bigger one called “Groups settings”. Behind that, the user will find all the necessary settings that are needed for the group chat.

Adding less options to the menu and removing them to Group settings.

Second: Let’s clear out the notification settings

In the picture below you can see how the settings were divided before and how they are after a little rearranging. It was confusing that the screen had already the “mute notification option” (Which already existed in the overflow menu as well) but below it there are “custom notifications” which didn’t tell a lot to the user. Also the term media visibility was confusing.

Solution: I decided to create a few bigger categories of settings so that the names would give a clearer idea of what kind of settings are available behind the category. For example, now all the notification related settings are behind “Notification settings”.

Creating separated settings for notifications

Third: Modifying the existing notifications settings and adding a few more features

In the picture below you can see how the old version’s custom notifications settings looked like. First, they need to be turned on and after that the user can customise only the following:

  • ringtone
  • vibration
  • popups
  • lights

Solution: In many other applications that kind of settings are general settings and for that reason I decided to divide the settings in general ones and custom ones.

If the user decided to use the custom notifications, he/she has three options to have notifications only:

  • when the name is mentioned in the chat
  • according to the keywords the user wants to add
  • when some specific person writes in the group
Notification settings are divided to General and Custom notifications.
The number of new messages and new notifications.

If the custom notifications are turned on, the user will have two different signs in the group chats; how many new customised mentions there are and how many messages there are in general.

When the user opens the application the app will automatically show the messages that the person wants to see according to the notification settings.

The application finds automatically the wanted messages.

The user can now concentrate on the important messages. With the new feature he/she doesn’t have to scroll through the all conversation and to try to find the meaningful messages. Also, on the top bar there is a new icon for the notifications which allows the user to find again the latests mentions or search for the older ones.

Fourth: Adding the search icon to the top bar

The search icon is added now on the top bar and the phone icon is removed from the group chat. I made this change because users mentioned in the interviews very often that they didn’t know if the search option even exists in the app. Also, some people wish to have that kind of feature when they thought the app didn’t have it. Now the search icon is more clear and people can use it faster in order to find it messages they want to read.

The final prototype

Here you can watch the video of the high-fidelity prototype. The video is showing the userflow where the user goes to the notification settings of the group of friends and adds customised settings. After that, the video shows how the navigation of new messages works.

Next steps

  • Because of the tight schedule of the bootcamp I had time to test the final prototype only with one user. Testing is always vital so that would have been the very first next step!
  • After testing it would be time to do the improvements to the app according to the test results.
  • Creating more options to customise the notification settings such as “life events”.

--

--

Mirkka Osorio

I’m UX/UI designer. I believe in good UX research, user-centric solutions and teamwork. My porftolio: mirkka-design.com