03 · Design system · Microsoft

People UI Kit

People UI Kit provides a shared design foundation for experiences such as People in M365 Copilot and the Microsoft 365 profile card.

It addresses a recurring problem: teams rebuilding similar elements independently, with differences in both appearance and behaviour. My work combined design leadership with contributions to components, patterns, icons and reference designs, alongside alignment between design and code. The aim is to give teams reusable foundations that carry a consistent People experience across different product surfaces.

Company: Microsoft · People Experiences
Role: Design leadership & design-system contribution
When: 2025 — 2026 · Apr 2025 onwards
Disciplines: Design System, Components, Design–code alignment

The problem

Several People surfaces — the agent, the profile card and more — kept rebuilding the same elements independently. Without a shared foundation they drifted apart visually and behaviourally.

What I owned

Design leadership for the shared kit and its reference designs
Design/code alignment so components behave the same in Figma and in product
Reusable visual foundations used across People in M365 Copilot and Profile Card

How I built it

Related agentic experimentation: generating screens directly from the UI kit using Copilot and Figma tooling.

Why a kit

People information shows up in many Microsoft 365 surfaces at once. A shared kit means a person, a team or a relationship looks and behaves the same wherever it appears, and product teams start from tested patterns instead of from scratch.

Headers and composers. Shared entry patterns for Home, Organization, Skills and an individual profile.

Copilot navigation alongside People navigation with favorites, references and conversations. — Navigation. People within Copilot, with favorites, references, suggested references and conversations about a person.

Action buttons. Reusable icons and interaction-state variants for common People actions.

Prompt starter lists in horizontal, stacked, expanded and collapsed arrangements. — Prompt starters. Horizontal and stacked layouts, with expanded and collapsed lists for different contexts.