Deconstructing WhatsApp
By: Arushi Singh
Tags: Design Thinking, Designer, Messenger, Mobile, WhatsApp

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!”