Skip to work
All work
  • B2B SaaS
  • Developer Tools

Anypoint Monitoring: MuleSoft's dashboard builder

A redesign of Custom Dashboards for MuleSoft's Anypoint Monitoring, so users can build charts and dashboards around their own monitoring use cases.

Role
Sole Product Designer
Team
Cross-functional: PM, engineering, sales engineering
Duration
March 2023 – June 2024
Platform
Web
Year
2024

The problem

Custom Dashboards was a capable tool with low adoption. A chart could only be created inside a dashboard, so there was no way to simply explore a metric, the query builder did not match how users think about querying, and assembling a dashboard was manual enough that most people gave up.

Auditing what was already there

I went through every surface of the product and wrote the complaints down against the screen that caused them. Built-in dashboards gave no sense of what to look at first and no mean time to resolve. Custom dashboards pushed you to a separate page to build a chart, so you lost the dashboard you were building. Alerts used states that did not match anyone's mental model of OK versus alerting. Reports could not be built from a dashboard you had already made.

Collecting them in one place made the pattern obvious. Almost none of it was about missing features. It was about the product asking people to hold context in their head while it moved them somewhere else.

An audit board of the existing product with screenshots of built-in dashboards, custom dashboards, alerts, reports and logs, each annotated with the user pain points it causes
Every surface audited, with pain points pinned to the screen that caused them

Following a real troubleshooting job

Pain points on their own do not tell you what to build first, so I mapped what an engineer actually does when something breaks, end to end: reports of a slow cart service, tracing the request, finding the bottleneck in the product catalog, optimising the query, deploying, then validating that response times recovered.

Laid out that way, monitoring is a small part of a much longer loop, and most of the friction sat in the handoffs. I also traced the existing path for creating a dashboard, step by step, which is where the detour to a separate page to build a chart shows up as an actual break in the flow.

A journey map following an engineer through identifying a problem, distributed tracing, finding a bottleneck, optimising a database query, implementing fixes, validating, and post incident analysis, with touchpoints and pain points under each step
One troubleshooting job end to end, with the pain points under each step
A step by step trace of the existing path to a custom dashboard: log in to Anypoint, go to Monitoring, land on a built-in dashboard, the custom dashboard landing page, create new dashboard, add chart to dashboard, scroll to the chart and configure it, feed data to the chart, then save. Sticky notes mark the friction at each step, with the guided querying and chart customisation steps broken out below
And the existing path to a dashboard, step by step — the detour to build a chart is the break in the middle

Build a chart through smart querying

The old query builder assumed you could write the query. The rebuilt one assumes you know what you want to see. It reads as a sentence, one clause at a time, and each clause only offers what is valid at that point: the metrics on this data set, the attributes you can filter by, the operators that apply to the attribute you picked.

Aggregation is a choice on the metric rather than something to remember the syntax for. An unfinished condition says so, in place, and holds the query back from running rather than failing after the fact.

The query reads as a sentence and fills in one clause at a time
The full Explore Metrics and Charts screen with a half-written WHERE clause: the attribute picker is open on env.name, env.id, client_id and others, a 'Finish this condition' tooltip sits over it, a warning reads 'Finish the condition to run this query', and the Run Query button is disabled
An unfinished condition says so in place, disables Run Query, and holds the chart back rather than failing after the fact
The same screen with the query complete, showing the finished statement above a Response Time line chart plotted over the last 24 hours with a chart type and time range picker
Finish the sentence and the chart is already there, ready to save to a dashboard

Building the dashboard

Charts became objects in their own right. You can build one on its own, save it, and drop it into any dashboard later, which is what removes the detour that made people lose their place.

Assembling a dashboard is now laying out rows and choosing how many columns each holds, then filling the slots from charts you have already saved. Chart type is a property of the chart rather than a decision you commit to up front.

A dashboard being assembled, with saved charts in a side panel ready to drop into an empty slot in the grid
Saved charts drop into empty slots, so nothing has to be rebuilt
Adding a row to the dashboard and choosing whether it holds one, two or three columns
Rows are added by picking how many columns they hold
A response time chart with three environments plotted, and a dropdown to switch between line, area and bar
Chart type stays editable after the fact

Where it landed

The three things holding adoption back are gone. A chart is an object in its own right, so exploring a metric no longer means committing to a dashboard first. The query builder asks for a sentence instead of syntax, and will not run one that is not finished. A dashboard is rows and slots filled from work already done, rather than something assembled by hand each time.

It shipped in support of renewals across five large enterprise accounts. The wider argument underneath it — that monitoring is one step in a troubleshooting loop rather than a destination — became the FY2025 roadmap for a unified DevOps troubleshooting experience.

The audit is the part I would do again first. Writing every complaint against the screen that caused it turned a backlog of feature requests into a single diagnosis, and that diagnosis is what the rest of the work hangs on. Almost none of it was a missing feature.

Outcome

5
Large enterprise renewals supported
FY2025
Roadmap shaped by UX vision work for unified DevOps troubleshooting

Next project

Cloud Identity Engine: one login for every group