Inclusive Design Site
Dev owner of Microsoft’s Global Inclusive Design Kit
I led the modernization of Microsoft’s Inclusive Design site, transforming it from an outdated MS doc site into an accessible, engaging, and brand-aligned platform.
My work improved usability, ensured WCAG compliance, and elevated the overall user experience—making inclusive design principles easier to discover and apply.
The site has achieved global recognition, with organizations like the United Nations referencing it as a gold standard for inclusive design. A complete redesign is now underway to further enhance its impact.
What is the Inclusive Design Site?
The Inclusive Design site is Microsoft’s public-facing resource hub for teaching and promoting Inclusive Design principles. It provides:
Guidelines and methods for designing products that serve diverse users.
Case studies and examples to illustrate inclusive practices.
Tools and resources for designers, engineers, and product managers to integrate accessibility and inclusion into their workflows.
Its purpose is to empower teams and partners to create experiences that are usable by everyone, regardless of ability, language, or context.
Problem
Microsoft’s Inclusive Design principles are foundational for creating products that serve diverse users. However, the previous Inclusive Design site had outdated content, limited accessibility, and poor navigation, making it hard for teams and external partners to apply these principles effectively.
The challenge: modernize the site to improve usability, accessibility, and engagement, while preserving its role as a trusted resource for inclusive design practices.
Process
-
Scoping
Broke down deliverable into epics, work items, and tasks to estimate engineering cost and resourcing.
-
Building
Bi-weekly check-ins with stakeholders to showcase progress, blockers, and review questions.
-
Hand off
Launched in March 2023. Presented by Microsoft CEO Satya Nadella at Build.
Check out FastCompany’ s article.
Engineering Contributions
Lead Engineer – Full Build & Deployment
Developed a customized site from the ground up using React and Next.js, implementing server-side rendering for performance and SEO.
Built a component-driven architecture with reusable UI patterns and integrated Fluent UI theming for brand consistency.
Implemented robust responsive design using advanced breakpoint strategies and CSS Flexbox for optimal layouts across devices.
Accessibility & Compliance
Applied WCAG 2.1 AA standards throughout the site:
Color contrast validation.
Keyboard navigation and focus management.
Advanced screen reader support using ARIA roles and semantic HTML.
Integrated automated accessibility testing into CI/CD pipelines.
Performance Optimization
Reduced page load times by optimizing image delivery
Implemented Next.js static generation and caching strategies for faster rendering.
Deployment & Infrastructure
Set up Azure hosting and deployment pipelines for reliability and scalability.
Later secured resources and pipelines to comply with internal security audits and corporate governance policies (encrypted data handling, role-based access, JIT, privacy and security reviews, etc.)
Impact
Global Recognition: The United Nations cited the Inclusive Design site as a resource for accessibility best practices. Satya Nadella gave a demo at Ignite 2023. Multiple press releases, like FastCompany’s.
Improved Accessibility: Site now meets WCAG 2.1 AA compliance.
Higher Engagement with thousands of users a month
Better Developer & Designer Experience: Clearer navigation and actionable resources for inclusive design.
Brand Alignment: Visual refresh aligns with Microsoft’s design language.
Next Steps (In Progress)
A complete redesign is underway, featuring a new Fluent 2 aligned design system, enhanced storytelling with interactive examples, and personalized learning paths for different roles (designers, engineers, PMs).