Yammer Insights

Design system for data insights, with a focus on scalability, responsiveness, and information architecture.

User Problem

Corporate communication professionals have no means to evaluate their promotion strategies.

Since COVID, soaring Yammer adoption led to urgent customer demands on richer performance insights on communities and Live Events.

Solution

An insights design system focusing on rich data presentation and scalability.

Community insights - Overview + Q&A sections

Live Event insights - Reach + Engagement sections

And here's how we got there:

01
reframe

Merging 2 disjointed projects to approach all as a system.

02
iterate

Iterating on data choices, navigation UX, and visual systems.

03
Validate

Early customer calls & internal release to de-risk investment.

04
Scale & repeat

Ongoing system-level iterations to support more use cases.

01  reframe

Merging two projects into one.

Insights started as two separate projects: community insights needing an UI update and Live Event insights a brand-new product line needing a "MVP" release.

However, the lack of cross-team collaboration led to numerous design inconsistencies, foreseeing scalability and integration issues.

02  Iterate

A. Re-evaluating data choices.

Upon project merging, we first consolidated our research to understand our target users' needs and then worked to identify & prioritize data choices.

This list of data allowed us to establish data categories & navigation hierarchy and to ask customers about data prioritizations.

02  Iterate

B. Creating scalable navigation UX.

Parallel to the data work, we sought to find a navigation system that'd accommodate and grow with the “feed-in-feed” structure.

After conducting analogous products and iterations, we landed on a “page + panel” structure to reduce context-switching while building in future scalability.

03  VALIDATE

Finding a clearer path forward.

We built a concept prototype and had our customers do a talk-a-loud walk through (n=12, corp comms, community admins, and live event organizers). We achieved:

  • 100% task completion

  • data validation & preferences for the 1st release

  • 100% customer opted-in for Customer Preview


Below illustrates the research-based iteration for Live Event insights:

04  SCALE & Repeat

Building a design system.

Once we anchored the product spec, we went into the details of an insights design system from pattern, color, accessibility, and responsiveness that was unique to Yammer (M365 guidance was limited then).

We continued iterating both the products and the design system through more customer feedback and feedback from more designers (for instance, our intern pointed out key improvement areas when building conversation insights).

FINAL DESIGN

Shipping it to the world.

As of March 2021, community insights and Live Event insights are available to all Yammer customers. We are looking forward to observing usage from a much larger scale, receiving feedback, and continuing to enhance the user experience.

Below is a demo video from our Oct'20 Ignite presentation.

Reflection

Failing fast

It wasn't easy to admit that we overlooked the scaling issue initially, but I'm glad that we made the commitment as a team to pivot early on.

Building a vision

Despite the time crunch, we built and validated a design vision so that leadership understood the complexity and return in investment when we invest in a complete design system.

Growing is inevitable

As much as we anticipated scalability in our design, we acknowledge that we will need to continue growing this system with the platform itself. Our goal is to bring users along with a consistent UX pattern.

© 2021. Angela Wang. All rights reserved. website change log