04 · Design system · Microsoft

Profile Card in Microsoft 365

The Microsoft 365 profile card brings professional context, contact details and collaboration information into the places where people already work, including Teams and Outlook.

Designing it as a shared experience means balancing a recognisable core with the constraints of each host application. Across multiple iterations, I led work on richer colleague context, connection recommendations and cross-endpoint consistency, staying close to the interaction and visual details that make the card feel coherent wherever it appears.

Company: Microsoft 365
Role: Design Lead / Design DRI, later People Experiences design leadership
When: 2022 — 2026 · ~4 years, across multiple iterations
Disciplines: Product Design, Cross-surface consistency, Craft

The problem

The same card appears across Teams, Outlook and other endpoints. Each surface has its own constraints, but the card has to feel like one thing everywhere.

What I owned

Richer professional context about colleagues
Contact and collaboration information
Connection recommendations
Cross-endpoint consistency across Microsoft 365

Design craftsmanship across multiple iterations

Understanding a person, in context

The profile card is a shared view of a person inside Microsoft 365. It brings their role, contact details, skills, reporting relationships and collaboration context into the places where you already encounter them, including Teams and Outlook.

Each layer answers a different question: who is this person, where do they fit, what do they know, and how are we connected? Together, these details help you prepare for a conversation, find relevant expertise and choose a way to reach out without piecing together context from separate places.

One component, many hosts

Over roughly four years and several iterations I led the design of the card as a shared experience, balancing what must stay consistent across endpoints against what each host surface needs to adapt.

Who is this person? The profile overview brings together role, contact details, skills and shared activity, helping you understand a colleague beyond their name and choose how to connect. Shown in light and dark mode.

Light and dark organization tabs showing a colleague's managers, direct reports and collaborators. — Where do they fit? Reporting lines, direct reports and collaborators place a person in their team context, helping you understand their responsibilities and connections. Shown in light and dark mode.

Context in a smaller space. Contact details, skills and collaboration signals reflow into a single column, keeping information about a person available in a narrow host surface. Shown in light and dark mode.