Redesign of Office app for Windows 11

The recent launch of Windows 11 gave Microsoft Design a rich opportunity: to refresh, modernize, and align Office with Windows by adopting the latest elements of our Fluent design system.

When it comes to the Microsoft legacy, Windows and Office have been twin heads. Each has a powerful purpose, but when used in concert — like in Office apps on Windows devices — the experience created many customer pain points. Inconsistencies, overly complicated UI, and painful collaboration experiences were among the top challenges people faced.

In many ways, addressing these pain points continues the Power & Simplicity design journey we began several years ago. Office had always been an incredibly powerful tool, but it was a far cry from simple. We wanted to make it easier, faster, and more delightful for people to use their favorite Office apps and features, so we began to radically simplify our suite. Fluent, the Microsoft design system, was instrumental in doing so, defining more seamless interaction models, clean and beautiful UI elements, and a common set of coded components.

The Microsoft 365 experience pillars also guided this effort, particularly the Focused Experiences pillarBy simplifying and decluttering experiences, we can better facilitate focus and flow within Office, ultimately making it easier than ever to create and collaborate.
Read on to explore the user research and design thinking that helped us reimagine Office on Windows 11

Design powerfully impacts our attention. Color, hue, size, shape — these elements draw our eyes toward or away from something. And since it’s more important than ever for folks to jump right into creating and collaborating with their digital tools, it was time to revisit how we leverage these elements in our Office apps.

First on the docket was color. As we evolve how we represent the Microsoft brand in our products, we want to be thoughtful about when, where, and how we apply our iconic brand colors. To make collaboration fast and easy, we added the brand color to the Share button and created colorful presence indicators to help you co-author in real time with your coworkers.

We were also thoughtful about where to remove brand color to facilitate creation. In this refresh, we default to a neutral color palette, which focuses your attention away from the UI and more directly to the canvas (a.k.a. the place you create, like the cells in Excel or the page in Word). We carefully considered this decision because we’ve historically defaulted to a colorful header bar and were concerned about wayfinding. But through user research, we learned that the app icons on the Start menu and Task bar, plus the canvas surfaces themselves, were strong enough visual signatures to help people navigate between apps.

This cleaner look helps you quickly jump into creating, and we’ve further decluttered the experience by hiding the Quick Access Toolbar (QAT) by default. That said, Office is all about personal choice, so you can easily customize the default experience. If you prefer, you can still show the QAT and customize it with your favorite commands. And if neutrals aren’t your thing, you can easily change your theme color.

To further aid with focus, we used elevation to create a visual hierarchy that separates the canvas, ribbon, and header bar. By subtly “lifting” the ribbon from the base layer, for example, we can separate menus, dialogs, and other floating or transitional UI, making it easier to toggle from the canvas you’re creating on to the controls you need to use.
Finally, to increase overall coherence, Office now automatically syncs to your Windows theme. If your Windows device is in dark mode, you don’t need to worry about opening Office to a glaringly white screen. Instead, Office will automatically have a matching dark theme.

A legacy is only as powerful as the impact it continually imparts. This means making design decisions that strike the perfect balance between history and modernity. As we refreshed the Office apps to shine on the new Windows 11 operating system, we honored our heritage by more thoughtfully using brand colors while evolving our legacy by introducing new materials like Mica.

Beyond creating a more modern look and feel, these new designs pave the way for future Office evolutions. Introducing layering and rethinking how we use elevation, for example, will be critical as we craft new features like adaptive commanding, which lets you dock and undock toolbars so they can float nearby while you create.

As we continue our Power & Simplicity design journey, we hope you’ll join us, and we welcome your thoughts and feedback in the comments below!