WhatsApp Redesign

Overview

WhatsApp is a cross-platform messaging app that allows users to send text messages and voice messages, make voice and video calls, and share images, documents, user locations, and other media. I personally use WhatsApp to communicate with a lot of my international friends. However, I made a lot of errors when I first started using WhatsApp, but I just adapted over time until I no longer made those errors.

design problem

Some design problems with the Landing Page that I noticed after using WhatsApp for 3 years.

• Too many navigations and not all of them are even used i.e. “camera”, “edit”

• Landing page is overwhelming i.e. top with “edit”, edit icon, and “new group”

  • Two separate buttons to switch between calls and chats —> another step for the user

  • Confusion between the two edit buttons/settings

  • Too many navigations —> Not all of them are even used i.e. “camera”, “edit”

• Inconsistent colors with WhatsApp

methodology

After establishing the core issues of WhatsApp, I took out a piece of paper to get some initial sketches on how the redesign of the landing page could look like. Then, I began designing the mid to high fidelity prototypes.

iteration 1-2:

Sketches, sketches, sketches! After sketching out a couple of wireframes, I began creating the mid-fidelity screens on Figma. I had a rough idea of how the redesign could look. In this prototype, you can see the “Edit” coupled with the edit icon, small and basic Roboto font, and incomplete Edit Overlay.

iteration 3:

Moving forward, I created high-fidelity prototypes with cleaner designs, which allows for more intuitive user flows. First I changed the text to Helvetica Neue and added more detail to the landing page screen. It went from the landing page of the Chats to a landing page with a switch button for both messages and calls. In addition, I also removed the “Edit” text and used the icon to represent any new chats, groups, contacts, or a potential photo/video capture.

• Switch between the calls and chats screens by using a switch button. This simplifies the landing page and creates a cleaner look.

• Bottom navigation bar is simplified from 5 to only 3 buttons: status, chats, and settings.

• Edit Overlay contains new call, new chat, new group, new contact, and camera options.

• Changed the color for read checkmarks, unread messages, edit icon, and information icon to green

  • This is more consistent with the WhatsApp feel

Style guide

final solution — a minimalist and more intuitive look

As a lover for dark mode, I also created a dark mode of this landing page redesign. :)