MESSENGER
Audio & Video Calls
OVERVIEW
From the time Messenger spun off from Facebook to become a standalone app in 2011, to the time that I started working there in 2017, the app had scaled to more than 1 billion users. It had nine tabs and a case of feature bloat. In UX research, people repeatedly asked for a cleaner, simpler Messenger that focused on its core purpose: communication.
The Messenger organization spent 2018 redesigning the app from top to bottom. I was fortunate to contribute to this massive project in my role as a product designer on Messenger's Real Time Communication team, which supported the app's audio and video call technology. I focused on radically streamlining the call interface.
The Messenger organization spent 2018 redesigning the app from top to bottom. I was fortunate to contribute to this massive project in my role as a product designer on Messenger's Real Time Communication team, which supported the app's audio and video call technology. I focused on radically streamlining the call interface.
SHIPPED
October 2018
TEAM
About 20 product designers. Too many software engineers, product managers, data scientists, and multi-disciplinary peers to count!
CONTRIBUTION
Interaction design
Visual design
Systems design
Visual design
Systems design
↑ One-to-one and group video chat in M4.
PROCESS
To start, I mapped all of the states, as well as the actions possible in each of the states, in both one-to-one and group calls. As the broader Messenger design team collectively defined the new visual system, I applied the styles to each call screen.
We applied extra scrutiny to every design decision, down to the pixel. Because we were redesigning a product used by 1.3 billion people, it was essential that we guaranteed the new interface would be accessible to all Messenger users. I spent weeks immersed in hex values and contrast scores to ensure that the call UI controls would be functional for people of all abilities.
Finally, I collaborated with a production designer to publish the call design spec in a component library available to every designer within Facebook.
We applied extra scrutiny to every design decision, down to the pixel. Because we were redesigning a product used by 1.3 billion people, it was essential that we guaranteed the new interface would be accessible to all Messenger users. I spent weeks immersed in hex values and contrast scores to ensure that the call UI controls would be functional for people of all abilities.
Finally, I collaborated with a production designer to publish the call design spec in a component library available to every designer within Facebook.
↑ Spec for every button used in a call.
↑ Applying the button spec to the states after a call ends.
↑ The core video call screens, before and after the redesign.
↑ All of the states in a video call.
RESULTS
After more than a year in development and testing, the all new Messenger launched in the United States in October 2018. It gradually rolled out to the rest of the world throughout early 2019 and is now available to everyone who uses the app.
PRESS
More
SMARTIFY
Tours
