Two years ago we introduced completely rewritten and redesigned Mail and Calendar apps in Windows 10. (Not the screens pictured above.) While the apps were functional and modern looking, they still lacked a more refined and delightful look and feel. In the “software as a service” era, we’re able to improve our features and designs with a cadence that customers have come to expect. Even before the 2015 release, we began thinking about the next app iterations.

Our early redesign set the goals to visually align with Windows, reduce chrome, give the app a fresh, more refined, and beautiful look, while raising the bar of “craftsmanship” (the internal name for our efforts). The team established design guidelines grounded in a purposeful use of typography, color, and motion, to convey a delightful and highly functional app.

Timing plays a part in every story

It wasn’t until early 2017, engineering resources became available to work on our redesign. About the same time, the Fluent team (code named NEON) was launching, and actively driving adoption of the new Fluent Design System into Microsoft apps. That meant we had a refreshed design challenge; (Thank you Satya) rethinking what we kept, what we left behind, and how we became more Fluent going forward.

While the Fluent launch was exciting, our team remained mindful that we were redesigning apps that had millions of users and fans. Altering things they were used to—like title bar, ribbon, and key functionality—had to be carefully considered. Obviously, we didn’t want to alienate our users, and we were not interested in any backwards steps in usability.

One insight we gained early on in user testing was that “different” did not necessarily mean “problem.”

Integrating fresh cues from early Fluent Design mail work with the aforementioned redesign ideas turned out to be fairly straightforward — as some of the overarching principles were already aligned. Even some of the Fluent design elements, namely “acrylic” with its translucent surface treatment, were already present in some form in our existing app (semi-transparent navigation pane).

Early “Craftsmanship” refresh for mail (never shipped)

Early “Craftsmanship” refresh for calendar (never shipped)

Fluent Design Elements Implemented with Mail & Calendar

The design explorations coming from the recently launched Fluent team didn’t meet all of the requirements we had for our apps in terms of workflow, personalization, localization, accessibility, etc. Our team examined each of those requirements, applying aspects of the Fluent Design System into our own explorations.

The first Fluent design elements we looked to implement were “acrylic” which is the translucent, glassy surface treatment for panels and “reveal”, the light effect that appears on hover to reveal actionable elements. Each of them presented their own set of challenges and we remained in close communication with Fluent and the other Office teams, learning what worked and what didn’t.