Richer Relationships with People-Centered Design

How we built a coherent design framework that puts people first

How often do you get an email or walk into a meeting not knowing much about the people you’re about to collaborate with? We see that more than half of the emails our users receive are from people outside their immediate workgroup. How can we make sense of these names in ways that both reflect and forge real-world connections?

People and relationships are at the core of everything we do in our lives, from grabbing coffee to starting a new project. Understanding our relationships to other people, and the relationships among people we know, is a key part of the human experience. Sharing these nuances of identity and relationships in the tools we use every day is the next step in reflecting reality in our digital lives.

Social building blocks

To answer this challenge, we’ve redesigned People experiences across our products.

With People, we aim to translate interpersonal relationships into coherent, useful experiences. Leveraging social and professional contexts — the kinds of connections we naturally make as humans — throughout product experiences helps people organize both their work and personal lives in a way that puts people first.

People is not a standalone product. Instead, it’s a piece of all Microsoft products that is designed to feel native based on context.

Just as people are the building blocks of relationships, People cards are the building blocks of this framework. People cards are an essential part of the People Experience in Microsoft products; it’s what comes up whenever you click on a profile picture in any product. And if we know one thing, it’s that people click on people. You’ve probably done so yourself on a social media platform in the last day or so.

These digital interactions can serve a variety of purposes:

• Contact (“Knock knock!”)
• Contextualize (“Who is this person?”)
• Re-find (“Where is that one thing I saw that one time?”)

To support all these interaction types, we designed People cards to prioritize flexibility. Each People card displays varied content panels that provide insight into who this person is, where and who they work for, and even what they’re working on just to name a few examples.

Coherence, not uniformity

Ensuring connected design experiences is always important, especially in a large distributed organization like Microsoft. When the product itself represents real people, the stakes are even higher.

This is where Fluent and the core principles of communal design come into play. Designing for People is an exercise in bringing a variety of product and platform design teams together to work as one. In this process, different teams learn to reconcile unique product goals with a broader view of the shared ecosystem to drive coherence.

This approach doesn’t mean copying and pasting design decisions. Instead, coherence builds expectations and trust through familiar experiences. This consistency reduces the need for our customer to re-learn as they travel across our products.

“Creating coherent experiences is not the job of a single team or department; it’s the result of a collaborative process across product teams and flexible shared tools that enable everyone to build on top of the same foundation.”

— Benedikt Lehnert, Director of Design, Microsoft Mobile

Each product’s People experience is a little different, but the commitment to our design system ensures these differences are meaningful. Components allow us to remain consistent while adapting to specific products.

For example, in Outlook, your People experience may highlight email conversations or even meeting invites you’ve shared. While on OneDrive, you might see insights from shared files.

Having a coherent People experience everywhere give us the modularity to represent relationships in flexible ways while maintaining a unified design philosophy.

A tale of two brands

This balance between cohesion and flexibility extends beyond product teams. Sometimes, our design choices need to bridge distinct brands as well.

As designers seeking to integrate LinkedIn into People experiences in Office and other products, we blended these brands to retain familiarity where it matters most while creating a coherent whole. This process required trust and respect between design teams from both companies. We used much of what we learned from working across different product teams to understand and craft the ideal design relationship between People and LinkedIn.

People cards provide a strong foundation for the types of social information LinkedIn provides. In return, enriching this information with insights from LinkedIn gives people even more opportunities to understand each other.

In integrating LinkedIn with People, we kept several elements true to their LinkedIn design origins, such as the header treatment, and the format of a person’s profile content. These differences give people context about where this info comes from and how they can continue to connect. Working effectively across teams and brands helped us craft experiences that make sense of heterogeneous information and feel seamless.

It’s always personal

People are the core of our experiences. Relationships with others help us engage with our work and organize our lives — and have fun doing it. It’s no small task to capture the nuances of social context across products. Still, the work behind People is a step in the right direction to celebrate the power of people as social, curious, meaning-making machines. It’s another way we keep people at the center of everything we create.

Special thanks to Katrine Svela, Joseph McLaughlin, Oleg Melnychuk, Stefan Debald, Matt Cox, Jason Custer and Berit Herstad for working on the article with me. And for all your help in making people-centric experiences come to life in our products.

To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.