Design Systems & Toolkits

As web and mobile were aligning to Fluent, Microsoft's design system, the desktop OneDrive experience was left forgotten in its antiquated state. I initiated this side project of developing a Fluentized desktop design system for OneDrive to bridge the design gap.

Overview of Windows and Mac components and styles.

Before and after of the OneDrive desktop app on Mac. Introducing native components and using a more harmonious palette helped achieve a more approachable look and feel.

Problems and Goals

Overall, there were two main problems that needed to get addressed:

1. The desktop app design is over 4+ years old and did not align with Microsoft's new Fluent Design Language – with over 40+ million monthly active users on desktop, we were missing out on an opportunity to make the customer experience the best it could be.
2. Designers and engineers create components, such as buttons, from scratch every time they design a new desktop feature – this introduced an unlimited amount of inconsistencies in the visual language.

My goal was to align the visual look and feel to that of web and mobile to achieve a One Microsoft system and create a reusable library within Figma that can be utilized by designers and engineers when designing new experiences. 

Desktop OneDrive app compared to Fluentized mobile and web surfaces – there was opportunity to achieve a unified system across endpoints.

The Team

I initiated this project early into my career at Microsoft and was able to gain support quickly from the desktop team. The core team consisted of me as the designer, a project manager, and an engineer.

Inventory

My process started out by doing an inventory of all components that are used on desktop experiences, anything ranging from buttons to controls, lists, and even illustrations. This helped me get an idea of how large the effort would be and how to structure the Figma library.

Just a few components that can be found on desktop.

Understanding the Fluent Design System

The heart of Fluent lies in its ability to feel natural on every device – the design system adapts to different surfaces, sizes, and settings. Although, when viewed side by side, mobile and web experiences look unified but they still have their own differences. For example, Fluent web uses smaller height buttons with soft rounded corners while iOS aligns more closely with the large OS button style and more rounded corners. 

I wanted this principle to be true in OneDrive desktop experiences so that users can have a delightful interaction with Microsoft products.

Differences in styles between endpoints in Fluent.

Deciding to Align With Fluent Web

After studying the Fluent Design Language on the web, iOS, and Android, the most logical decision was to align the visual design of desktop with Fluent web. Since both OneDrive web and desktop apps appear on large screens that are usually mouse oriented, they're more likely to be seen together. 

OneDrive desktop onboarding and file manager on Mac using Fluent web styles and components.

Bridging the Gap Between Brand and OS

The outcome on Mac made it difficult for the experience to feel very natural, especially when compared to the overall macOS ecosystem. I went through an exercise of introducing native macOS components to the initial design to bring a good balance of brand and OS to achieve a natural look and feel. I worked on a spectrum of Fluent-to-Native to see how the designs would look if they used more Fluent vs. more native components.

Onboarding experience displaying two ends of the Fluent-to-Native spectrum.

What felt natural and balanced was somewhere in the middle of that spectrum. On mobile, Fluent uses platform-specific styles, such as the typeface, to achieve a natural look and feel. Instead of restricting the system to Fluent web, I took the same approach and introduced Windows and Mac styles and a few components to the library in order to bridge the gap between brand and OS.

The final design of OneDrive onboarding on Mac with the use of both Fluent and macOS styles and components.

The difference between Windows and Mac. Both use platform-specific native styles such as typography, color, and components such as menus.

Dark Mode

A large portion of our user base operates in dark mode. Bringing in the Fluent color palette helped make the visual look and feel of dark mode easier on the eye and true to dark mode standards.

Before and after of the OneDrive desktop app in dark mode.

Windows

I went through the same exact process of identifying which native controls to use on Windows, this was a great opportunity to align with the new Windows 11 design. The experience on Windows improved significantly with the design language updates.

Before and after applying design language updates to the OneDrive desktop onboarding experience on Windows. Softer button corners to help give it a more pleasant feel and use of heavier-weight fonts and improved color palette to improve the readability and accessibility.

Final Thoughts

After completing the system, engineering took lead in implementing the designs. The toolkit has since been handed off to a colleague for further improvements. This experience has taught me a few key lessons:

• It's important that the components of a system look and feel as if they are part of the same family, even when platform-specific components are in the mix.
• It's important to structure the system library in a way that is intuitive and easy to navigate for people utilizing it.