Case Study

Description

WhatsApp is a worldwide messaging app. Users use WhatsApp to stay connected with family and friends.

Problem statement

WhatsApp wants to add a way of organizing the chats tab to create a better user experience. They want a way to help the user have an easier time finding groups and chats that are related to one another.

Background

WhatsApp is a free service which provides the user with a simple way to send messages and make phone calls all over the world. WhatsApp began as an alternative to SMS. They now support a wide variety of services. These include: Sending and receiving – text, photos, videos, documents, and location. Additionally, users can voice call and video call. WhatsApp works across many platforms including IOS, Android and Web.

Role I played

UX & UI designer

Constraints

1. Time constraint – this project timeline was limited to a month.
2. WhatsApp already exists and so there is a need to follow the native app guidelines.‍

First, I learned about the problem and user needs

User interviews

For the user interviews I wanted to better understand users experience while currently navigating WhatsApp. This would allow me to better understand if there were issues with the current system and what I could do to better the experience.

Research goal

Research questions

We want to know if users find they want to organize their chats beyond what WhatsApp now offers so that we can understand how to best help users navigate WhatsApp more easily.

Understand users thought process in looking for chats.
How often do people want to find chats and groups that are in the same overarching category.
Understand what makes users prefer to use chats vs. group chats.
Determine if group chats are enough of an organization.

Affinity map

Creating the affinity map, I learned about many important pains and needs on the user's side. The main learnings were:
‍
1. The user feels that the chat is messy and disorganized.
2. Users want a way to organize chats tab.
3. Users value visual organization.

For original quality click here

Empathy map

For original quality click here

Persona

After compiling the empathy map, I was able to create a persona based on that information. I later used this persona to create a solution based on the users' needs, motivations and pain points.

During my research the main pain points were:
‍
1. A feeling that the chat tab is frustrating to navigate. Users want a way to organize the chats tab.
2. Users want an easier way to find chats.
‍
These two pain points were my focus on this project. ‍‍

For original quality click here

Then, I proceeded to a solution

User flow

The user has two main tasks they want to accomplish:
‍
1. Locating a certain chat within the application in order to navigate the app.
2. Organizing the chats tab.
‍
I created a user flow that provided the users two options. Either click through the new tag tab or go to the chat itself and add a tag from there.

For original quality click here

Sketches

I started out by hand sketching different layout options for the screens I wanted to design. This is a more freeform way of exploring different design decisions quickly without committing resources to a single design decision, so that I can find the solution that works best.

CHAT TAB
1. Option 1 - tag appears on the right like pins.
2. Option 2 - tag appears on image.
3. Option 3 - tag appears below the chat with name and tag.

TAG TAB
In this version the tag tab is full, Similar to the communities tab. There is an option to open a new tag. There are also tags that show two chats that are there with an option to see more.

NEW TAG FIRST PAGE
In this screen the users have the option to add a name, color and description to your tag.

NEW TAG CONTINUED
In this screen users can add personal chats or group chats to the tag. Users can also see what chats are already in the tag.

TAG INFO PAGE
This screen shows the tag when it's completed. This page shows the name of the tag, chats in tab and options to add chats to tag and a way to delete tag.

CHAT INFO PAGE, TAG UNASSIGNED
This shows the chat info page without a tag. Further down in the options there is a place to add a tag.

ADD CHATS IN TAG
Here you can create a tag from within the chat itself. This means the user doesn't need to assign a chat.

CHAT INFO PAGE WITH TAG
This shows a chat already associated with a tag. It shows how many chats are in tag and an option to navigate to the tag.

For original quality click images

High fidelity screens

Now that I had my wireframes and style tile done, I proceeded to build the high-fidelity screens. These screens helped me visualize all the decisions coming together.

Chat tab with tags

Tag tab

Tag info page

Tag assigned in chat

For original quality click here For original quality click here For original quality click here For original quality click here

Prototype

Usability tests

I asked users to complete two tasks. One being organizing the chats tab and the other being finding a way to combine chats in some way. These tasks allowed the users to discover the new feature and play around with it.
The goals of this usability test were:
1. Explore if feature creates a better experience for users.
2. Improve user experience based on results.
3. Identify pain points throughout the process.

Affinity map from usability tests

The usability tests proved successful. A few minor elements were noted that might need modifications.

A few of the insights were:
‍
1. Users liked the feature and wanted to use it.
2. Users found both paths to be simple to use.
3. There was a split opinion on if the icon was sufficient instead of the word 'Tag'.

For original quality click here

Iterations

After conducting usability tests, I discovered the design and layout issues users faced when completing the task of navigating the site. This led me to correct those issues in order to create a better user experience. Below are some of the main iterations made.

Before

After

Explanation

PROBLEM
New feature wasn't noticeable when opening app.
‍SOLUTION
Added red circle next to tag tab in order to bring attention to it.

PROBLEM
Users can only choose from personal chats or group chats.
‍SOLUTION
Added option to choose from all chats.

PROBLEM
Tag automatically appeared in chat tab with no option to hide it.
‍‍SOLUTION
Added option to hide tag in tag info page.

For original quality click images

Conclusions

What I learned

Users enjoy being able to organize their systems in a way that helps them use the tool more productively.
Users appreciate a simple straightforward experience that is easy to navigate.

What I think went well

I was able to add a feature to an existing tool in a way that fits with the current design decisions in a seamless way.
Users really enjoyed the tool and wanted to start using it in their lives. This showed me that the solution really spoke to them.

Ideally, time constraints aside I would have liked to

Explore the search function. This came up in the interviews as a problem that needed solving as well.
Create more screens to help test and improve the user experience.
Run a few more rounds of testing and iterations.

Case Study

Description

Problem statement

Background

Role I played

Constraints

First, I learned about the problem and user needs

User interviews

Research goal

Research questions

Affinity map

Empathy map

Persona

Then, I proceeded to a solution

User flow

Sketches

CHAT TAB1. Option 1 - tag appears on the right like pins.2. Option 2 - tag appears on image.3. Option 3 - tag appears below the chat with name and tag.

TAG TAB In this version the tag tab is full, Similar to the communities tab. There is an option to open a new tag. There are also tags that show two chats that are there with an option to see more.

NEW TAG FIRST PAGEIn this screen the users have the option to add a name, color and description to your tag.

NEW TAG CONTINUEDIn this screen users can add personal chats or group chats to the tag. Users can also see what chats are already in the tag.

TAG INFO PAGEThis screen shows the tag when it's completed. This page shows the name of the tag, chats in tab and options to add chats to tag and a way to delete tag.

CHAT INFO PAGE, TAG UNASSIGNEDThis shows the chat info page without a tag. Further down in the options there is a place to add a tag.

ADD CHATS IN TAGHere you can create a tag from within the chat itself. This means the user doesn't need to assign a chat.

CHAT INFO PAGE WITH TAGThis shows a chat already associated with a tag. It shows how many chats are in tag and an option to navigate to the tag.

High fidelity screens

Chat tab with tags

Tag tab

Tag info page

Tag assigned in chat

Prototype

Usability tests

Affinity map from usability tests

Iterations

Before

After

Explanation

Conclusions

What I learned

What I think went well

Ideally, time constraints aside I would have liked to

CHAT TAB
1. Option 1 - tag appears on the right like pins.
2. Option 2 - tag appears on image.
3. Option 3 - tag appears below the chat with name and tag.

TAG TAB
In this version the tag tab is full, Similar to the communities tab. There is an option to open a new tag. There are also tags that show two chats that are there with an option to see more.

NEW TAG FIRST PAGE
In this screen the users have the option to add a name, color and description to your tag.

NEW TAG CONTINUED
In this screen users can add personal chats or group chats to the tag. Users can also see what chats are already in the tag.

TAG INFO PAGE
This screen shows the tag when it's completed. This page shows the name of the tag, chats in tab and options to add chats to tag and a way to delete tag.

CHAT INFO PAGE, TAG UNASSIGNED
This shows the chat info page without a tag. Further down in the options there is a place to add a tag.

ADD CHATS IN TAG
Here you can create a tag from within the chat itself. This means the user doesn't need to assign a chat.

CHAT INFO PAGE WITH TAG
This shows a chat already associated with a tag. It shows how many chats are in tag and an option to navigate to the tag.