Grafana Frontend O11y

Product Designer 2022-present. Led design for frontend observability and Application Observability, including product strategy, defining metrics and objectives, produced all visuals, interaction and prototyping

When I joined the observability squad at Grafana, we had a challenging mission: to build two solutions for observability, specifically application and frontend observability, at a rapid pace. Armed with rough ideas rooted in research and the extensive experience of our PM and director, who are veterans in the field, we embarked on this ambitious journey.

Grafana Frontend O11y solution

Observability (o11y) users struggle with data overload, complex integrations, tool sprawl, and high costs. Instrumentation can slow performance, while data silos and expertise gaps hinder effectiveness. Root cause analysis remains tough, alert fatigue is real, and security and privacy are critical concerns. The fast-evolving tech landscape adds another layer of complexity. Overcoming these issues demands strategic planning, the right tools, and investment in skills and infrastructure to extract real value from observability efforts.

Beginning in 2022, I collaborated with a small, focused team comprising one product manager and three software engineers — to develop a platform aimed at revolutionizing frontend observability. Our mission was clear: to create a Real User Monitoring (RUM) solution that delivers deep insights into the actual user experience on websites and applications. By tracking real user interactions, we sought to understand behavior, measure performance, identify and resolve issues, optimize user experience, and ultimately enhance business outcomes.

The PM team had some initial ideas mapped out on a Miro board. I began by digesting existing data, conducting qualitative user research and conducting an ongoing competitive analysis. Our goal was to pinpoint main pain points from user feedback while aligning with industry standards for delivery capabilities in engineering and design.

We knew catching up with competitors with over a decade of experience would be tough, but we also saw a chance to innovate in frontend observability and leverage open source.

Starting the project, I recognized the challenge: established observability vendors were performing exceptionally well. To stand out, our solution had to be both simple and effective. I drew inspiration not just from the observability industry, but also from user-friendly interfaces in video games and programming IDEs, aiming to create a tool that made complex data accessible and actionable.

After the initial sketching and brainstorming, we began to grasp how our tools would function. We opted for a rapid iteration cycle, allowing us to swiftly ship features, gather feedback, and iterate.

One example from the countless iterations in this project.

In my design process, I balanced my time between crafting designs and interactions and delving into the technical nuances of OTel and our Faro web SDK. I committed fully to building and sharing new features and components, contributing back to Grafana design system.

This approach significantly bolstered trust among PMs, engineers, and designers, accelerating the project far more effectively than static mockups or low-fidelity prototypes ever could.

High-fidelity prototyping brings clear benefits by revealing certainties and uncertainties for PMs, engineers, and users alike. This approach accelerates the identification of solid solution paths that are worth chasing, offering a flexible foundation for more frequent testing and iteration. It’s a faster, more efficient route to refining and perfecting our designs.