See Details

Microsoft's Fluent 2 Website

Fluent 2 is Microsoft’s modern design system. When I joined the project, its documentation was fragmented across legacy files, the system itself was still evolving, and designers and developers had no central destination they could rely on.

The challenge was bigger than launching a website. We needed to turn a fragmented documentation ecosystem into a scalable product that could support different audiences, multiple platforms, and the long-term adoption of Fluent 2 across Microsoft.

Over three years, I co-led the platform as Principal Designer, owning the end-to-end UX, information architecture, interaction design, and visual direction while working with a lean cross-functional team to take it from an evolving concept to Microsoft’s primary Fluent 2 reference.

Client:
Microsoft
Role:
Principal Product Designer / Co-Lead
Timeline:
3+ years
Domain:
Enterprise · Design Systems · Developer Platform
Focus:
Product Strategy · Platform UX · Information Architecture
Outcome:

Fluent 2 reference, 250K+ users in first month

Signal:

Product strategy · Design at scale · Cross-functional influence

My Role

I served as Principal Designer and UX lead for the Fluent 2 platform, responsible for shaping the end-to-end product experience and establishing a scalable foundation for long-term adoption.

As the sole product designer on the core team, I owned the information architecture, platform UX, interaction strategy, and visual direction, working closely with product, content, and engineering from early definition through implementation and launch.

My scope extended beyond individual features to the system as a whole: defining how designers and developers navigated Fluent guidance, how multiple platforms were represented within one experience, and how the product could evolve as Fluent 2 expanded across Microsoft.

Team & Collaboration

  • Core team: 1 Principal Designer (myself) · 1 Content Designer · 1 Front-end Engineer · 1 Product Manager
  • Extended team: Fluent Design, accessibility, illustration, and engineering partners consulted throughout the project
  • Development support: Additional engineering contractors during specific implementation phases
  • Cross-functional: Partnered with Microsoft product and platform teams to support Fluent 2 adoption and migration across the organization

Challenge and Goals

When I joined, Fluent 2 was still evolving and its documentation existed only partially across legacy files and disconnected sources. There was no clear structure, no single source of truth, and no scalable experience connecting designers and developers to the guidance and resources they needed.

The challenge was to create more than a documentation site. We needed a product foundation for Fluent 2 adoption that could evolve with the system, support different user needs and platforms, and remain manageable for a lean team.

The primary goals were to:

  • Create a clear, scalable information architecture for designers and developers
  • Support Web, iOS, and Android within a unified platform experience
  • Establish reusable patterns that could scale with new guidance, components, and product needs
  • Meet Microsoft standards for accessibility, performance, and usability
  • Create a foundation for long-term adoption across Microsoft products and teams

Discovery and Research

I began by auditing the existing Fluent 1 experience and working with Fluent leadership to understand the long-term direction of the design system. With support from the core team, I used surveys and 1:1 conversations with designers, engineers, and product managers to identify where the existing experience was breaking down.

A key tension emerged between our primary audiences. Developers needed fast, structured access to implementation guidance and code, while designers relied more heavily on visual guidance, patterns, and Figma resources. Rather than forcing both audiences through the same path, these differences became a key input into the platform’s information architecture, navigation, and content hierarchy.

Research also needed to continue after launch. I designed a persistent, contextual feedback system that allowed people to respond directly from the guidance they were using, giving the team an ongoing signal for where content was unclear, incomplete, or difficult to find.

These insights shifted the work from simply reorganizing documentation toward designing an experience around user intent rather than Microsoft’s internal structure.

Evolution of IA
User research questionnaire capturing early feedback on the website.
Feedback tool explorations
No items found.

Design Approach

I approached the website as a product rather than a static documentation hub. The experience needed to make a large and evolving system understandable while remaining flexible enough to grow without constant redesign.

A central principle was to organize the experience around user needs rather than Microsoft’s internal structure. Designers and developers often arrived with different goals, so the architecture and navigation needed to help each audience reach relevant guidance quickly without creating separate, fragmented experiences.

Supporting multiple platforms introduced another layer of complexity. Fluent components could differ across Web, iOS, and Android, but duplicating documentation would make the experience harder to navigate and significantly increase maintenance. I designed a platform-switching model within a shared component structure, allowing users to move between platform-specific guidance while maintaining context.

I also worked closely with engineering to keep the system modular and maintainable as Fluent 2 evolved. Reusable page structures and interaction patterns allowed new guidance and components to be added without rethinking the experience each time.

One important trade-off was deciding not to recreate technical implementation documentation already maintained in Storybook. While bringing everything into one destination initially appeared simpler, duplicating that content would create competing sources of truth and increase maintenance for our small team. Instead, we positioned the Fluent 2 website as the guidance and experience layer while keeping implementation details closer to their engineering source.

As adoption grew, the platform also became part of a broader effort to understand how Fluent 2 was being adopted across Microsoft. I partnered with engineering and design leadership on adoption scorecards that gave teams greater visibility into Fluent 2 usage and migration from legacy components across products including Copilot and Microsoft 365.

Platform-switcher anatomy example
Photo of platform-switcher on the website
No items found.

Interaction and Visual Design

The interface needed to demonstrate Fluent 2 while documenting it. I used Fluent’s own tokens, components, typography, and interaction patterns throughout the experience, allowing the platform itself to serve as an example of the system in practice.

I designed for light, dark, and high-contrast modes, with accessibility treated as a core requirement rather than a separate layer. Interaction and motion were used selectively to clarify state, hierarchy, and navigation without competing with the content.

Working closely with engineering, I reviewed implementation throughout development and documented UI, interaction, and accessibility issues directly in GitHub. This kept design involved beyond handoff and helped maintain consistency as the experience moved from Figma into production.

The result was an interface that could express the Fluent 2 brand while remaining systematic, accessible, and scalableas the platform continued to grow.

Light and dark theme of Fluent 2 landing page
No items found.

Special Focus

Information Architecture: Structuring for Clarity and Scale

Information architecture was a core platform challenge. Fluent 2 needed to serve designers and developers with different goals, support multiple platforms, and accommodate a design system that was continuing to evolve.

This included:

  • Global navigation for high-level wayfinding
  • Local navigation for contextual orientation
  • Shared component structures connecting guidance across platforms
  • Deep-linking through anchors and headers for direct access to specific guidance

I designed the architecture around user needs rather than Microsoft’s internal structure, giving designers clear access to guidance and Figma resources while allowing developers to move efficiently between documentation, implementation, and tooling.

Component documentation added another layer of complexity. Guidance could differ across Web, iOS, and Android, so the model needed to preserve a coherent experience without fragmenting content into disconnected destinations.

The architecture evolved through research, stakeholder feedback, and implementation constraints, ultimately creating a scalable model that could absorb new guidance and components as Fluent 2 grew without requiring the experience to be continually restructured.

Two images illustrating the evolution of a website component page: an early design concept featuring content organized with tabs, contrasted with the final implemented version showing a streamlined, single-page layout.

Outcome and Impact

Fluent 2 launched at Microsoft Build 2023 as the official home of Microsoft’s evolving design system. Within its first month, the platform reached 250,000+ users and became the primary reference point for Fluent 2 guidance and adoption across Microsoft and its partners.

Beyond launch, the platform became part of how teams navigated the transition from legacy systems to Fluent 2. Its structure supported ongoing guidance and contribution, while adoption scorecards gave leadership greater visibility into migration progress across products including Copilot and Microsoft 365.

Impact:

  • 250,000+ users in the first month, growing to approximately 200K monthly active users
  • Operationalized Fluent 2 adoption through cross-team scorecards tracking new adoption against legacy baselines
  • Enabled leadership visibility into migration progress across Copilot and Microsoft 365 web experiences
  • Established a primary source of truth for Fluent 2 guidance, alignment, and contribution
  • Created navigation and structural patterns that influenced other documentation initiatives across Microsoft
"His systems-thinking mindset helps scale design excellence."
Kurtis Beavers - Partner Design System Director @ Microsoft
"We handed Filip a complex project that had stalled for years. He delivered."
‍
Dr. Alice Ferng - Director of Innovation & Technology @ Microsoft
"Filip pushed the Fluent site forward with vision, clarity, and care."
Ian Guisard - Fluent 2 Senior Designer @ Microsoft
Picture of Instagram post by Microsoft Design about Fluent 2 website release.
My final code merge in Github before my last day at Microsoft.
No items found.

Key Learnings

Working on Fluent 2 reinforced that designing at organizational scale is rarely about individual screens. The harder problems are creating structures that can evolve, establishing clear ownership, and helping different teams move in the same direction.

A major part of the work was learning to operate across teams and organizational boundaries, each with their own priorities, dependencies, and delivery timelines. Progress often depended less on controlling the roadmap and more on creating alignment, adapting to constraints, and maintaining momentum across groups I didn't directly own.

Treating the website as a product rather than a publishing destination changed how we approached the work. Information architecture, contribution models, implementation decisions, and adoption all became interconnected parts of the same system.

If I were approaching the platform again, I would establish adoption measurement earlier in the product lifecycle, giving the team stronger behavioral signals alongside qualitative feedback as the experience evolved.

Ultimately, Fluent 2 demonstrated how design can move beyond delivering an interface to create infrastructure for alignment, adoption, and change across an organization.