Amanda Low UX | WhatsApp Subgroup

Problem

WhatsApp group chats are useful for broadcasting information, however, the larger the group gets, the more simultaneous conversations can become confusing. Designing a subgroup chat feature would help to sort conversation topics so that users are not frustrated by irrelevant information.

I aimed to integrate the new feature seamlessly into the user flow, in line with the existing WhatsApp UI design.

This was Project 4 (Add a Feature) of the Ironhack UX/UI Bootcamp. The ideas for the hypothetical new features were thought up by fellow students. I worked alone on the user research, analysis, prototyping, testing and UI design.

Add a feature

Subgrouping chats by topic in WhatsApp group chats

Research

Experiences

First I interviewed some WhatsApp users on their experiences with group chats. Reasons that users used group chats included: keeping in touch with friends and family, working on university projects, keeping up with hobbies e.g. a dance class, organising vacations, and organising events e.g. a wine tasting event.

"I wake up to 70 notifications on my phone, and people expect you to read everything in the chat."

- User Interview

Pain Points

Regardless of the purpose of the group, all users had one pain point in common: Irrelevant information. Users receive mobile notifications for messages received, yet when they opened the group chat they often received information that was not relevant to them. As a result, they muted notifications or simply stopped reading the group chat.

Desires

Besides creating a subgroup chat, other desires users had included: being able to highlight important information within the main group, making it easier to search chats, and the ability to connect group chat appointments to a Gmail calendar.

Subgroup Trigger

User Flow

The next step was to define where in the user flow the trigger for the subgroup should be. The new feature should be integrated seamlessly into the existing user flow, and be easy to find - catering to the wide user demographic. Ideas I had after speaking to users were:

Adding a subgroup button within the main group chat
Using AI to suggest that certain messages should be moved to a group chat
Forwarding messages from the main chat to a subgroup

I then tested these ideas with a lo-fi prototype and it became clear that the most intuitive for users was option 3. Users felt that forwarding a message was the easiest option to comprehend as it was already part of their user flow.

Long-Press Gesture

Long-pressing on any chat message will bring up a menu, with options to star, reply, forward, copy, delete a message and more. A known feature in other messaging apps such as Facebook Messenger and Telegram, using this as a subgroup trigger would require the least barrier to entry for the user.

Subgroup Visibility

User Flow

After selecting “Forward” from the menu, the next page is a list of suggested contacts to send the message to. Since the subgroup could only contain members from the main group, the “Create Subgroup” option had to be on this page.

As my research showed that users would rather be completely excluded from certain conversations than have to receive notifications, I also included the option to choose who from the main group would be included in the subgroup. Users may choose “Select All” or select people individually.

As it was a new feature, I first considered placing the "Create Subgroup" button somewhere more prominent, with a new design. However realising that this feature should eventually become a normal part of the menu, I situated it as an option to the already existing "My Status" button. Inspired by the “My Status” icon, and an old-school desktop folder icon, I created a hybrid subgroup icon.

Subgroup Icon

Title Format & Subgroup Bar

Main Group Chat Visibility

Once the recipients are selected and a subgroup title is chosen, the messages are forwarded and the subgroup is created. The subgroup chat has the title format: “Main Chat Title”/ "Subgroup Chat Title” - as a navigation guide for the users. User research indicated that users wanted the messaging experience of the subgroup to be identical to the main group, so rather than changing the font or background colour, only the page header appears changed.

Once you navigate back to the main group, the existence of a subgroup should be visible, as users indicated that they wanted to be able to see which subgroup topics existed - should they want to be invited later. In order to make it intuitive, I took inspiration from the WhatsApp and Facebook Messenger contacts lists, which uses the group profile picture as the placeholder.

The subgroup “bar” would be scrollable from left to right, should multiple subgroups exist, and would disappear on scrolling, to not interrupt the conversation.

Chat List Visibility

Once you navigate back to the main chat list, the existence of a subgroup should also be visible there. I prototyped adding this as another line entry in the chat list, however, users found this messy and confusing, as many already had a long list of personal and group chats.

Inspired by a “Group Player” icon where user icons are stacked on top of each other, I stacked the group and subgroup profile pictures, indicating that a subgroup conversation exists without taking up additional space.

UI

The brief for the Hi-fi prototype was a pixel-perfect clone of the WhatsApp UI, and manually recreating all icons. This required analysing the atomic design - breaking down the common colours, shapes, symbols, and formats. I soon realised that what I thought would be a simple clone, would take a bit more time to create. Mobile apps, and in particular messaging apps, pack in a lot of information and detail onto a small screen.

Stacked Group Icon

Takeaways

As a frequently used, well-known app, many people have strong opinions on WhatsApp, which became apparent during user testing. Had there been the timeframe to find people who had not already used WhatsApp, it would have been interesting to compare the different experiences.

Given more time on this project, I would have found a way to indicate in the chat list different notification symbols for both messages from the main group chat, and the subgroup chat. Perhaps this could have been indicated by a new message symbol of a different colour.