WhatsApp is a worldwide messaging app. Users use WhatsApp to stay connected with family and friends.
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.
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.
UX & UI designer
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.
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.
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.
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.
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.
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.
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.
For original quality click images
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.
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.
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'.
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.
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