WhatsApp — App unsolicited redesign
UX case study.
WhatsApp Messenger is the most famous cross-platform messaging service released in 2009, now owned by Facebook. It allows users to send text and voice messages, make voice and video calls, and share images, documents, user locations and other media.
The aim behind this WhatsApp redesign is not to completely change the UI/UX, because the app works quite well. The main focus is to improve the overall flow and experience of the app, with particular attention for the iOS version.
Research
The identifying colour of WhatsApp is green, but the Android version and the desktop version presents two different shades of green. On the other side, the iOS version doesn’t present green at all instead, it uses the standard blue that you can see in most of the native apps.
What can be improved in WhatsApp?
Below and above the navigation bar, there are different buttons: edit, new chat, create a new group and create a broadcast list. Too many buttons close to each other that can be tapped by mistake, generating frustration.
The tab bar represents the key point of this research:
- According to Apple human interface guidelines, the pages in the tab bar should be ordered by importance. The first page is Status that, of course, cannot be considered as the main feature of WhatsApp.
- Did you know that WhatsApp has a Camera tab? Well, because most of the users didn’t know about its existence. The ones that noticed it says that they were frustrated because sometimes they press the camera by mistake.
- The contact tab is not present anymore. You can search for contacts through the search bar or tapping the new chat button, but a contact tab is something that users expect to have in a chat messaging app.
Status is a feature similar to the stories you can find on Snapchat, Instagram and Facebook. But this function is not so popular on WhatsApp, used by only a small percentage of users. The main reason for this small interest by the users is because this feature is not so visible.
The redesign process
First of all this redesign uses only one identifying colour, a specific green, that should be used also for the Android and desktop version of WhatsApp, to reinforce the consistency between the different operating systems. Also, the icons and the modal views are updated to the new iOS 13 style.
Chat
The redesign presents a new clean and minimal look. Starting from the navigation bar, there is a Plus button that let the user create a new group or a broadcast list, instead of the two buttons above the search bar that you find in the actual version of the app.
In the Chat tab, you can see if a person updated its status, presenting a green circle, and you can see it by tapping on its photo. This feature is similar to the Instagram/Facebook ones, so it creates a consistent connection between these apps.
Tab bar
The icons in the tab bar are now ordered by importance, following the Human Interface Guidelines: first Chats, followed by Calls, People and Settings. As you can see, the Camera tab is no longer available.
People
This is a completely new tab. Here you can update your status adding photos or texts, see the recent updates from your contacts and browse the contact list that actually is no longer present in the iOS app. So basically People merges the most important features from contacts and status in a single place.
Quick actions
The 3D Touch/Haptic Touch is a feature that speeds up the workflow of the apps. But right now WhatsApp doesn’t use this feature in the best possible way. In this redesign, by pressing and holding on a chat a quick actions menu will appear with different options: mark a message as unread, pin the chat, archive it or delete it. This feature is already available in WhatsApp but actually it makes things slower, so it’s almost useless.
Dark mode
Dark mode has finally arrived in iOS 13. Dark Mode puts the focus on the content areas of your interface, allowing that content to stand out while the surrounding UI recedes into the background. So WhatsApp dark mode presents a clear interface, with a different less saturated green to not stress the eyes during night times and ensuring that the content remains comfortably legible.
App design on Behance.
