03 · Designsystem · Microsoft

People UI Kit

People UI Kit gir et felles designfundament for opplevelser som People in M365 Copilot og profilkortet i Microsoft 365.

Det tar tak i et tilbakevendende problem: team som bygger lignende elementer hver for seg, med forskjeller i både utseende og oppførsel. Arbeidet mitt kombinerte designledelse med bidrag til komponenter, mønstre, ikoner og referansedesign, samt samsvar mellom design og kode. Målet er gjenbrukbare fundamenter som gir en konsistent People-opplevelse på tvers av produktflater.

Selskap: Microsoft · People Experiences
Rolle: Designledelse og bidrag til designsystemet
Når: 2025 — 2026 · fra april 2025
Fagområder: Designsystem, Komponenter, Samsvar mellom design og kode

Problemet

Flere People-flater – agenten, profilkortet og flere – bygde de samme elementene hver for seg. Uten et felles fundament gled de fra hverandre, både visuelt og i oppførsel.

Hva jeg hadde ansvar for

Designledelse for det felles kitet og referansedesignene
Samsvar mellom design og kode, slik at komponentene oppfører seg likt i Figma og i produktet
Gjenbrukbare visuelle fundamenter for People in M365 Copilot og profilkortet

Slik bygde jeg det

Tilhørende agentiske eksperimenter: generering av skjermbilder direkte fra UI-kitet med Copilot- og Figma-verktøy.

Hvorfor et kit

Informasjon om personer vises i mange Microsoft 365-flater samtidig. Et felles kit gjør at en person, et team eller en relasjon ser lik ut og oppfører seg likt overalt – og at produktteam starter fra utprøvde mønstre i stedet for blanke ark.

People-toppfelt og meldingsfelt for Hjem, Organisasjon, Ferdigheter og en enkelt profil. — Toppfelt og meldingsfelt. Felles inngangsmønstre for Hjem, Organisasjon, Ferdigheter og en enkelt profil.

Copilot- og People-navigasjon med favoritter, referanser og samtaler. — Navigasjon. People i Copilot, med favoritter, referanser, foreslåtte referanser og samtaler om en person.

Ikoner for profil, organisasjon, chat, samtale og andre handlinger i standardtilstand, ved peker, nedtrykt og deaktivert. — Handlingsknapper. Gjenbrukbare ikoner og varianter av interaksjonstilstander for vanlige People-handlinger.

Promptforslag i horisontale, stablede, utvidede og sammentrukne lister. — Promptforslag. Horisontale og stablede oppsett, med utvidede og sammentrukne lister for ulike sammenhenger.

Komponent for kommende interaksjoner med korte og utvidede personlister, lasteplassholdere og en feiltilstand. — Kommende interaksjoner. Korte og utvidede lister samt laste- og feiltilstander.

Komponentoversikt for personvisningen med møte- og fasilitatortilstander, emnekart, personsøk og fremdrift for oppsummering. — Personvisning. Møte- og fasilitatortilstander, emnekart, personsøk og fremdriftsmønstre for oppsummering av samtaler.