UI/UX Case Study — Redesign WhatsApp Updates Page
Hello, everyone.
My name is Safira Larasati, I am a student who currently really likes the UI/UX design field. After learning a lot about UI/UX design for about three months through many sources including following e-learning on MySkill, I finally decided to make my first case study. I am very happy to show you a case study about redesigning the WhatsApp Updates Page.
INTRODUCTION
About WhatsApp
WhatsApp is a free cross-platform short messaging application that allows users to send messages to anyone around the world without using credit. However, WhatsApp is not only an application for exchanging messages but also allows users to make a call, exchange pictures, videos, documents, etc., and share everyday stories with other people. At the beginning of 2023, WhatsApp users will reach 112 million people in Indonesia and 2.45 billion users worldwide.
Overview
In September 2023, WhatsApp launched its newest feature, namely WhatsApp Channel, which all WhatsApp users can join, which is optional. There are various kinds of channels, including verified figures or organizations, such as: Forbes, Ministry of Education and Culture, etc. which allows users who follow them to get up-to-date information according to the channels they follow. This feature is on the same page as WhatsApp Status, namely the “updates” page. Previously, the “updates” page was a “status” page that only focused on the WhatsApp Status feature, but not anymore. Due to the combination of two features on one page, (existing features and the newest features) the appearance of the previous features will definitely adjust to the updates made.
Initial Problems
People around me think that this feature is confusing in terms of its use and purpose. After I personally explored the updates provided by WhatsApp, I felt a little confused considering that this was a new feature. On Playstore, there are quite a lot of users who have given their opinions on the updates made by WhatsApp.
From the reviews I found on Playstore, it can be seen that the majority of users felt difficulties with the WhatsApp update, such as the loss of the search feature on the WhatsApp Status page, difficulty seeing muted statuses, an ineffective status scrolling system, the elimination of the Status search feature.
Starting from the problems I found regarding updating WhatsApp to the latest version, I intend to improvise the “updates” page which is a benchmark for problems with the aim of providing a better experience for users in terms of efficiency and usability. To improvise on WhatsApp, I needed a framework to guide my research journey so that I wouldn’t be confused by every little detail that was carried out. I use the Design Thinking framework because this framework is felt to be effective in producing a detailed process and explanation of the stages, namely empathy, define, ideation, prototype, and test.
Design Process
Empathize
This stage allows us to understand user difficulties, problems, concerns, and motivations for a product. At this stage, the things I did were Research plans and research Guidelines, and Conducting Research for the WhatsApp application.
a. Research Plan
Background & Objective
After seeing the initial problems, I have tried to find opportunities to overcome these problems that are oriented towards what users feel and what users expect, and in line with that, I focused on the following things:
- understand user habits when using WhatsApp
- understand the user experience when using WhatsApp
- understand user preferences regarding the appearance of the “Updates” page on WhatsApp
Key Information Areas
Based on the research objectives, the Key Information Areas in this research are:
- User Profile
- Purpose of using WhatsApp — WhatsApp Status — WhatsApp Channel
- Frequency of use of WhatsApp — WhatsApp Status — WhatsApp Channel
- Things users like & problems with WhatsApp — WhatsApp Status — WhatsApp Channel
- Expectations of the Updates Page on WhatsApp
Methodology
This research has used a qualitative approach with the in-depth-interview (IDI) method to understand more deeply and clearly user behavior, obstacles faced by users, user experience, user motivation, and user expectations regarding the “updates” page on WhatsApp.
Sample Qualification
- User Active WhatsApp
- Male/Female
- Nationwide
- 18–35
Data Collection Tools
Data collection is collecting and evaluating information or data from multiple sources to find answers to research problems, answer questions, evaluate outcomes, and forecast trends and probabilities. There are many tools that can be used to collect data, such as surveys, observations, interviews, etc.
Because this research has used the IDI method, the tools used to collect data coming from the discussion guidelines are:
- Respondent Identity
- Main Topics
- Closing
Conducting the Research
Before actually diving directly into research, there are several things that must be prepared for the smooth running of the research:
- recruiting respondents
I recruited respondents using the guerilla technique because this technique was quite easy to do considering I was in an environment with quite diverse individual identities.
2. Compiling a discussion guide
3. Practicing how to conduct qualitative research session
4. Carrying out technical preparations
Full Discussion Guide and Research Result (link)
Define
Define is the process of collecting data, analyzing data, and synthesizing data from findings in the Empathize stage. The things I have done at this stage are affinity diagrams, user persona Problem Statements, user journey maps, and How Might We.
a. Affinity Diagram
After getting a lot of data in the empathize stage, in the second stage I grouped the data using affinity diagrams. This aims to focus the findings into more specific forms such as user pain points and insights.
b. Problem Statement
From the feedback given by users regarding the latest WhatsApp update, the following problem statement:
Old users or active WhatsApp users want to interact with other people by viewing contact statuses but users are confused by the appearance of the Updates page (previously the status page) of the latest WhatsApp which also contains a new feature, namely WhatsApp Channel. This appearance change makes users confused by several changes made by WhatsApp, for example, users have difficulty finding muted statuses.
c. User Persona
The purpose of creating a user persona is to find out information about how users use a digital product, what their habits are, the pain points they face so that I can have an idea of what things can be improved about a digital product.
d. User Journey Map
User Journey Map is a strategic approach that can be used to find concerns faced by users and explore potential ideas to help create context related to user expectations.
e. How Might We
From the pain points that have been obtained, I created “How Might We” to find out possibilities that can be done to improve the user experience regarding the updates page on WhatsApp.
How Might We is a technique used to solve a problem by thinking as creatively and innovatively as possible. This is How Might We from the pain points that have been obtained:
Ideate
This stage is the brainstorming stage to explore as many solutions as possible to the problems that have been obtained by evaluating several ways that can be done. There are several things that are done at this stage, such as user flow, information architecture, and crazy 8s.
a. User Flow
User flow refers to the steps a user can take to carry out a function or feature. User flow is created to create a good flow and experience for users.
This is the user flow I created for the updates page. It starts when the user accesses the page until the user explores the two features in it, namely WA Status and WA Channel.
b. Information Architecture
Information Architecture (IA) is a method that can be used to organize information that will be displayed to users when they use digital products. IA is used to determine the priority of content that needs to be displayed and to create an information system that fits the required context.
c. Crazy 8s
Crazy 8 is a method that can be used to express as many ideas as possible in a short time. This aims to express all ideas without limitations no matter how crazy they are.
Prototype
This is the stage where we start to create solutions to problems that have been solved in the form of product designs. This stage aims to avoid losses if it turns out that the product does not match the user’s needs. At this stage, several things are done: making a wireframe, making a design system, making a hi-fi design, and a prototype.
a. Wireframe
b. Design system
c. High fidelity design
d. Prototype
Test
This stage aims to test the feasibility of the product directly with users to find out things that still need to be improved before the product is actually launched. The method used in this test is usability testing with guerilla testing technique.
a. Task given
Task 1: See the status of each type of status:
- My status
- Recent Updates (Mom)
- Muted Updates (Ria)
Task 2: Follow the channels named BMKG and Kemenkes RI
b. Result
3: user can perform tasks quickly and with no trouble
2: user can perform tasks, but has some struggles
1: user can’t perform the task
c. Summary insight
- By grouping each feature, users feel more organized, but users also feel that changes like this will require a little effort every time they want to see updates from status or channel. This is because every time user opens WhatsApp, the WhatsApp Status and WhatsApp Channel displays will return to their initial position in the form of a dropdown.
- Users feel that the channel display will be effective if it is placed at the top as in the design because it will be more neatly arranged but long channel names will be cut off.
What I learned
Through this case study, I learned many things, such as I have to take a better approach with respondents when conducting interviews, I have to ask general questions and dig as deeply as possible to get as detailed an answer as possible, and I have to make the best use of my time so that projects that have been carried out do not lose direction.
I realize that this case study still has many flaws and I will be very open and appreciate various constructive opinions, criticism, or suggestions.
Thank You 😊
