SUMMARY
Messenger just got a new look. Get the backstory from designers who helped make it happen.
You may have noticed that your Messenger app is looking—and acting—a bit differently these days. That purple-ish color on the app’s logo? New. Your ability to see Messenger chats on Instagram? Also new. That’s because in late 2020, we reimagined the app’s brand and added exciting new functionality. A casual Messenger user might appreciate the refresh, but design professionals will see the results of a complex project.
The undertaking was unique in that we set out to tackle two seemingly unrelated challenges: How can we use visual design to change people’s perception of the Messenger brand? And, how do we use visual design to help roll out a major product update? Here, we explain why we revamped Messenger and what went into creating the new look, including the explorations that led to the new logo, the new illustration system, and more.
Some background
Our app’s history sheds light on the path to the rebrand. Messenger was born in 2011 as an expansion of Facebook.com’s chat function. It was then that we introduced the first Messenger mobile app and created our initial iteration of the Messenger brand. Since then we’ve overhauled it twice, once in 2013 and again in 2018, both times laying the groundwork for new features and experiences that we rolled out iteratively.
The Messenger app interface and logo in 2011
By 2018, we had a rich app with many expression and communication functions, but because the original information architecture (IA) wasn’t designed to support such a robust product, the user experience had become busy and overwhelming. To remedy this, we redesigned Messenger from the ground up with a simpler IA, a clean design language, and an updated color palette and logo.
Until 2020, we’d been using the 2018 system to build new communication features—especially ones that went beyond chat. We’d launched Messenger Rooms, Watch Together, an expanding library of augmented reality (AR) filters, and 360º backgrounds for video chat. Looking ahead to late 2020, the company was also planning to launch a cross-app communication feature between Messenger and Instagram. We acknowledged that Messenger had evolved into something much more than a messaging product, so much so that it invited the design of a new public identity. And thus, the brand redesign project was born.
Goals
Now that we could see what Messenger had become in terms of its history and similar products, we knew what its new brand needed to showcase. We learned from research that people perceived Messenger as Facebook app’s chat service, but this perception didn’t align with where we were (and where we were headed) as a product. From there, we arrived at two primary goals for the rebrand.
Our first goal was to evolve Messenger’s brand from being seen as a simple way to message your Facebook friends, to a place to hang out with your favorite people on your favorite apps and devices, including Instagram. We’d planned to unveil the rebrand at the same time Messenger’s cross-app communication with Instagram would go live, so it was important to us that we help Instagram users welcome their upgrade to Messenger.
Our second goal was to signal Messenger’s unique communication capabilities. We needed to differentiate from other, more strictly “messaging” apps on the market and signal our added value—that Messenger offers Watch Together, AR effects, Messenger Rooms, and more. We even considered moving our logo away from the bolt within the bubble because our competitive analysis showed that many other messaging apps used speech bubbles in their logos. You’ll see later why we retained the bubble.
Logo color
We began work on the aspect of Messenger that, when changed, would make the biggest impact: our logo. We started with its color, wondering what it would look like if we added a more dramatic gradient or made the logo a solid color. We even looked at different ways to render it. We asked other questions, too, such as: What if the logo were three-dimensional? What if it looked like a sketch on the back of a school notebook? What if it displayed no color at all? For every direction we explored, our team hypothesized about what each change would signal and how those signals might meet our goals.
From left to right: the most recent Messenger logo before the 2020 rebrand and the four new color choices for the Messenger logo.
Once we landed on four new options, we worked with Creative X, Facebook’s in-house creative agency, to consider how these logos, along with the then-current logo, might come to life in marketing materials. Together, we imagined each version in the real world—how they might look in print ads, online banners, outdoor postings, and so on. Seeing a color exploration on a blank page is like interpreting it in a vacuum—it invites a limited sort of evaluation; seeing the explorations in real-world contexts helps us understand what they might mean in conversation with real environments, which are more complicated.
While we each had our own personal favorites from the four new directions, we knew that as designers, it’s part of our job to put ourselves in other people’s shoes and imagine how they might interpret what we make. But our new Messenger logo (like all of Facebook’s output) would reach billions of people, and at that scale, which includes people of vastly different life circumstances from countries around the world, we needed to rely on user experience research.
We engaged our qualitative and quantitative user experience research teams with our hypotheses about what each logo color option might mean to people outside of our company, keeping in mind our goal of establishing Messenger as a stand-alone brand, less associated with the Facebook app and more related to Instagram. After rounds of testing, research validated that what we were calling “ultraviolet” (second from left, above) tested positively against the attributes we were trying to communicate.
Logo composition
Now that we’d finished our color exploration and were happy with a direction, we were still a few months out from publicly launching the new brand elements. So, as is often the case when designers are given the chance to sit too long with something “finished,” we started wondering if we could make bigger moves with the logo that would communicate that we were more than messaging.
Our competitive analysis showed that most major messaging apps' logos included speech bubbles, so we wondered if dropping our logo’s speech bubble might differentiate Messenger in the ways we wanted. To explore this avenue, we partnered with our creative agency and eventually settled on four new logo compositions, all with the new ultraviolet gradient, to test with people who would be using product. Our user experience research team sought to learn whether and to what degree any of these four options signaled “more than messaging.”
Messenger logo options we tested with people who would use the product. From left to right: our then-current speech bubble composition, the bolt inside a bubble, the bolt without a container, a slightly thicker bolt, and a completely new bolt shape.
The results of our testing? By a large margin, people preferred our original logo’s composition. Cases like these are interesting: As designers and creative people we often tend to favor change—and often think that more change is better. Through this process, though, results from research checked our instincts. Of course, our result doesn’t mean research’s input is all you need to create a logo, but in our case it helped keep us honest and on-goal.
Illustration system
Now that we had our mark finalized, we needed to build out a new illustration system that supported and complemented it. While the illustration system we built in 2018 was beautifully crafted and served our purposes at the time, it felt too similar to Facebook app’s illustration system. We also wanted our new system to feel boldly different from illustrations we were seeing in other tech products, and more aligned with the goals we’d outlined for the evolution of the mark itself.
The four illustration system directions we explored, from left to right: restricted palette/geometric forms with human elements, symbolic/playful, simple and stripped back, simple with representation. (For illustration only.)
We knew we wanted our system to more closely tie to the design language of the Messenger app itself. Other than that, the illustrations had a specific job; while they needed to communicate a tone and feel, they also needed to contextualize specific points in someone’s navigation of the app. Instead of creating something entirely new, in the interest of simplicity and clarity, we decided to use the existing iconography and design system as a starting point for our illustrations.
The exploration that felt the most appropriate was the simplest, with a playful layer of animation. A restricted color palette with the ultraviolet gradient as the focal point tied the system directly to the change of the logo. But, we felt that design direction was missing clarity and polish.
We kept working towards precision. Using the restricted color palette direction as our starting point, we treated the surface of the app as if it were physical, with its objects both carved into and resting on top of that surface, seemingly embedding themselves into the design of the app. Once we got here, we felt like we had something clear, differentiated, and closely tied to both the new logo and the design system itself.
Further evolution of the Messenger illustration system. (For illustration only.)
Our user experience research team tested this iteration of our illustration system, and we found that it did help people perceive Messenger as something new—something that offered robust and dynamic ways of connecting people.
Final product
To meet our project’s goals, we had to break down all the parts of the brand, examine them, reimagine them, and then put them back together. We’ve done that, and the new Messenger logo and illustration system comes together as a cohesive brand in the current live app. We’re proud of our work and thankful to the many teams from across the company who came together to make it happen.
From left to right: the new Messenger logo in-situ, the logo alone, the Messenger chat interface, and an example of the new illustration system in-situ. (For illustration only.)
Takeaways
When we reflect on our Messenger rebrand work, we see a few themes that we hope may serve as helpful tips for designers.
At scale, small changes feel big
Even though it might be tempting to feel like the changes you’re making are too small and too incremental, keep in mind both the number of people using the app and the number of places your changes will show up. In our case, with an app that reaches over a billion people and a logo that has become almost ubiquitous, the changes we made were all that were necessary to create a dramatic impact.
Exploration creates confidence
The shortest distance between two points is not always a straight line. Even though we ended our exploration with a logo that was not that different from where we started, we felt confident that the change we made was the right one not in spite of, but because of all the exploration we did. Sometimes seeing the wrong solution can help identify what’s right.
Shipping well is just as important as designing well
The work we’ve talked about here is only part of what was required to launch a successful rebrand. Without the support, dedication, and care of many cross-functional partners, both through Messenger and the Facebook family of apps, this rebrand would not have rolled out effectively. Even updating the logo everywhere it shows up is, alone, an incredibly complex task requiring a huge amount of coordination.
We hope this peek behind the curtain into our process was helpful. We can't wait to show you what's next!
RELATED STORIES
Read more stories about process
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.
