I served as the Principal Designer and lead for the website’s UX and visual design, acting as the primary designer throughout most of the project. I partnered with a content designer, PM, and a front-end engineer while collaborating closely with Fluent design, accessibility, and illustration teams, as well as external developers across time zones.

I owned information architecture, interaction design, visual direction, and execution quality across the experience. Key features I led included dark mode, platform switching, component navigation, login, and an embedded feedback system. While content was owned by a content designer, I shaped the end-to-end experience to ensure clarity, accessibility, and long-term scalability.

When I joined, the Fluent 2 website existed only partially in legacy files. Documentation was fragmented, the system was still evolving, and there was no clear structure or visual direction.

The primary goals were to:

• Establish a clear, navigable structure for designers and developers
• Showcase Fluent 2 using its own tokens and components
• Ensure accessibility, performance, and scalability
• Support multiple platforms in one unified experience
• Enable direct user feedback to guide iteration

I began by auditing the Fluent 1 site and interviewing the Fluent Design Director to understand the system’s long-term ambition. With support from the core team, I led surveys and 1:1 interviews with designers, engineers, and PMs to identify needs and friction points.

Key insights revealed two distinct priorities: developers wanted structured access to code and examples, while designers needed visual guidance and Figma resources. To support continuous feedback post-launch, I designed a persistent, in-page feedback tool, enabling users to submit context-specific input without interrupting their flow.

These insights directly shaped the site’s structure, navigation, and content hierarchy.

I treated the website as a product, not a static documentation hub. I restructured the information architecture around user goals rather than internal categories, defining scalable templates with consistent hierarchy and navigation patterns.

I introduced a tabbed approach for component guidance and a platform switcher for Web, iOS, and Android views. Reusable layout rules and modular components were established in collaboration with engineering to support long-term growth and maintainability.

Despite limited resources, I coordinated cross-time-zone development efforts, maintaining a tight design-to-implementation feedback loop to ensure quality, accessibility, and consistency through launch.

I designed the responsive layout and interaction patterns, including sticky navigation, anchors, callouts, code blocks, and accessible focus states. Motion and micro-interactions were used deliberately to enhance clarity without adding visual noise.

While most of the UI leveraged Fluent tokens and components, I designed several custom elements, including the platform switcher and feedback tool, aligning them closely with the Fluent visual language. I led the creation of the dark theme, ensuring both aesthetic quality and accessibility compliance.

Information Architecture: Structuring for Clarity and Scale

Information architecture was a cornerstone of this redesign. I got hands-on, defining a scalable taxonomy for all our content, which really helped shape guidance into formats that were not just discoverable, but genuinely user-friendly. A big part of this involved setting up consistent navigation models:

• Global navigation for the big picture, high-level wayfinding.
• Local navigation to keep users grounded within specific sections.
• Tabbed views right inside components for crystal-clear detail.
• Anchors and headers for quick jumps and direct links, because who doesn't love a shortcut?

This whole approach was user-centric from the get-go. It was about getting new folks onboard quickly and letting everyone confidently zip between sections. But IA wasn't just a win for users. It also made life a lot smoother for our content creators and engineering teams. By standardizing templates and sidestepping those annoying one-off layout complexities, we made sure the site could grow without turning into a tangled mess of digital spaghetti.

From day one, the challenge was weaving design, code, and guidance into a single, cohesive spot that worked equally well for designers, developers, and every other stakeholder and platform. We were aiming for a true "north star" for the Fluent ecosystem. The IA was absolutely critical in bringing these diverse needs into alignment, making sure the site served all our different audiences without anyone getting lost in translation.

‍

Iterating on Component Guidance: A Story of Tabs and Tough Choices

Early designs separated guidance into multiple, detailed tabs. Through stakeholder feedback and practical evaluation, I made a strategic decision to consolidate this content into a simpler, unified layout. Deep technical documentation remained in Storybook, reducing maintenance complexity while improving clarity and usability.

This decision helped shift internal perception of Fluent 2 from an abstract concept to a practical, trusted system.

‍

The Fluent 2 website launched at Microsoft Build 2023 as the official home of the design system. Within the first month, it attracted 250,000+ users and became the primary reference point for Fluent adoption across Microsoft and its partners.

Its structure and navigation patterns have since influenced other documentation initiatives within Microsoft. Core features including the platform switcher, dark mode, and feedback tool remain central to the experience and continue to support ecosystem growth.

More than a website, the platform transformed Fluent 2 from a fragmented idea into an actively used, trusted, and expanding design system.

‍

"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}

This project reinforced the importance of structure, clarity, and scalability when designing for large, diverse audiences. Strong information architecture proved just as critical as visual and interaction design.

I strengthened my ability to balance vision with practicality, align cross-functional stakeholders, and advocate for user needs through both data and intuition. Most importantly, I saw how a well-designed system can build trust, enable collaboration, and shift organisational mindset.

Fluent 2 became not just a product, but a shared platform for contribution, alignment, and innovation.