Microsoft Emoji: Inclusive Families

Goal: Collaborate across teams to bring users a way to customize their family emoji. Design a system to make emoji more inclusive and reflective of the diversity in real-world families.

Overview:

Each year Microsoft hosts a Fix Hack Learn event so that designers and developers across the company have the opportunity to collaborate on projects that will make a difference in the lives of their users. I teamed up with the Expressive Input team in order to design a user flow that would make emoji families more inclusive.

Black families are widely some of the most requested emoji, but are consistently left out of new releases. Unicode only requires companies to include the standard yellow families which they consider to be ambiguous and representative of all skintones. However, yellow is often perceived to be representative of white or light skintones. As a result, families of color and interracial families are completely left out of the emoji library.

Since adding every possible combination of family members to the library would result in over 52,000 new emoji, we needed to design a user flow that would minimize the space needed within the keyboard while still making each of those combinations available. 

Our final pitch to the Windows organization is available below. We hope to see this work included in a future software update!

Final Design:

Below you can see the final interface I designed as part of the FHL project. While Microsoft emoji are used within several key surfaces, I focused on the Floating Expressive Input Panel (FEIP). This panel is readily available on any Windows device using the keycommand "Windows Key + Period (.)". The panel allows users to insert an emoji into any text field such as a Teams chat or web browser making it an important surface to focus on when bringing the new functionality to users.

Considerations and Limitations:

• There are several emoji that would become customizable, including single and two parent families as well as couples without children
• Future emoji releases will introduce gender-neutral characters to the library, so the solution would need to be scalable to add them as an option for families as well
• Since Microsoft emoji uses ZWJ sequences, the emoji would need to be customized from left to right beginning with adults and ending with children
• The solution shouldn't vary too differently between surfaces, so the design for the FEIP should be able to adapt easily to the Wonderbar, SIP, and Swiftkey keyboards
• While users are familiar with Apple's "press and hold" method, Microsoft's emoji keyboards don't support that functionality and require users to select the skintone prior to choosing an emoji

Process:

Below I've included a few sketches and early drafts of the interface. The first concept had users select gender and skintone within the keyboard itself. Later concepts shifted toward a "wizard" that would allow users to clearly focus on each step. The final solution expanded on the third concept, aligning the UI to the Microsoft Fluent system and allowing users to add additional children beyond the Unicode standard of 1 or 2.