Grafana Labs · 2022
I was the original designer of Grafana’s real user monitoring, from a hackathon project called Kowalski to GA. The goal: stand out next to Datadog and New Relic by making frontend data easy to act on.
Original designer · Grafana Labs · 2022 · Shipped
Name the app, choose automatic setup or the manual config, and copy the snippet written for your framework. The allowed domains are filled in for you.
Finishing setup lands on Applications, where the app has a card with its first errors and page loads, not on an empty dashboard.
Each vital shows where it sits between good and poor, so 2.1 s LCP reads as Good without looking anything up.
Performance, business and technical metrics share one table. Grafana had no tabs inside a panel before this; I took the pattern from tools our users already worked in every day.
Details beside the list, without a new page or a modal. I wrote its rules, when to use it and when not to, and gave it to the design system team.
The timeline shows every event in a session. Hovering a cluster of errors opens Error Awareness, and Examine goes straight to the error.
Grafana Labs · 2022
I was the original designer of Grafana’s real user monitoring, from a hackathon project called Kowalski to GA. The goal: stand out next to Datadog and New Relic by making frontend data easy to act on.
Original designer · Grafana Labs · 2022 · Shipped
About setup · Chapter 01
Name the app, choose automatic setup or the manual config, and copy the snippet written for your framework. The allowed domains are filled in for you.
Finishing setup lands on Applications, where the app has a card with its first errors and page loads, not on an empty dashboard.
About the overview · Chapter 02
Each vital shows where it sits between good and poor, so 2.1 s LCP reads as Good without looking anything up.
Performance, business and technical metrics share one table. Grafana had no tabs inside a panel before this; I took the pattern from tools our users already worked in every day.
About errors and sessions · Chapter 03
Details beside the list, without a new page or a modal. I wrote its rules, when to use it and when not to, and gave it to the design system team.
The timeline shows every event in a session. Hovering a cluster of errors opens Error Awareness, and Examine goes straight to the error.
What shipped
It started as Kowalski, a hackathon prototype. The sample app in my files is still called Kowalski-baby.
Most large companies already used Datadog or New Relic. To stand out, our tool had to simplify complex data while still giving actionable insights.
On a new product I bring in patterns the design system doesn’t have yet, but that our users already know from tools that have done them well for years. Tabs inside a panel and the Flyout both came from there. A design system team can’t know the day-to-day of every field, so I bring the pattern in, build it properly with its rules, and hand it back.
I drew on video game interfaces and IDEs like VS Code and IntelliJ, where dense information stays easy to read. Our users, developers, product managers and IT teams, spend hours monitoring and troubleshooting.
High-fidelity prototypes showed product managers and engineers what was certain and what wasn’t. I split my time between designing and learning OpenTelemetry and our Faro web SDK, which built trust with the engineers.