Deconstructing WhatsApp

Arushi Singh
Bootcamp
Published in
5 min readDec 20, 2020

--

WhatsApp is to India what WeChat is to China — the preferred mode of communication, among many other things. About a decade ago, my home country of billions was introduced to the world of mobile computing, with more affordable smartphone handsets in the market every year, and internet plans becoming more affordable in tandem. Since then, WhatsApp became the preferred communication choice because it was free (in the communication sense), easy to use and met most of the communication needs that cut across generations and classes in the population. We share jokes, send good morning messages, share news, and pretty much everything under the roof is shared on WhatsApp. While folks might argue of harms caused by some of it, we can’t deny how important this app is across all the walks of life.

During my time at Microsoft, India I led the research for building productivity apps for small businesses. I met a boutique owner who used WhatsApp to share designs with their clients. I met a candle maker who shares his latest product stocks to his customers. I also met a salesman who tracked his team’s progress on daily tasks on WhatsApp and he would look at the “blue tick” on his message to check who saw his message and who didn’t. I was impressed by how versatile WhatsApp was and the various “jugaad” (frugal innovation) ways in which small businesses were using the app. Below are some design patterns I identified which might contribute to its success –

Keep it simple

WhatsApp does what it promises to do — Fast and simple messaging. The landing page of the app is a laundry list of your messages. The primary navigation on the app is very material design. There are three primary tabs — Chats, Status and Calls. Status is a new addition because it seems to be a popular way to increasing engagement among all facebook owned social media apps— instagram, facebook, messenger and WhatsApp.

Ironically, simple products often have a lot more complexity in the design process to arrive at a simple solution. Simple products work as expected and make it very easy for a user to learn them.

Demonstration of how the tab on the landing page work on WhatsApp.

Keep it contextual

Designing for a mobile screen is tricky. As a designer one often has to do a delicate tightrope walk to accommodate features important to the user and those that make sense to the business goals. To include different types of information on on a small screen, makes this even more challenging. It is helpful in such scenarios, to divide the information on the screen such that it is well grouped and contextual. For example, below you can see how the FAB icon and the hamburger menu is changes based on how it will be used in a given tab — Chats, Status or Calls.

[Top]FAB icons and [Bottom]Hamburger menu on the Chats, Status and Calls tab on the landing page.

Keep it consistent

I believe one of the reason why users find WhatsApp easy to use is because it repeats certain visual patterns on the product to keep it consistent. For example, all the three tabs on the landing page have a list of contacts with information like the user profile, date and time, which are always present for quick recognition — remember “recognition rather than recall!”

“User profile” as it is seen on different pages

It’s all in the details

I believe delightful design is all about those subtle moments when a user interacts with a digital product and it not only works as expected, it has easter eggs that make you go “aha..someone thought about this”! WhatsApp has many such aha moments hidden in there. Here, I want to talk about two such features — first, the famous “blue tick” when a sender sends a message and it is not received by the receiver, you see a single grey tick, if it’s successfully sent, it’s a double grey tick and if the receiver has seen the message it turns to a double blue tick. This feature became instantly popular because in the world of messaging you could now receive instant feedback on whether or not your message was acknowledged.

Second, and something I noticed recently, is how the outline on the profile picture on the status tab, the outline’s dashes indicate how many ‘statuses’ a user has added to their profile.

[Left]WhatsApp’s blue ticks on seen/unseen messages [Right] Visual indicators of number of statuses

To conclude

WhatsApp has survived the tests of time and still comes out as a simple and intuitive product to use. I wanted to share the joys this app brings to me and how much we can learn just by breaking down what exists and is popular rather than chasing a perfect innovation from the scratch.

The use of many apps in my life has evolved over the years. However, WhatsApp happens to still be of great importance. WhatsApp is special to me because it makes it very easy talk to parents back in India everyday, connect with friends and family across the world, and be the goto app to share photos and screenshots. I attempted to breakdown the product flow for WhatsApp and the good things that make it such a popular app (and flex those mobile app design muscles!)

Key screen of WhatsApp as of Dec 2020

--

--