Project & Portfolio Dashboards

making monitoring work effortless

  • I led the design of this product. I worked in close partnership with my Product Manager and Tech Lead, and I managed collaboration with a variety of stakeholders.

    • Cross-functional leads

    • 4-6 engineers

Overview


A project should be the source of truth for its own status, progress, and retroactive learnings — but that wasn’t the case before we launched this feature at Asana. Our users were struggling to understand information about their project from a list, or they were forced to export their information into another tool — losing context and valuable time.

After spending time with our users, their spreadsheets, and any other tool they were using to create data visualizations, we set out to create a simple, customizable solution that empowered our users to better visualize and understand the state of their work. To get there, we brought in data visualization experts for a day-long brainstorm and I used that (with a little additional reading) to create a framework of data visualization principles and best practices that guided the charts we offer and how we offer them.

I also partnered with our design system team to create a fluid, column based grid for these and future dashboards to live in so that users can create layouts that give weight and importance to what matters to them.

Read more about project dashboards here.

Placing this work in context

This was the first in product dashboard and the last step before our org-wide reporting solution

Why do this now?

  • Since we had covered most major status use cases, we wanted to move through the reporting life cycle into monitoring.

  • All users use projects, so they provided a container with an explicit set of data we could use to show users the value of reporting in Asana

  • The more users keep all their work in Asana, the more powerful Asana is for them

Product details

  • Preset charts — based on data science and use cases from earlier research

  • Real-time, actionable info without effort

  • Quick filter interactions

Learnings & impact for future products

  • Research & learnings about user needs & use cases for filters

  • Engineering learnings about data storage load and rendering time

Product Overview

Asana wasn’t using any responsive column or grid systems at this time, so I partnered with the design systems team to create a system that could be used for drag & drop and resizing for charts specifically, while also making sure it would scale to the rest of the product

To be as robust as possible, while keeping engineering scope limited, we implemented quick filters to allow users to customize their dashboards