Microsoft Design
Published in

Microsoft Design

Digital Design is never done: Evolving Windows 10 Mail and Calendar

How our team made fan-loved functionality more Fluent

Before and after animation of the redesigned app

Timing plays a part in every story

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

Early “Craftsmanship” refresh for mail (never shipped)
Early “Craftsmanship” refresh for calendar (never shipped)

Fluent Design Elements Implemented with Mail & Calendar

Early exploration for Fluent Mail in light theme
Early Fluent exploration for Calendar
Experimenting with a blue top bar, aligning more to the Outlook brand

Acrylic — Background or no background, that is the question

Early “empty state”-explorations (when no email is selected) with the user’s desktop showing through the acrylic and wide panel margins
Later “empty state”-exploration with less translucency and another window showing through
Later “empty state”-exploration with in-app background picture
Reveal on white with “brickwork”-effect between panes did not work for us

To Reveal — or not to reveal?

“How do I move my window?”

Exploration with folder flyout

Moments of truth in code

Reminder: Designers are not the customers

Details: Lines in message list

Designing an App is an Evolving Story

Fluent is a collaborative effort

Thanks to the team



Stories from the thinkers and tinkerers at Microsoft. Sharing sketches, designs, and everything in between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ruediger Kinast

I’m a product designer at Microsoft for Outlook & Office 365. In my freetime I produce music Opinions are my own.