Grafana Labs · 2022

Application Observability

I was the original designer of Grafana’s application observability, from a hackathon project to GA. The goal: make APM work for people who don’t think in queries.

Original designer · Grafana Labs · 2022 · Shipped

Empty startChapter 01 · Notes
The findingLess technical users left after a week.01
The Grafana Cloud home with a get-started checklist

I interviewed 8 current users. They couldn’t find what mattered for their own monitoring goals, and the jargon pushed newer users away.

The decisionThe empty state is the first step of setup.02
Add your first service, with language cards

No blank screen: “Add your first service” asks one question, what your service is written in, and shows where it will appear.

SetupChapter 02 · Notes
The decisionWe fill in the endpoint and the token.01
Instrument a Java service, three step cards

Creating the token and naming the service writes the real command for you, for a JVM flag, Docker or Kubernetes.

The detailThe page waits with you.02
Listening for the first span

Step three listens for the first span and moves on by itself, with help ready if nothing arrives.

ServiceChapter 03 · Notes
The decisionHealth first: duration, errors, rate.01
A service overview with health indicators

The three numbers people ask about first, then who the service calls and its slowest operations.

The detailCompare with an earlier period.02
Timeframe Analysis comparing with the day before

Timeframe Analysis lays the hour, day or week before over every chart, so “is this normal?” is answered on the page.

The decisionTraces, logs and the map, one tab away.03
The trace view of a service

Visual exploration first, queries when you want them: the service map and traces live next to the overview.

Play prototype

Grafana Labs · 2022

Application Observability

I was the original designer of Grafana’s application observability, from a hackathon project to GA. The goal: make APM work for people who don’t think in queries.

Original designer · Grafana Labs · 2022 · Shipped

About the empty start · Chapter 01

Observability for people who don’t think in queries.

The findingLess technical users left after a week.The Grafana Cloud home with a get-started checklist

I interviewed 8 current users. They couldn’t find what mattered for their own monitoring goals, and the jargon pushed newer users away.

The decisionThe empty state is the first step of setup.Add your first service, with language cards

No blank screen: “Add your first service” asks one question, what your service is written in, and shows where it will appear.

About setup · Chapter 02

Three steps from nothing to your first span.

The decisionWe fill in the endpoint and the token.Instrument a Java service, three step cards

Creating the token and naming the service writes the real command for you, for a JVM flag, Docker or Kubernetes.

The detailThe page waits with you.Listening for the first span

Step three listens for the first span and moves on by itself, with help ready if nothing arrives.

About the service · Chapter 03

Everything about a service, on one page.

The decisionHealth first: duration, errors, rate.A service overview with health indicators

The three numbers people ask about first, then who the service calls and its slowest operations.

The detailCompare with an earlier period.Timeframe Analysis comparing with the day before

Timeframe Analysis lays the hour, day or week before over every chart, so “is this normal?” is answered on the page.

The decisionTraces, logs and the map, one tab away.The trace view of a service

Visual exploration first, queries when you want them: the service map and traces live next to the overview.

What shipped

APM that scales from novice to expert.

Visual discovery and progressive disclosure, so the same product works for an SRE and for someone opening it for the first time.

How I got thereResearch, principles, the design system

The approach

The critical outcome from our team workshops was the idea to visually answer: “What is Grafana Cloud?”

  1. SimplicityPlain steps with minimal jargon, adapted to the user’s skill level.
  2. DiscoverabilityInformation architecture reorganised around monitoring goals.
  3. Visual firstInteractive, visual exploration instead of query-first screens.
  4. Scale with expertiseNovices get guidance; experts keep the depth Grafana is known for.

What users told us

I interviewed 8 current users. The common pain point: navigating the apps to find information tailored to their own monitoring goals. Less technical users preferred visual, interactive ways of exploring, and struggled with jargon and navigation patterns that were second nature to DevOps professionals.

The shipped product

Application Observability: simplified navigation and visual discovery
Application Observability: simplified navigation and visual discovery
Design system contributions, including custom illustrations
Design system contributions, including custom illustrations

Walkthroughs