Giving Components an Identity

A live object people recognize on sight, wherever it lands.

Timeline
May 2020–March 2022
Role
UX Designer · Interaction Design · Platform Design · Visual Design
Team
Design · Product Management · Engineering · Research

Microsoft Loop introduced live components that could move across Microsoft 365. The hard part was making one read as the same live thing in every app it landed in, when every app had its own rules.

A Loop component's standard anatomy — header, live presence cursor, and activity footer Loop's early visual identity — the brand mark and color palette A Loop component synced across Microsoft 365, showing everywhere it appears

Approach

A Loop component had to belong to itself, not the app it lived in. I focused on what needed to stay constant as the component moved across products, what could adapt to its host, and how it should behave as a live, portable object.

  • Anchor identity in one control. Keep identity, sharing, and connections in a persistent element so the component remains recognizable wherever it lives.
  • Separate what travels from what adapts. Define the structure and behaviors that belong to the component itself, while allowing Teams, Outlook, Word, and other hosts to retain their own product conventions.
  • Give portability its own behavior. Explore how the component enters, loads, responds to hover, and feels when experienced natively versus embedded elsewhere, including third-party environments.

What changed

  • A Loop component could remain itself wherever it lived. US Patent 12,277,305

    I defined a persistent interaction model for identity, sharing, and connections so the component stayed recognizable as it moved between Microsoft 365 experiences. Those structural decisions became part of the patented model for shared dynamic objects.

  • Collaborative components moved from concept into Microsoft 365. First components shipped in Teams

    I helped shape the foundational interaction model and early visual identity for the first collaborative components, which shipped in Teams as synchronized tables, lists, agendas, and action items people could work with directly in conversation, and debuted at Ignite 2021.

  • The component structure became something others could build to. Codified in public developer documentation

    The component header and boundary established a recognizable structure for a live, portable object. Those conventions later appeared in Microsoft's public developer guidance, giving other developers a consistent model to build against.

Public footprints

Next case study Helping People Navigate Communities Each community had a sense of place. Moving between them didn't.