WhatsApp Redesign Case Study

Darshan Suthar
6 min readAug 31, 2018

--

Alright, let’s start

You know a very old design trend you daily interact with and most used application today call WhatApp. Things should be changed time by time. It actually impactful if you take it for longer.

So I take place to put my thought how WhatsApp can be redesigned for better engagement and easy interactions.

I have started with a logo first. Cause product has only one thing to present behalf of all it’s features and services, that is Logo.

A logo has to be simplified in the sense of most used, features what an app have, users attachments to services what they like to have everyday.

While thinking of a communication platform 3 things you have to care of,

1. Types of chat

2. Ways to chat

3. Cover emotions

By covering all scenarios what matters to a communication application I finalized a below version for WhatsApp.

Finalized Logo Version

I have also made some other versions but this covers communication feel, all features and services as a round shape saying one stop solution itself.

Now its time to focus on how experience can be done to be easier, attractive and clean. So again lets take a paper and pen.

When you are working for a digital world I would suggest to do a paper work first. A paper can only give you a empty Art-Board with free hand to throw your ideas quickly and examine more for best solution. A white board is also preferable.

To make a clean user interface there many things you have to divide in a group and make it easy to reach for quick done.

A below paperwork takes my most time to freeze my thoughts.

Creating different versions for single screen as well. A single screen can have many different possible interactions and ways to present required information to user.

Otherwise if users wont easily predict what actually they looking for than whole your efforts get wasted.

Here I make sure to took best solution over all versions I have made for single screen. That really help me a lot to identify right solution without user testing.

I have my own timeline to get things done in a frame I have choose for. And I am happy to completed this all stuffs in a time I set before.

So now bring you to actual design I have made 😊.

Users always looking for to talk with someone who are available in all chats they have done before and they want to continue for that particular time. So as obvious online conversation should have something to identify. That you can see at right bottom icon in individual conversations pictures.

Some times its difficult to know is that a group conversation or a individual one. And both has a simple picture as that. How would user know about all groups name and all contacts in their phone what they may saved a long back. It should be also differentiated. For group it says itself that conversation has more than one user in above screen. So i have added a reflection border at bottom of the picture what indicates that is group. And it has more than one users in it.

Most popular right check notifier for message sent, deliver and read is a bit irritating when again and again you need to focus out a color of a check and double check status.

Rather than that what if a message says itself about its status. Its very much simple to guess if a message is filled with a background color means a message delivered and read. And only with green border means delivered and with only gray border means sent.

Some kind of animation can give a feel of real application for attachments, recording, reply a message etc.

I want to make some animation for calling screen here. I would love to if I may add it soon 😂 . Anyways lets catch up calling screens with a static animation effects below. A simplicity makes it more beautiful and meaningful too when a user received a call their image takes half of a screen. Before that a less transparent bubbles will keeps coming from left and goes to right to feel that you are calling that person. And once a user receive it a bubbles will goes away and a counter will start instead.

Even you can also go back to chat in between a call. So a last screen shows a audio call button bigger in header saying you are in call with this person.

Have you ever think of why status are not being designed well even after being popular this much today. I hate the most seeing all status in a list currently.

I believe a status message should have some glimpse before actually seeing it. Some status are just a promotionally added what makes user a bit hate to see. A tile view for a status can help over here. A status messages has a row with those users who set it up saying “unread”. Cause a clear visualization and straight forward reach can feel users an app is in control.

All read messages are at the bottom once it shown. And a multiple status message form one user has a group .

What is labeled as a user’s picture with a dashed border outside. A big first tile having plus icon makes user to post something while reviewing other status messages. So its more engaging, more clear and easily predictable.

I always want a theme option in WhatsApp to make it what i want it to be. And to achieve that in a sidebar profile section i have added a theme color option.

As you are seeing a green accent color in whole app is based on a theme color is selected earlier and it’s by default as well. And allows user to make their WhatsApp how they like it to use.

Hope you enjoyed reading this thought process and if you want to look more about this project you can checkout WhatsApp Redesign on Behance .

I would love to see your feedback by press claps button below :)

--

--

No responses yet