Emoji and reactions
express yourself
One of my favorite projects at Teams was designing the emoji and reactions experience. From creating the basic reactions model to expanding the set, shipping skin tones, and designing the custom emoji experience, I was deeply involved in shaping the entire reactions and emoji ecosystem in Teams. This work even led to an opportunity to contribute to the design of an emoji picker for Fluent, Microsoft’s design system, with the potential to be used across the entire suite.
The core 'Fun' team consisted of four engineers, a PM, and myself.
The reactions model 2022
I parachuted into this project at a tricky time. As part of a major overhaul of Channels and Chat, the reactions model for the two messaging surfaces had been redesigned, built, and was being tested internally—with poor results. Internal feedback highlighted that the new models were inconsistent and confusing. I began by comparing the models across the surfaces and with the older approach, while also speaking with the designers who had worked on them to understand their perspectives. Having three designers working independently on reactions for three surfaces had led to reasonable solutions in silos but an inconsistent experience across the product.
My explorations began with two guiding thoughts
- Consistency is key to learnability.
- Change is welcome if it adds value.
I found myself returning to the top-right corner as a consistent position for reacting to a message in chat or a post in a channel, aligning with the familiar placement from the existing model.
While this model didn’t align with the seemingly logical hierarchy of reading a message and then reacting—since the entry point was at the top—I found other factors more compelling. Heavy reaction usage in Chat compared to Channels, the shorter average length of messages in Chat, and the fact that this model had been in place since Teams’ inception all contributed to my confidence in moving forward with it.
Expanded expression 2023
We learned that the Fluent team was developing a brand-new emoji style for Microsoft, and Teams was the perfect stage for its debut. But we didn’t want to stop at simply replacing the emoji in the picker—we aimed to empower users to express themselves more freely by expanding the reactions emoji set. This marked the beginning of the journey to bring the complete set of 1,000+ emoji to reactions.
Mapping chat features on a usage vs. retention matrix revealed reactions as a high-engagement (>50%) and high-retention (>75%) feature, second only to sending chat messages. While our primary goal was to add delight to an already popular feature, we also aimed to improve these metrics:
- Net promoter score, as this was a top-requested feature.
- Overall reactions usage.
- Diversity of reactions per user.
Explorations and critiques led us to the new reactions model, where the reaction summary was moved to the bottom of the message. This change ensured there was enough space to accommodate the possibility of an increased number of emojis per message.
This model introduced a new challenge: the lack of confirmation when the bottom of the message was below the fold. We addressed this with motion—a floating confirmation that included the selected emoji, animating from the direction of the reaction summary. This was a rare instance where I had the opportunity to design the microinteraction myself.
Around the same time, we launched compact chat, a condensed chat view that let users see more messages at once. Reacting to a message in this view, however, felt like walking a tightrope—users had to carefully move the cursor while hovering over the message all the way to the right. My appeal to include reactions in the right-click menu as part of the initial scope was dismissed. Many user complaints later, we addressing this issue.
If users could react with any emoji, it no longer made sense for us to dictate their default emojis. I explored ways to enable users to customize the reactions they could access on hover, giving them greater control and personalization.
Representing you and me 2023
It was unfortunate that we had to scope skin tones out when expanding the set of reactions in order to ship faster. However, more than a year later, diverse emoji reactions finally made their way out!
Interestingly, a study (not ours) revealed that yellow emojis are not universally perceived as neutral. Among Black participants, 56% associated yellow emojis with white identity, and among white participants, the figure was even higher at 63%.
Did you know?
Emoji skin tones are based on a scale created in 1975 by Harvard dermatologist Thomas Fitzpatrick, "the father of academic dermatology," to assess how different people's skins reacted to varying degrees of UV rays.
The biggest challenge was determining how to represent the reaction summary within the constraints of rendering messages inside chat bubbles. After several iterations, we landed on what we believe is a good balance. To avoid overcrowding the reaction picker, we also combined the entry point for customizing default reactions and selecting a skin tone.
Limitless expression 2024
Two of Microsoft’s companies, LinkedIn and GitHub, don’t use Teams—one reason being that custom emoji play a significant role in their team culture, and Teams didn’t offer it. Requests from a few major customers, combined with a renewed focus on competing with Slack, finally brought this feature onto our radar.
Microsoft Fluent emoji picker 2023
All my work on emoji and reactions led to an opportunity to design a Fluent emoji picker for consistent use across the Microsoft suite. Given Fluent’s standards, I placed special emphasis on accessibility to ensure an inclusive experience.
☺︎ ☻