WhatsApp Re-Design — UI/UX Case Study
Introduction
Hello! My name is Nerissa Arviana Sukmananda, a UI/UX enthusiast. I’m currently participating in UI/UX Product Design held by Zenius. I hope this article can describe my team and I have worked on process when solving a problem in an application. Hope you enjoy this!
Background
About WhatsApp
WhatsApp is an application for sending text, voice messages, making voice and video calls, sharing pictures, documents and other media. More than 2 billion people in over 180 countries use WhatsApp to stay in touch with friends and family, anytime and anywhere. Currently, WhatsApp has around 5 billion downloads on the Google Play Store with approximately 172 million reviews which is quite a lot compared to similar apps.
Problems
WhatsApp is a widely used messaging application. However, there is a decrease in rating due to user difficulties in using some of the features. Users have difficulty pinning messages that cannot be more than 3 messages. Then the user also has to search for messages manually or enter keywords. Lastly, users find it difficult to copy important messages from WhatsApp to other notes apps. With these issues in mind, my focus has been on improving the user experience of WhatsApp by redesigning its user interface and incorporating new features.
Goals
Based on the problems above, the following is the purpose of redesigning the WhatsApp, including:
- Knowing the user’s needs in using Whatsapp
- Understand the behavior of users who have difficulty in
using WhatsApp - Knowing the comfort that the user wants in
using WhatsApp
Role in the team
During the WhatsApp redesign process, I collaborated with 4 other team members, namely:
- Asif Mahardhika Ramadan
- Lisa Agustina
- Siti Latifah
- Putri Zalsabila.K
In creating design solutions, we have the same responsibilities as UX researchers such as:
- Doing user research,
- Generating solution concepts, and
- Perform usability testing,
However, I am responsible for UI Design work such as creating user flows, wireframes, user interface (high-fidelity design), and prototyping. Previously, all the team members did their own UI Design work, but in the end it was my design that was selected.
Design Process
In this project we use the Design Thinking approach to solve existing problems. Using this method can help us understand well about user needs. The following are the steps taken in the design thinking process:
Empathize
This initial process is the stage for finding problems with WhatsApp. Here are the target users of WhatsApp:
- Active users of the WhatsApp application
- 16–40 years old
- Active online on WhatsApp with more than 4 hours a day
- Often use WhatsApp to send messages
Explore and understand the user experience when using WhatsApp. In addition, to collect data related to constraints or problems experienced by users when using the WhatsApp application. The type of data collected is qualitative data obtained through online surveys with respondents.
User Persona
Define
The next stage in the define stage is that I make observations by making affinity diagram and user journey maps to look for opportunities that can be applied to the product.
Affinity Diagram
The insights obtained from the results above are represented using an affinity diagram. Using the affinity diagram technique can help us discover embedded thought patterns by sorting and grouping information.
User Journey Maps
After getting some information from before, the next step is to create a user journey map model. The user journey map is a visualization of the process that the user goes through in reaching the destination.
Defining the Problems
Based on the results of the analysis using affinity diagrams and user journey maps, 3 main problems faced by users were found. The 3 main problems are:
- User have difficulty pinning messages due to more than 3 unpinnable chats.
- User have difficulty finding messages according to the date of the message, so they have to search manually or scroll it.
- Users feel uncomfortable and make it difficult to save notes in chat rooms.
Ideate
At this stage I create user flows, information architecture and wireframes.
User Flow
I created a user flow to describe the journey a user must complete when searching for messages by date, creating a new note, and using pin chat.
Information Architecture (IA)
After I created the user flow, the next step was to create an information architecture to make the flow clearer.
Wireframe
I started to create wireframe process from low fidelity to high fidelity design. I visualize concepts into wireframes with low accuracy. Low-fidelity is a layout that can assist designers in presenting information in an interface.
Design System
Before developing it into a UI design, I first decided on colors, typography, iconography, and made important components such as buttons and cards with their respective variants. The design system will continue to evolve along with the user interface design process.
High Fidelity
Here’s a High-fidelity I’ve created based on a previous wireframe.
Prototype
At this stage we implement the ideas that have been made into a more interactive interface. This aims to find out how the product can run according to the expected flow. See the prototype below:
Testing
At this stage we carried out Usability Testing with 5 respondents. We use in-depth interviews to explore how user feedback can be more in-depth. This UT was carried out to evaluate the new design of searching messages by date, making notes, and unlimited pin chats.
Participants
Overall Evaluation
Overall, users feel that the newly added features are quite convenient and useful, it’s just that more adaptation is needed for the application.
Design Feedback
According to the test results above, I have to make some improvements. However, due to time constraints, improvements will be made at a later time.
Conclusion
In the process of working on this project, it can be concluded that:
- All participants often use the WhatsApp application every day to send messages, make calls, and send files.
- Reasons to use WhatsApp compared to other applications such as telegram and Twitter. Because on WhatsApp the features are more diverse and according to needs and easy to access.
- There are users who say that the message search feature according to date is less important because people usually forget the date they chatted automatically.
- There is one user who does not understand the intent and purpose of the line button at the bottom when making notes.
- The average participant said that all the features developed from scenarios 1–3 were all very important and necessary for the user.
- On average, all participants gave a score for each scenario, namely a rate of 6–7.
Closing
So that’s the end of this project. The writing and design solutions in this application are far from perfect. During this research process, I learned a lot from users. Thanks to the team for working together.
To the readers, I also want to thank you for reading my article. Hopefully this can benefit everyone. I’m very open to any feedback.
Thank You!
Nerissa Arviana Sukmananda ❤
