STORIES

Keeping WhatsApp fresh, simple and approachable

PROCESS
CASE STUDIES
PRODUCT DESIGN
By Idit Yaniv, VP, Head of WhatsApp Design, Meta
5 min read
May 9, 2024
A collage of illustrations and graphic images showcasing the user interface updates launched in WhatsApp. On the top right, the WhatsApp logo or “doodle.” To the right, a collection of illustrations that can be found in the app. In the middle, an illustration expressing the outline of a mobile device that reads “Start chatting, message privately with your WhatsApp contacts, no matter what device they use.” On the bottom right corner, a photographic image of two people embracing in a chat thread.

SUMMARY

An in-depth look at our design approach: why and how we updated the user interface on WhatsApp

At WhatsApp, our work shapes the way more than 2 billion people worldwide communicate every day. We take this role seriously, and we focus on the details to get it right for our users. We aim to create an app that not only works seamlessly, but also feels like a natural extension of your phone — allowing you to focus on the conversations that matter in your daily life. We believe success is achieved when our design enhances how people communicate on WhatsApp and empowers them to connect in new ways.



Our design philosophy builds on our product principles of keeping WhatsApp simple, reliable and private. We filter these through a design lens to build intuitive and clear flows that work universally and help people connect, while protecting their privacy. We pay close attention to how people use their devices and design our user interface to complement their existing experience, so WhatsApp feels familiar and easy to navigate. If you know how to use your device, using WhatsApp should be easy.

Four device screens present a side-by-side comparison of the WhatsApp interface on Apple iOS and Android. On the left-hand side, one screen showcases the WhatsApp chat interface on iOS and the other screen showcases the WhatsApp chat inbox on iOS. On the right-hand side one screen showcases the Android chat inbox and the other screen showcases the Android chat interface. The images sit on top of a beige background.

New iOS and Android user interface on WhatsApp

Refreshing the app

I believe the way we approach change on WhatsApp is powerful, and it puts people at the heart of everything we do. When designing, we consider varying levels of connectivity and digital literacy to keep WhatsApp accessible, and we’re careful with changes that affect people’s muscle memory. This helps us be more intentional about the problems we solve for and minimize product disruption.



Over the years, we have primarily focused on adding utility to the app. As the product continued to grow in functionality, the design needed to evolve as well. We wanted the product to feel more fresh and modern without disrupting its core functionality.

Four device screens present a side-by-side comparison of the WhatsApp interface on Apple iOS and Android. On the left-hand side, one screen showcases the WhatsApp chat interface on iOS and the other screen showcases the WhatsApp chat inbox on iOS. On the right-hand side one screen showcases the Android chat inbox and the other screen showcases the Android chat interface. The images sit on top of a beige background.

A look at how the product’s design has evolved over the years as people do more on WhatsApp

The team crafted these three principles, which guided us through the many explorations and debates along the way:


  • Fresh: WhatsApp should feel fresh, fun and yours with a look that’s familiar and native to your device.

  • Approachable: Everyone should feel comfortable using WhatsApp. It’s accessible, at home within the OS and feels unmistakably WhatsApp — welcoming and slightly quirky.

  • Simple: The new design should enhance simplicity, be scalable and future proof.

A collage of illustrations that present a summary of all the user interface changes launching in WhatsApp. On the top right, a mobile device on a green background shows the updated iOS top bar interface. In the top center, a mobile device screen on another hue of the WhatsApp green showcases the updated Android bottom menu bar. Below that, a row of updated white icon illustrations sits on a dark green background. On the top right, a mobile device screen on a dark WhatsApp green showcases the updated chat filters user interface. Below that, a rectangular bar showcases WhatsApp's new color palette which includes white and three hues of green. On the bottom left-hand side of the collage, an illustration of people, a pencil, an apple and symbols communicate the updated illustrations. On the lower right-hand side of the collage, the lower half of a mobile device screen on a bright light green showcases the updated attachment tray.

A summary of all new user interface updates on WhatsApp

New color palette

We’re introducing a new, consistent green palette within the app for a unified experience. We considered over 35 different color iterations, ultimately aligning with WhatsApp’s iconic green and opting for a palette that allows for harmonious color pairings throughout the app. We also increased the usage of neutral colors, enabling us to be more selective about where and how the green is used.

A collection of device screens showcase several iterations of colors that the WhatsApp design team considered during the process.

Different color iterations we considered during the process

We also heard that people wanted a darker dark mode. We focused on higher contrast and deeper tones to reduce eye strain in low-light environments. We’re making it one shade darker for improved visual appeal and legibility.

Two mobile device screens sit side-by-side showing a before and after of WhatsApp's dark mode.

Dark mode is now one shade darker on Android

Updating icons and illustrations

Icons help add visual cues to quickly guide people through the desired action or information, so it’s important that they are intuitive and recognizable. We’re updating our icons to a rounded, outlined style and, to match the new iconography, we also refreshed our illustrations and added animation for a more playful aesthetic.

Three animated illustrations on a beige background. The first illustration on the left-hand side of the image shows chat bubbles floating from a device into a desktop screen. The second illustration in the middle showcases symbols representing the general prohibition sign, a light green lock and a green timer. The third illustration on the right-hand side of the image shows an animated envelope opening as illustrations of the WhatsApp logo, a chat bubble and a heart emerge from inside.

Animated illustrations on WhatsApp

We’re also refreshing the original default background in chats. We learned most people used the doodle, but there was an opportunity to make this even more unique and more related to everyday conversations. Our team reviewed every piece of artwork in the doodle and explored new options that were simple in style and better represented a diverse set of people and objects.

A collection of animated illustrations depict the process of refreshing the WhatsApp "doodle," people, easter eggs and world-wide objects with the app.

Refreshing the doodle background on WhatsApp chats

Making navigation easier

We’ve added a more modern, native bottom navigation bar on Android to help people find what they need faster. Placing tabs closer to people’s thumbs offers more natural navigation and matches the current experience on Android devices.

An animated illustration of a mobile device screen that shows the before and after designs of the WhatsApp bottom navigation bar. The background transition from beige to green as the illustration moves from the top of the mobile device screen to the bottom.

Before and after of bottom navigation bar on Android

Sending photos and videos on iOS is now also easier with a new attachment layout. Instead of a full screen menu, we added an expandable tray that allows you to see the features more clearly when sending media, polls, documents and more.

The bottom half of a mobile device screen on a beige background shows the updated WhatsApp attachment tray on iOS.

New attachment tray on iOS

Better chat management

One common request we’ve received is for better organizational tools for messages. Recently, we introduced chat filters that help you focus on and find important conversations faster. Moving the navigation bar on Android to the bottom allowed us to design filters to be at the top of the chats list, so people can quickly find the right conversations without scrolling through their full inbox. Now, you can select between unread and group filters with just a tap to catch up on missed messages or your favorite group chats.

An animated illustration of the top half of a mobile device screen on a beige background shows the updated chat filter user interface on WhatsApp.

New unread and groups filter for chat filters

Designing for the future

These updates represent a huge effort from a multidisciplinary team of designers and we’re excited for everyone to try them out. We’re always inspired by how people use WhatsApp for so many aspects of their daily lives and will continue to design technology that helps them stay connected. Whether it’s chatting with family, collaborating on projects, interacting with businesses, or completing tasks with Meta AI, we’re focused on bringing new features and making improvements that help them do more. We’ll keep sharing our learnings with the design community!

Design at Meta is for everyone who touches user experience and design.

Whether you’re a product designer, writer, creative strategist, researcher, project manager, team leader or all-around systems-thinker, there’s something here for you.


Design at Meta is a window into the unique expertise and perspectives of the multidisciplinary teams who are building the future of digital connection and bringing the world closer together.

FacebookInstagramThreadsDribbbleMedium