Design system for data insights, with a focus on scalability, responsiveness, and information architecture.
Since COVID, soaring Yammer adoption led to urgent customer demands on richer performance insights on communities and Live Events.
Community insights - Overview + Q&A sections
Live Event insights - Reach + Engagement sections
Merging 2 disjointed projects to approach all as a system.
Iterating on data choices, navigation UX, and visual systems.
Early customer calls & internal release to de-risk investment.
Ongoing system-level iterations to support more use cases.
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.
To achieve a one holistic approach, we'd merged two project teams into one with me as the lead designer. We'd focus on 3 key areas for our iterations:
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.
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.
Considering time, we simply modeled after the M365 data visualization library plus few Yammer-specific components. This stage was mostly led by our visual designer.
For full system development, see the scale & repeat section.
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:
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).
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.
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.
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.
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.