WhatsApp Overview
WhatApp is a popular communication tool across the globe with more than 2 billion users. It is a free messaging service used to help people all over the world stay connected, with secure end to end encryption.
For this 2-week sprint, our team was tasked with finding enhancements to how people interact and communicate with each other both personally and professionally through the WhatsApp platform.
TIMELINE
2 weeks (2020)
TYPE
General Assembly group project
TEAM
4 UX Designers
ROLE
Research, persona, user flows,
sketching, usability testing
TOOLS
Figma, Whimsical
THE CHALLENGE
How might we enhance communication and collaboration among users while creating an environment that promotes work-life boundaries?
Solution Preview
WhatsApp Web
Mobile
Research & Insights
Online Surveys
We created an online survey for WhatsApp users, which received a total of 41 responses. Some of the insights found were:
Remote Interviews
We then conducted 5 interviews to gain a deeper understanding of our user’s pain points. From our synthesis we were able to draw the following insights:
1. Difficulty in identifying chats: Users complained that the group chats and individual chats are too cluttered, hard to access quickly and easy to misidentify.
2. Lack of segregation between work and personal life: Users found it difficult to relax after work as work messages can still be received after hours (no offline version). Meanwhile at work personal chats pop-up during screen shares.
3. Lack of easy collaboration tools: Group decision making/event scheduling is always a difficult task as chats are often ignored or drag on for far too long just to come to a consensus.
“I have many group chats with similar people in them and this gets confusing fast.”
“I just want a platform that is easy to use. I don’t want to have to struggle or embarrass myself just for the sake of sending a message.”
Early Insights Not Pursued
After gathering user insights, we synthesized the data using affinity mapping. This helped us to see the underlying themes and patterns that were emerging. Two big pain points that we saw recurring were as below:
Users did not like that WhatsApp required their phone numbers to access both the app and web platform
Users wanted the ability to make video calls from WhatsApp web rather than through Facebook Rooms
The Reality Check
We quickly realized that these two early findings were either:
1) Dotting the lines of changing the business model (phone number) or;
2) Changing the current business strategy of the Company (video call via Facebook Rooms)
This was a big limitation for us as we understood that these pain points came with their own constraints, as they would in the real world, and that there was likely a reason why WhatsApp had yet to address these issues or addressed it in the manner that they did.
We also thought it was extremely important to stay within the existing brand culture.
As a result, we had to move away from these two points and progress with the three findings mentioned above.
User persona
Based on all of our research, we were then able to create our primary persona, Natalie. This allowed us to understand our users better, so that we may keep them and their needs top of mind when designing.
Journey Map
To understand a bit of Natalie’s user experience, I created a journey map to depict her situation.
Natalie’s journey map helped me to see exactly how our users were interacting/ hoping to interact with the application and where exactly their frustrations began from start to finish. This was extremely important to keep in mind when we began our iteration process!
User flows
As we were working with 2 different platforms, we created one for web and a separate one for mobile. By understanding the flows, we were able to organize our thoughts and have a clearer vision of what our process might be when we were completing our sketches and iterations.
Key Features
After understanding our user, their experiences and frustrations we then made a list of all the potential features that we could pursue, and shortlisted it to the following due to prioritization.
Personal and work tabs with muting capabilities
Dedicated space for both group and single chats
Colour coded group chats
Polls for group chats (voting)
Calendar event links
Initial Sketches
To promote an iterative design process, we started off by drawing out sketches of our screens. This allowed us to look at the big picture and to quickly explore and test various concept ideas.
Mid-fidelity Wireframes
Based on our sketches and first rounds of testing, we were then able to create mid-fidelity wireframes. We performed additional rounds of usability testing, which then allowed us to further iterate before we hit the high-fidelity work.
Iterations
In order to validate our design decisions, we performed 3 rounds of usability testing to ensure that the solutions that we created, actually met our user’s needs and solved their pain points.
Feedback for landing page: Users didn't appreciate that they lost access to their message previews and felt that the icons were much too large, resulting in more scrolling.
Feedback for polls/ invites: Users did not like how cluttered the screen real estate felt, nor did they understand what this tab was for. They also felt it was extremely off from what they would expect to see on iOS.
Feedback for muting icon: Users did not find the muting icon intuitive and wanted the feature to be as simple as possible. They also wanted personal chats to be the default tab.
Final Solution
THE SOLUTION
View Mobile Prototype →
To interact with the prototype:
1) Click anywhere on the device screen then use the right (or left) keyboard arrows to see next screen OR;
2) Click anywhere on the device screen and follow the blue links to guide you to the next screen.
THE SOLUTION
View Web Prototype →
To interact with the prototype:
1) Click anywhere on the device screen then use the right (or left) keyboard arrows to see next screen OR;
2) Click anywhere on the web screen and follow the blue links to guide you to the next screen.
Feature Recap
Next Steps
Perform more usability testing on web and mobile
Deep dive into colour accessibility and customization for the group chats
Experiment with stronger affordances for the muting function
Explore softening the experience of the export to Facebook rooms when performing a video call
Retrospect
As my first design group project, this experience was extremely invaluable and has taught me so much about collaboration, roadblocks, and the iterative design process. Some of my biggest learnings were:
1) Do not get attached to your ideas or designs! We started off thinking that we would be heading in a certain direction with the project, but quickly discovered this would change.
2) There will be times where you will need to pivot quickly but should always embrace the iterative process as it only makes design work better.
3) Sometimes you will encounter unsolvable problems that cannot be changed, and that is okay, but that such items should get raised as business problems.