Acquired by Facebook (now Meta) in 2014, the global messaging platform WhatsApp has gained widespread popularity, with over 2 billion global users.
Offering a user-friendly interface, it facilitates seamless communication through text, voice and video calls, multimedia sharing and group conversations.
With such massive growth over a relatively short timeframe, WhatsApp faced challenges—such as an outdated system with over 10 years of tech debt, a larger, more complex internal team structure that made maintaining guidelines for scalability challenging, as well as a need to address evolving user expectations in a competitive landscape with rivals like Signal and Telegram.
In addition, there were inconsistencies between the brand and mobile apps. In early 2023, a vision for WhatsApp in 2024 was initiated, focusing on maximizing user impact, enhancing app quality and developing a robust design system with components and primitives. The goal was to achieve these improvements by the end of 2023.
In partnership with our engineering peers, my team developed color mapping tools in Figma and an online asset system, providing a comprehensive view of the current state for iOS and Android. With a predefined goal, we quickly created and stress-tested a design token system in various scenarios while identifying how to update assets most efficiently.
The tools built facilitated the programmatic mapping of 9,000 colors to our established tokens, ensuring a cohesive design language across platforms.
Addressing asset size, we efficiently identified duplicates and mapped 3,500 icons to their latest native equivalents, reducing redundancy by about 2/3 while simultaneously streamlining processes and establishing clearer guidelines.
Our focus extended to enhancing essential components like top bars, Switches, FABs, dialogs and context menus, significantly improving the app's visual appeal, especially on Android.
In experimentation, we rigorously tested each component change independently to detect regressions, ensuring adaptability. Simultaneously, we monitored the A/B group, incorporating all updates collectively.
Functioning as the connective tissue of the design at WhatsApp, cross-organization collaboration was key to bring these changes to life. The team introduced streamlined Figma libraries, documentation and workshops to prepare designers and engineers for the upcoming changes.
Early metrics saw an increase in time-spent as well as increased engagement metrics trending neutral to slightly positive after a couple of weeks, given novelty effects for affected users as well as a reduction in crashes and app size (iOS 8.9% / 4.3% Android), which in markets with lower-end devices tends to lead to more app installs and metric increases in the long run.
We were also able to deliver an updated design system with 50 colors for both platforms (down from ~450) as well as a match between used assets and Figma libraries increasing internal efficiencies and more clarity when developing new features.
