query
history
With the help of Grafana users and amazing developers, I created a brand-new query history feature for Grafana Explore, which we are still expanding and iterating on.
Grafana is a tool used by millions of open-source software enthusiasts around the globe. The monitoring solution helps some of the leading tech companies keep their infrastructure in check, and especially the Explore feature is vital in finding and fixing issues.
To make the most of Grafana's Explore feature, I introduced a query history that allows users to check and re-run queries they have run in the past. To create the best possible experience, I ran user research, usability tests and interdisciplinary ideation workshops and created a full-fledged feature from scratch.
Used skills
- Workshop facilitation
- User interviews
- UX Research
- Co-creation
- UI Design
- Mockups
- Project management
- Usability testing
What we wanted to accomplish with the query history feature
- educate new users about Explore
- give a history of how you solved past problems
- eliminate the need to remember what queries you entered
- eliminate the toil of re-typing queries again and again
- learn what the team is doing and struggling with through a team history.
With these goals in mind, the involved developer Ivana and I planned the project and design process.
We started the project running user research to understand user needs and validate our project goals. To accomplish this, we ran 6 interviews with Grafanistas (3 Explore experts, 3 Explore newbies), yielding a total of 23 pages of observations.
The research interviews revealed two common usage patterns: People who query case-by-case vs people who always use the same queries.
“Typing out my regular queries that I’ve used before from scratch seems inefficient.”
“Starred looks like saved queries. I guess that could be useful, but I usually use dashboards/panels as soon as I need to save a query.”
The users mostly wanted to reuse recent queries, and they don't think older queries should be saved forever.
“Recent queries should be saved, but later maybe that would be messy. An automatic clean-up cronjob or similar would be nice.”
The interviewed were interested in a team query history to see what others query and how querying behavior can become more efficient.
“I would like to see how more advanced Explore users query stuff and solve problems.”
With the research in mind and after looking at some competitive research, Ivana and I had an ideation session where we scribbled and wireframed drafts for the query history.
ideation workshop
After some scribbles and a Crazy 4 exercise, the team threw together our best ideas and created rough wireframes, which I then turned into first mockups. Some of our favourite ideas included a slider element for time filtering, visually grouping queries into sessions, and a graph representation of each query.
prototyping
After fleshing out the designs and getting first feedback from the project stakeholders, we settled on a MVP design and created a click prototype. We then used this prototype to run usability tests.
usability testing
I ran three usability test sessions with community members, yielding 78 observations. Unfortunately we didn't manage to recruit more volunteers, but all three testers were happy with the feature and had only minor improvement suggestions.
“This is one of those things you don't know you're missing but once it's there, you think, why didn't I have this before?”
query history out in the wild
We implemented and released the first version of the query history with the Grafana 7 release in 2020. Then we waited to collect user feedback and run some usability tests with the actual live feature.
Test the live feature on play.grafana.com
You will need to run some queries in order to have some queries in your history. Feel free to use the "Metrics browser" button with the Prometheus data source if you aren't familiar with Grafana querying.
If you find anything you have feedback on, feel free to create a GitHub issue.
co-creation and ideation part 2
We realized that not all of the questions and wishes the users had for the query history could easily be answered or solved. So we took the trickier questions and ideas to run another ideation workshop. With the help of an unbiased Grafanista from another team, we generated more ideas, prioritized and scribbled them.
From these scribbles and ideas, I then designed iterated views of the existing query history. Some of the newly added features and designs include:
- an introduction of the feature for first-time users with the option to access the explanation again later
- graph previews for each query
- more settings
- metadata for your organization's query history usage and more filtering options for the queries in the history
- improved designs for the team history.
These designs have not been fully usability-tested, so they will take further iterations until they can be implemented.
yet to be implemented
