The making of Fluent emoji

A year-long effort to design a more expressive emoji system for Microsoft

In the Fall of 2020, when we set out to explore a new direction for Microsoft's emoji system, little did we know that it would soon come to life in our products and be experienced by customers all the globe. After taking some time to look back at what we accomplished together, I decided to put together this post as a summary of our adventure.

Our story began in October of 2020 during "Fix Hack Learn", a week-long quarterly event aimed at creating space for Microsoft employees to explore concepts they are passionate about. At that time, our project’s goal was focused on making our system of reactions more inclusive, enabling customers to choose their skin tone when reacting to a message or post on Teams and Yammer. But it was clear that we also had an opportunity to re-imagine our emojis under a completely new light. And ultimately, that’s what we did.

With potentially endless aesthetic directions, our instincts led us to borrow from the dimensional look and feel we had established through our UX storytelling efforts. In a few years, we had amassed a sizable collection of UX films and articles that pushed the limits in how our products were depicted, and which in turn created waves across our design language. It was time to take this direction one step further.

To bring this vision to life we partnered with our longtime collaborator Studio Tendril, and started the design process by leaning into customer feedback we had received about our existing emojis. As seen in the compilation below, the emojis in Windows 10 were simplistic, flat, and almost iconographic. This was in clear alignment with our old design language Metro, which had its roots in classic Swiss graphic design, but for that reason, was also at odds with the latest Fluent design direction and its principles.

While bold outlines and a reductive color palette made the designs clear and accessible, it inadvertently prevented them from showing off the kinds of nuanced details that made them more expressive. The more we learned from customer feedback, the more we realized we were on the right path, where dimensionality would end up yielding a more human and approachable quality to the designs.

In retrospect, our very first explorations took us a little too far in visualizing materiality. The image below shows how in some of the early designs we borrowed from a rougher aesthetic inspired by wood carvings and clay sculptures. They were heartwarming and appeared to tap into a more universal, child-like aesthetic.

We even explored the use of fingerprint indentations to convey human influence in the making of each design, as well as a staccato quality to animations that was akin to stop motion, seen above in the Fire emoji. But in the end, given that our customers would be experiencing them in mostly small sizes, we felt this was not the approach forward as the most delightful details would be lost.

While the roughness of these designs wasn't appropriate, we fell in love with their boldness and vibrancy. After all, it was clear that reaching the right degree of expression would require putting as much focus on the color palette of our emojis as we did to the shapes themselves. We would move forward from here with determination to embrace these ideas across the entire set.

From concept to customers' hands: Our tools of choice for forging emojis

Determining the "right" pipeline for this project was a unique journey on its own. Having gone through an initial sprint, we were confident that 3D software would ultimately give us the aesthetic we were looking for. At the same time, bringing emojis to life in our products meant we would need vector outputs of every design so they could be ingested as both SVGs and as a font, which is how they would ultimately get implemented in Windows 11.

Addressing these product constraints meant that our tools would end up being a combination of Adobe Illustrator for initial 2D concepts, Cinema 4D for modeling, animation and rendering and Figma for creating the final vector variances, as well as for distribution to designers and developers.

In the process of refining the visual language of these emojis, we were compelled to create a system of connected parts that could be re-used throughout. In the end, where this was truly useful was in Smileys and People categories as so many parts ended up being repurposed across different designs. This approach was inspired by our Fluent app icons, which helped our ever-growing set feel connected as the system scaled exponentially.

One of our most cherished qualities in the smileys set is the notion of an Imperfect Circle. To embrace a more human quality in our smileys set, we chose a wobbly shape to their silhouette, hinting at the imperfections in all of us, which added a personality character to the designs and yet kept them closely aligned with the aesthetic we extended to the rest of the system.

Getting to these iconic forms means starting with very simple geometry. Essentially, almost every emoji part derived from squares, circles and triangles that were softened, curved, and bent to take on new forms as this little Pumpkin emoji demonstrates.

This process repeated itself across all designs, starting with a sketch in Illustrator where we optimized for bold and striking silhouettes. With each sketch approved, it was time for designs to be made fully dimensional. This image below shows how this process evolved from 2D to 3D. While we were able to stay true to this approach in most designs, parts like the Unicorn's mane, and in fact many of the parts of our animal designs, deserved a more organic shape.

A reliance on simple geometry made the 3D modeling process more predictable as well, allowing the team to accelerate production to many dozens of new emojis every week.

With the depth we designed into every emoji, we quickly discovered that perspective distortion was going to be something we would want to avoid.

To simulate the desired effect and emphasize the graphical nature of these designs, we ended up using a longer focal length in Cinema 4D that was equivalent to 135mm. This essentially worked as an isometric camera, preserving the integrity of straight lines, while still allowing for a little perspective to come through.

Below is a snapshot of the Mouse emoji seen in the first and second images with a regular 36mm camera (from its side and at 30 degrees). As you can see, the models are essentially a cluster of geometric forms that were glued together (just as in 2D).

In the last two images, with the 135mm adjustment, you can see how the flatter camera aesthetic allows for this simpler and more flexible modeling approach to really shine as a graphical emoji.

Once rendered, all designs were brough back into Figma to be organized and later shared with our community of designers and developers. In addition to the PNG render, we also created additional versions of each design. Below, and second from the left, a vector replica of the dimensional design which can be used as a lightweight, scalable SVG. Then, a second vector version that is completely flat and devoid of any gradients or shading tricks, which helps us bridge some temporary technological gaps. Finally, a black and white version for high-contrast needs. Not including animation, these four versions quickly grew the asset library to 7552 emojis!

The challenge of universally capturing people

How can a single emoji capture the essence of a human being and yet remain inclusive of the unique qualities we all possess? An impossible task, right? For this reason, without a doubt, our most difficult emoji category came down to People.

Our first iteration started with a highly graphical approach that borrowed directly from the forms we had established in the design of our smileys. As you can see from this family unit, we investigated the use of skin tones on those forms, added hair styles and ears, as well as geometric clothing to stay true to the core parts of the design system.

While at first it seemed like the right approach from a system design point of view, the execution fell short of delivering true human qualities. From eyes that looked too artificial, to the lack of a nose, eyebrows, wrinkles, and hair designs that didn't embrace human authenticity, there were too many areas that needed to be pushed further.

In our second iteration, we moved to embrace more humanistic characteristics, while still preserving a close connection to the emoji system. While we were getting closer, this time we felt the eyes were expressionless and the head shape felt less universal than we were hoping for.

In addition to it, the 3D shaders resembled the look of vinyl figures, giving faces and uncanny, toy-like quality that wasn’t flexible enough to embrace a wide range of skin tones.

It came down to our third, and final iteration for the people category to sing! We had reached an aesthetic balance between the graphical look and feel we wanted, and the utterly important human qualities we needed. In this final version, the head shape came in three different types: genderless, female and male (as seen below). Each creates enough space for variations of skin tone, hair, and facial hair to easily work as a connected system, while also standing apart.

Offered in all five tones of the Fitzpatrick scale, the designs were more inclusive and modular, enabling hair, facial hair, and accessories to be shared interchangeably. The materials and lighting were fine-tuned for each individual shade, celebrating their unique natural qualities. Diversity in hair styles was a priority, although still somewhat limited by the current Unicode standards.

At the end of the process, we felt we had achieved our goal of enabling everyone to show up authentically by choosing their skin tones when emoting and reacting across Microsoft 365 experiences. Plus, we also landed on a new and fantastic aesthetic! 🙌🏼

Once we were finally settled in a direction, it was then time to expand the people category into the Unicode list of professions and other subjects. Below is a snapshot of what we came up with. Again, all are also available in five skin tones. ✌🏻✌🏼✌🏽✌🏾✌🏿

Our final deliverables included an emoji font for Windows 11. It's assembled by layering glyphs, 13,000 in fact, like a screen-printing process. This approach of layering colors over one another allows Windows to offer 120,000 + family combinations so that customers can create unique family designs that resemble their own.

Animation with a vibrant palette to amplify and elevate

Having spent most of my career in the animation industry, I am proud to say that together, we have prioritized almost 1100 out of 1888 of our emojis to be animated.

This was a mammoth task that took careful planning and lots of reviews to get to perfection. While initially it was easy to get distracted by sleek keyframes on screen, we ended up focusing on the exact timing of each animation to create clarity and focus on the message of each emoji. A delicate, and often subjective principle to boil down to clear animation guidelines, but one that our partners at Tendril quickly grasped and helped us apply to the whole library.

We trust that the hard work will pay off as these will take our customers’ expressions to a whole new level in Microsoft Teams, Loop, Flipgrid, and other products that may embrace animation in the near future.

When it comes to the color palette, a detail that may go unnoticed is that Microsoft’s brand colors were used across a variety of little special moments. I hope you find others as you experience it in our products. ;)

The thoughtful choices around color continued throughout the system, focusing on both the clarity and boldness of message. While the palette was often highly saturated, and potentially loud, the dimensionality of each design softened the effect and allowed each emoji to feel more balanced.

All in all, creating this project took many talented hands using Adobe Illustrator, Maxon's Cinema 4D, Figma, Font Lab and other unique tools.

It's time to celebrate!

While the Fluent emojis are out for our customers to enjoy in Windows 11, and soon in Microsoft Teams, our job isn’t quite done. As expected, we plan to continue creating new designs every year based on new Unicode releases and will also explore investments in our own exclusive concepts. For instance, seen below are some designs that were inspired by the new reality of a hybrid workplace. 

Starting in the upper left we celebrate “No camera day”, followed by everyone’s experience of learning their mic is muted when they are trying to speak. Then, on the upper right, we acknowledge how much we are all juggling and multitasking while working from home.

In the lower row we expand that idea of juggling personal and work lives with our kids and pets and finally in the middle a playful combination of pajama pants and a suit.

As part of our celebrating this new set of designs, and a year of hard work, we created a little playful film that combines many emojis into one heart-warming universe. It features animation by Studio Tendril, as well as music and sound design by Zelig Sound.

I hope you enjoy it!

While there are many amazing people to thank, I'd like to extend a special thank you to my core group of colleagues that made this project possible: Claire Anderson, Christina Koehn, Jason Custer, Jon Friedman, Judy Safran-Aasen, Cassie Klingler, Matthew Ropel, Mark Swift, Mike LaJoie, Peter Wilkinson, Rodney Edwards, Rudy Vessup, Sam Cundall, and Spencer Nelson.