top of page

WhatsApp UI Redesign

Project Duration: Jan. 2022 - April 2022

Project Role: UI Designer

I redesigned the UI of popular chatting app WhatsApp for a master's course with three other students. I was the only student who knew how to use Figma, so this project was the first time I was teaching my peers while also working on the project. I quickly took up a leadership role, as much of my team looked to me for questions and help in designing the app. I often led meetings and created our week to week schedules.

BEFORE
Before 2 copy.png
AFTER
Contacts.png
The Problem

We started the process by identifying the current features of the app using various task analyses and user testing of these current features to better understand how users execute the app's current functions.

 

We identified four major issues:

1. Inadequate use of space in many places, often leading to other places being very cluttered.

2. The buttons and icons WhatsApp uses are very inconsistent with mental models in other apps and have very low visibility, making things initially hard to find or in unexpected places.

3. Reduce some of the steps it takes to do some of the core functions.

4. Difficulty managing, accessing, and adding contacts, to both group chats and their personal accounts.

Redesigned Tasks:

1. Adding Contacts

Adding contacts before required users to press the "create new chat/call" button to then press "new contact", because the app lacked a central contacts tab. In our redesign, we have created this contacts tab and streamlined adding contacts to simplify this experience for users.

BEFORE
Add contacts method 2.png
Add Contacts p1.png
Add contacts p2.png
Add contacts p3.png
AFTER
add contact after tree.png
add contact after p1.png
add contact after p2.png
add contact after p3.png

2. Viewing and Editing Contact Names

Viewing and editing contact names was also very difficult both because there were many steps, and the lack of a centralized contacts page. Our centralized contacts page that was created for the last task also simplifies the process of editing and viewing specific contacts.

BEFORE
before tree.png
before pic 1 copy.png
AFTER
after tree.png
after p1.png
after p2.png

3. Sending Multiple Pictures

Users had a difficult time sending multiple pictures in a group chat because of the lack of visibility of buttons and lack of consistency with other apps. We improved this by getting rid of the vertically arranged menu, ability to easily select multiple images, and also show a grid like version of all pictures to easily get a quick view of all photos sent.

BEFORE
before tree.png
before p3.png
before p2.png
before p4.png
before p5 new.png
AFTER
After tree.png
after p1 new.png
after p3.png
after p4.png

4. Inviting Someone Into a Group Chat

Inviting someone to an existing group chat was difficult because by default, only the group leader could add people to the group. In addition, new users did not know to click on the chat name to get to advanced settings to do this. Our redesign has a clear menu button consistent with similar apps, and has simplified the clutter in the advanced settings.

before 3.png
before 2.png
before 1.png
before tree.png
BEFORE
after tree new.png
After p1 new new.png
AFTER
after p2.png
after p3.png

5. Check Who Read Your Message

The function to check who has read your message in a group chat can be executed by swiping on a message or long pressing and clicking the info button. These are one of the many hidden yet very helpful features we wanted to add affordances for.

BEFORE
before tree m1.png
before tree m2.png
before p2.png
before p1.png
AFTER
after tree.png
after p1.png
after p2.png
Final Prototype
bottom of page