I was the Principal Designer responsible for leading the entire UX and visual design effort of the website. I collaborated closely with a content designer, a PM, and a single front-end engineer. I was involved in everything from defining the site’s information architecture and interaction design patterns to driving visual direction and quality. I worked closely with the Fluent design and accessibility teams to stay aligned with evolving guidance, and collaborated with an internal illustration team to help define a visual brand language. Other designers contributed at key points to help spec specific website elements ensuring alignment with Fluent 2, but I remained the lead designer throughout the project. My role required both executional depth and strategic thinking as I operated as the only designer throughout most of the project. I was also responsible for the design and implementation of design features like dark mode, the platform switcher, employee login, components page navigation, and feedback collection tooling.

It's important to clarify that the content itself, including the language and structure of how components were documented was fully owned by a content designer. My responsibility was to shape the experience around that content and ensure it was accessible, legible, and visually coherent.

When I joined the project, Fluent 2 website only existed partly via old Figma mockup. Fluent 2 was still evolving and its documentation was fragmented and inconsistent. Questions like "What is Fluent" were still somewhat unanswered. There were no clear guidelines for structure or visual design, and the experience wasn’t keeping pace with the needs of the teams adopting Fluent.

Our goals were:

• Create a clear and navigable site structure for both designers and developers
• Showcase Fluent 2’s visual sophistication using its own system tokens and components
• Ensure accessibility and performance across a global audience
• Introduce a flexible architecture that could scale with new guidance
• Support multiple platforms through a unified documentation experience
• Provide tooling to gather direct feedback from users on site quality and content gaps

Before diving into design, I conducted a comprehensive audit of the existing Fluent 1 website and interviewed the Fluent Design Director to understand his long-term vision for the system and how it needed to evolve. From there, I led both qualitative and quantitative research efforts with the help of core website team to identify pain points and opportunities for a better experience. We initially distributed surveys to internal stakeholders and users who were granted early access to the website before the public launch. We complemented this with follow-up 1:1 interviews to clarify needs across disciplines, from designers to engineers and PMs, when we had additional questions. These insights helped us shape a “north star” vision for a unified platform that could bridge guidance, design, and code in a single experience.

Once the site went live, and to actively encourage ongoing user feedback directly within the experience, I pushed for and then designed an embedded feedback tool. This was crucial for continuously collecting bug reports, suggestions, and usability insights. To ensure this mechanism was both non-intrusive and omnipresent, I iterated on several design patterns, from a potentially content-obscuring side drawer navigation (common in some productivity tools) to a disruptive modal window. Through user testing and strategic evaluation, I ultimately landed on a persistent floating action button positioned in the bottom-right corner of every page. This placement ensures the tool is always at the user's fingertips, maximizing discoverability and accessibility without detracting from the primary content. This thoughtful design choice allowed our website visitors to easily provide context-specific feedback at any point on any page they visited.

We also kept a steady cadence of outreach to internal teams, proactively seeking input from design and engineering orgs to ensure alignment and relevance. This allowed us to validate and adjust features like the platform switcher, the component tabs, and improvements to information architecture and navigation as the website grew. Throughout this discovery phase, we recognized the different needs of our key personas: developers wanted fast access to code, API tables, and usage examples, while designers cared more about visual guidance, Figma toolkits, and design intent. This dual-lens approach shaped everything from our IA to our content strategy and visual hierarchy.

‍

I approached the Fluent 2 website as a product, not just a parking lot for documentation. The goal was to build something thoughtful, scalable, and actually enjoyable to use, especially for designers, engineers, and PMs who didn’t have time to click through layers of outdated navigation.

One of my first priorities was reorganizing the information architecture and make it scalable. I flattened and simplified the structure, shifting from internal categories to a model based on user goals. I created flexible templates for key page types, each with consistent sections, clear hierarchy, and predictable patterns that made navigation feel intuitive rather than like a treasure hunt.

To reduce friction on component pages, I designed a tabbed interface that lets users quickly jump between design guidance, code, accessibility notes, and Figma files, this area was tweaked a lot overtime due to our resources. I also introduced a platform switcher that helps users toggle between different implementations like Web, iOS, or Android, so nobody had to guess whether they were reading the right instructions.

To keep the site future-proof, I established reusable layout rules and collaborated closely with engineering on grids, spacing, and modular elements. The aim was to help the site scale with content without growing into a mess of mismatched sections or one-off hacks.

We had limited internal resources, so I also led collaboration with an external development team across two time zones. This worked surprisingly well. We established a tight feedback loop, handing off comprehensive reviews at the end of their day, covering everything from design fidelity and implementation quality to bug tracking and accessibility conformance, which they picked it up while I slept.

My role was to steward the project from vision to launch, keeping it coherent through every stage of design, implementation review, and quality assurance, while making space for others to extend the system thoughtfully.

I designed the layout system and interaction patterns for both desktop and mobile use. A large part of my process involved hands-on quality control, rigorously reviewing the implementation of these patterns to ensure they were accessible, bug-free, and pixel-perfect. This included sticky subnavigation, contextual headers, inline anchors, and accessible focus states. I also created consistent patterns for callouts, code blocks, usage examples, and page-level context banners.

Motion was used sparingly and intentionally. I added microinteractions for subtle feedback when switching tabs, scrolling within pages, or navigating between sections. These contributed to a sense of spatial awareness and polish without distracting from the content.

While much of the site leveraged Fluent tokens and components to showcase the design system in action, some parts (like the platform switcher and user feedback tool) required custom components and design elements that didn’t exist directly within Fluent. I designed these to fit our specific needs while staying true to Fluent’s visual style. To ensure consistency, I collaborated closely with Fluent design system designers, aligning new elements with the visual language they created.

I led the creation of the dark theme, designing it from the ground up using Fluent tokens and making sure it passed accessibility standards without looking like an afterthought. I coordinated with engineering and the illustration team to ensure the theming experience felt seamless across visuals and modes, and yes, dark mode looked great too.

I also worked with engineers to make sure these components were implemented using Fluent 2 token language wherever possible, not only for consistency but also to maintain usability, a core part of Fluent 2’s visual guidelines.

Every detail, from typography and spacing to color usage, was carefully considered to reflect Fluent 2’s design principles clearly and cohesively.

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

A pretty pivotal moment in shaping our IA came down to how we presented information on our core component pages. Initially, we explored a tabbed approach for these pages, thinking about distinct sections for style, UX guidelines, accessibility, and code guidelines. The idea was to pack in every last detail for each component aspect.

However, as we ran more feedback sessions, especially with our engineering teams and other key stakeholders, a clear message emerged: we needed to streamline, and maintainability was key. That early feedback showed us that separate usage and code tabs were actually causing a bit of friction. So, based on those insights, I made the strategic call to integrate these elements into a single, cohesive component page layout.

This meant a much smoother experience for users, all the critical info right there, no extra clicks needed. It also neatly addressed our resource constraints and helped our core team's workflow efficiency. We realized that, at that point in time, baking comprehensive code guidelines directly into the website was just too big a technical lift. Keeping that content tucked away in Storybook, where engineers could easily access and keep it updated, was simply the smartest move for us. This tough but necessary decision ensured the site remained manageable and our content stayed fresh, prioritizing a solution that was both sustainable and truly effective.

In fact, some early skepticism from leadership about the design system’s real-world impact started to melt away, partly because the clear IA made the website feel intuitive and genuinely valuable. It really helped build confidence internally. The IA quite effectively transformed what was once a somewhat scattered concept into a living, breathing resource that people actually wanted to visit and contribute to. It became the uniform story and the centralized home for the Fluent Design System.

‍

The Fluent 2 site first launched at Microsoft Build 2023 as the official home for the design system. Within the first month, it received over 1/4 million users and quickly became the go-to entry point for Fluent 2 across Microsoft and its partners.

What is more impressive is that the site did not just launch; it became a living organism. Users were not just visiting once; returning user numbers steadily increased as people saw the site being actively maintained and updated. This demonstrated clear value and growing trust in the resource.

Internally, the design system team adopted our structure as a blueprint for other documentation efforts. Our patterns, information architecture models, and scalable navigation system influenced how Microsoft documents design systems more broadly, shaping workflows beyond Fluent 2 itself.

Key features I introduced, including the platform switcher, dark mode, and feedback tool, have remained central to the experience. The feedback tool, in particular, has enabled ongoing direct user input, helping the team continuously refine and expand Fluent 2’s guidance.

This project went beyond simply launching a website. It instilled confidence across leadership and stakeholders, turning what was once an uncertain proof of concept into a trusted, collaborative resource that designers, engineers, and product teams proudly contribute to and rely upon.

‍

"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 for me the critical importance of structure, clarity, and scalability when working on design systems at any scale. Fluent 2 was not just about visuals or code but about creating a living, evolving framework that could support multiple audiences such as designers, developers, and product managers, each with their own unique needs. I learned how to design website systems that evolve while maintaining coherence and consistency across those diverse needs.

Leading this effort within a small, dedicated team sharpened my ability to advocate strongly for user needs by leveraging both qualitative and quantitative data. The feedback loops we built including interviews, surveys, and a website-integrated feedback tool were essential in keeping our work grounded and aligned with real user pain points and aspirations.

I also grew in cross-disciplinary collaboration by working closely not only with internal engineers and product managers but also with external development partners across time zones. This required clear communication, leadership, and trust building to deliver complex features like the platform switcher and dark mode smoothly despite limited resources.

Another powerful takeaway was how user experience, visual design, and information architecture can elevate technical documentation from static content to a dynamic, engaging, and purposeful resource. Giving space and attention to these elements enabled us to transform the Fluent 2 site into a living organism, fostering pride and ownership among contributors and delight among users.

The project also highlighted how important it is to build confidence with leadership and stakeholders. Early skepticism around the design system gave way to excitement and involvement as we demonstrated consistent progress, open communication, and visible impact. The creation of the shipping room and weekly syncs helped turn uncertainty into momentum.

Finally, this experience deepened my conviction that design systems are as much about people and processes as about pixels and code. Success requires fostering a collaborative culture where everyone feels they can contribute and see their work reflected. That mindset was foundational to making Fluent 2’s home not just a website but a shared platform for innovation and connection.