What
In early 2024, Microsoft's Inclusive Design site hadn't been updated since 2016. The site provides a variety of materials, such as guides, worksheets, and activity cards. As a critical resource serving designers, engineers, and PMs worldwide, there was strong potential to enhance accessibility standards, improve scalability for Microsoft's growing design system ecosystem, and leverage new web technologies to better serve diverse user needs.
Task
As the lead engineer for the redesign, I was tasked with modernizing the existing site by iterating on its current foundation and enhancing it with Microsoft's latest design system. The goals were to:
Upgrade all components to Fluent UI 2 while maintaining alignment with Microsoft's evolved design system
Expand the component library with new reusable UI patterns to support growing content needs
Enhance accessibility features to support multiple color modes (light, dark, high contrast) and reading layouts including a grid or list view
Build a scalable, performant multi-page navigation system with optimized information architecture
Ensure mobile-first responsive design across all device sizes
Engineering
Technical Implementation:
Architected and developed a component-driven system using React and Next.js, creating reusable UI patterns that maintained design consistency across the entire site
Built custom Fluent 2 components with built-in a11y support, implementing ARIA patterns, keyboard navigation, and screen reader optimization
Stored all resources as structured data for easy scalability and search functionality, enabling dynamic content rendering
Implemented a mobile-first responsive architecture with CSS Grid and Flexbox, ensuring fluid layouts across breakpoints with progressive enhancement for desktop and tablet views
Optimized performance through code splitting, lazy loading, and asset optimization, utilizing Lighthouse to achieve performance benchmarks
Accessibility & UX Engineering:
Engineered multiple viewing modes with semantic HTML and CSS custom properties for seamless theme switching
Designed and implemented intuitive navigation patterns with search functionality for improved content discoverability
Created downloadable long-form toolkit pages and PDFs, built programmatically to ensure accessibility compliance
Results
Scalability & Developer Experience
Built modular component library supporting easy scalability for the growing library of toolkits and resources
Created reusable component patterns (e.g., article pages, resource flashcards) that accelerated future development
Performance & Accessibility
Achieved 95+ Lighthouse scores across performance, accessibility, and best practices through optimization techniques including tree-shaking, image optimization, and efficient rendering patterns
Successfully implemented WCAG 2.1 AA compliance across all components, verified through automated testing and manual screen reader validation
Adapdability & User Impact
Delivered 4 distinct viewing experiences (light/dark/high contrast modes + list/grid views) giving users control over their experience
Enabled self-service content updates through structured data architecture, reducing maintenance overhead