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!
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.
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.