Dark Mode in Microsoft 365
This project was intended to amplify the efforts of a small v-team of designers and engineers focused on aligning the aesthetics of dark mode feature across multiple experiences and platforms. This included Word, Excel, PowerPoint, OneNote, Microsoft Teams, OneDrive and others and encompassed iOS, Android, Windows and web.
My role was to guide the creative direction of the release, inclusive of an article and a UX film, as seen below. I also created some of the imagery needed to illustrate the final results.
Seen above are the final app screens that were all aligned across a common aesthetic. Below are samples of the final colors across UX surfaces and brand after the alignment was reached.
One of the core pieces of this release was the UX film I directed with Reisigner Studio and Zelig. This artistic take on showcasing our UI design was a way to celebrate the cross-platform nature of Office experiences and how alignments such as dark mode are essential to Microsoft 365 feeling and performing as a unified system.
We created a sculptural interpretation of the UI control used to switch the apps from light to dark mode as a way to signal the change in the film. The physical properties of the space, its textures and lighting begin to change and transform as this happens.
Each of the spaces was dedicated to a particular platform and the visual cues of the architecture and furniture mimicked the basic look and feel of such platforms. Seen here, OneNote for MacOS for instance reflected a curvilinear aesthetic that resembled the Apple brand and its operating system.
Thank you!
Thanks to Sunmin Chung and my partners in the product teams for making this effort a reality and giving us all a reason to celebrate this accomplishment.
Thank you also to my collaborators in making this real: Rachel Romano on the article, Claire Anderson on the photography, Andres Reisigner on the film and Zelig on music.