Unified firstmessaging experience
Icebreakers on Facebook's bottom sheet consistently outperformed Messenger's — despite an outdated UI. Neither platform looked like the other, behaved the same, or had the same performance. I led the redesign to create a consistent, engaging first-message experience across both surfaces.
The $10M redesign.
Role
Lead designer
Team
2 product designers, 3 engineers, 0 PMs
Surfaces
Messenger, Facebook (bottom sheet)
Outcome
Shipped a unified icebreaker UI based on Messenger's design system across both Messenger and Facebook, incorporating new motion patterns, for a $10M incremental revenue gain.
Problem and Constraints
Icebreakers (the suggested conversation starters that appear when a user taps into a messaging ad) existed on two surfaces: the Facebook bottom sheet and the Messenger thread. They started out using the same design pattern, but Messenger's design system kept evolving while Facebook's bottom sheet, once built, was never updated. There was no shared codebase between surfaces, so every update meant building twice.
The bottom sheet was visually dated: tight spacing, no animation, dated patterns. Messenger looked sleeker, with better type hierarchy, a cleaner layout, and the current design system. By every measure, Messenger should have been the stronger performer.
Facebook's bottom sheet consistently outperformed Messenger surfaces in both CTR and downstream revenue. The outdated UI was generating more first messages than any test that updated it to match Messenger.
I theorized the design lever that made the most impact was the “send” icon — visible on the bottom sheet, but missing from Messenger. A small affordance that made it clear that tapping would fire a message. In contrast, Messenger showed them as centered pills, with no icon to signal they could be tapped. The better-looking surface was less discoverable.
Design leadership thought the send icon was visually noisy and should come out of any redesign. My instinct said the opposite — that the icon was the revenue lever, a visual cue doing most of the work. Removing it would clean up the surface but quietly lower performance. I proposed an experiment that tested both within an updated visual system. One variant kept the icon, the other dropped it.
Before states
The two messaging surfaces displayed icebreakers in different ways. Facebook's bottom sheet showed them in a static list with a send icon, letting users tap several messages to send. Messenger placed them as centered pills at the bottom of the thread, no icon, and dismissed all options after tapping one. The two versions have very different layouts, reflected in their very different performance.
Before — Facebook bottom sheet
Before — Messenger
Messenger, redesigned
Messenger
What changed
The redesign extended Messenger's design system with a secondary pill variant: new type, spacing, color, and tap animations. The old white pills looked pasted on top of the thread; the new ones sit on the right, in the sender's side of the conversation, where a reply belongs. Both key elements carried over from the originals: the pill shape from Messenger, which reads as a distinct, tappable object, and the send icon from the Facebook bottom sheet, which signals that tapping will fire a message.
The Experiment
We ran an A/B/Control experiment to test two patterns: one with an icon affordance and one without. The control was the existing experience.
Control
Existing experience, no changes.
Variant A
Icon affordance signals interactivity.
Variant B
Text only, cleaner but similar to a sent message.
Design Principles
Interaction drives revenue
Design leadership wanted the send icon removed, viewing it as visual noise on an otherwise clean pill. My hypothesis was the opposite: that the icon made the pill read as a button, not as a message bubble. Simplicity is usually preferable and icons are often seen as “decorative,” but in this instance I believed it was doing a lot of heavy lifting to indicate an interactive element. Both arguments were valid, therefore I pulled resources to test both versions and let the data decide.
New component that scales
The old icebreaker pill in Messenger, a white pill with blue text, only existed for messaging ads and was never integrated into the design system. To reach alignment with the Messenger team, we proposed replacing the one-off pill with a net-new component, giving the system a primary and a secondary pill variant that could be reused across other use cases and hold an optional icon. To gain Facebook agreement (a separate surface with a different design system), we framed the bottom sheet redesign as a 1:1 render of Messenger rather than native FB UI.
Preserve existing features
On the bottom sheet, users could tap several pills before dismissing the overlay, and the data was clear: multi-send icebreakers drive more first messages and more revenue. The redesign couldn't quietly drop it without impacting our hero metrics. So instead of flattening it to a single tap to mirror the Messenger version, we designed an animated tap interaction that preserves the multi-send behavior: tap any icebreaker and the remaining options slide into a re-ordered list, so another icebreaker can be selected.
Impact
Conclusion
It's often difficult for designers to prove the monetary value of redesigning an existing feature over building a net-new component with new opportunities to drive revenue or engagement. This project is the perfect example of a designer-driven initiative that we knew would improve the overall product and drive impact, but required an extra push to get the engineering resources to build and test it.
The design sat handoff-ready for six months before the opportunity presented itself to attach the redesign to another proposed project that would extend the new component's value and feasibility, unlocking engineering investment.
While my engineering team was surprised that a redesign alone could drive incremental ads revenue, I wasn't. I'm a firm believer that the right design can improve the user experience and encourage consumers to move through the touchpoints that help small businesses go from lead to conversion.
FB bottom sheet with multi-tap