Behind the Design: Refreshing the Office Apps for Windows 11
How our fresh new designs help you focus on creation and collaboration
By Sunmin Chung and Rachel Romano
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 pillar. By 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
A more focused experience
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 more beautiful and modern experience
We spend more time on our devices than ever, and we strongly believe that beauty matters. We strived to create a warm and welcoming feeling with soft, neutral tones. We also wanted these designs to feel fresh and modern.
One of Fluent’s signature design elements is the softening of hard edges. From the scroll bar to the controls, you’ll notice rounded corners throughout the new UI. Beyond creating a more modern look, rounded corners more clearly differentiate UI elements, which helps you quickly navigate to stay in flow.
Another Fluent signature is the 80/20 rule, meaning 80 percent of an experience should consist of native pattens and 20 percent should be uniquely Fluent. Windows 11 introduced Mica, a new design material, and we wanted to bring that OS uniqueness into the Office apps as well. You can see Mica in action in the next monthly product update, where it forms the base layer for the apps.
Evolving the Microsoft Legacy
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!
An amazing group of people came together to make this possible! Beyond the design and engineering teams for each individual app, we’d like to give special thanks to Andrew Fomichev (and crew), Daisy Geng, Gwenyth Hardiman, Kori Loomis, Michaelvincent Santos, and Nando Costa. We appreciate you ❤️
