Grafana Cloud Frontend Application

In 2022, our small team had the opportunity to work on creating Grafana Lab’s APM and RUM suite. Our mission was to design innovative solutions that leveraged unique capabilities to meet the needs of both seasoned DevOps and SRE teams, as well as less technical users who are increasingly adopting observability practices.

Real User Monitoring (RUM) solutions play a critical role in delivering exceptional digital experiences. However, many organizations face challenges in implementing and utilizing RUM effectively. Our recent case study highlights the common issues that can hinder the success of RUM solutions, including technical difficulties such as integration issues, data collection problems, and accuracy concerns. Specifically, we observed that:

• 75% of respondents reported experiencing integration challenges with their existing infrastructure.
• 40% of users struggled to understand the insights generated by their RUM solution, citing complexity and lack of visibility as major obstacles.

When designing our Real-time User Monitoring (RUM) solution, Information architecture was crucial to ensure that users can effectively navigate and make sense of the data being presented. As a designer, I consider how users will interact with the solution, identify key metrics, and drill down into more detailed analysis.

This involves thinking about the overall structure and organization of the UI, including categorization, grouping, and labeling of data elements.

While designing this solution, I aimed to prioritize clear and intuitive navigation, making it easy for users to uncover new insights and trends that might have gone unnoticed otherwise.

When starting the project, I recognized that establishing a strong presence in the observability market would require a solution that was both simple and effective. To stand out from established vendors, such as Datadog and New Relic, which have been performing exceptionally well (with over 70% of Fortune 500 companies using their services), our tool had to be able to simplify complex data while providing actionable insights.

Our target audience is primarily composed of developers, product managers, and IT teams who are responsible for ensuring the performance and reliability of our software applications. They spend a significant amount of time monitoring and troubleshooting issues, but often struggle to make sense of the vast amounts of data available to them.

To address this challenge, I drew inspiration from user-friendly interfaces in video games, such as those found in popular titles, where intuitive designs enable users to quickly grasp complex information. Similarly, programming IDEs like Visual Studio Code and IntelliJ IDEA have set a high standard for simplicity and ease of use when it comes to coding and debugging.

Our approach was guided by the following design principles:

• Clarity: Our tool should clearly communicate complex data information to users.
• Consistency: Our interface should be consistent in its layout and structure to reduce user confusion.
• Usability: Our tool should be easy to use, even for users who are not experts in data analysis.

By combining these principles with our understanding of the market and our target audience, we are confident that our solution will establish a strong presence in the observability market.

After completing the initial design phase, which included sketching and brainstorming, I began to solidify our understanding of how our tools would function. We decided to adopt a rapid iteration cycle, enabling us to quickly ship features, gather feedback from users, and iterate on our design based on that input.

Exploring and refining the onboarding

To ensure we’re on the right track, I share and ask for feedback at every stage, testing with users in a small number of iterations, and iterating on our approach based on what works best.

When exploring solution space, I’m not afraid to diverge and try different approaches. This early experimentation allows me to test assumptions, learn from failures, and converge on the best fit – all while keeping deadlines & technical feasibility in mind.

As a designer, I strive to be a key contributor to our design system by continually reusing and refining existing components and patterns. While I’m always critical of any pattern that drifts from established usability best practices, I also aim to identify opportunities to innovate and propose new patterns that can help grow and strengthen our design system – ultimately making it more robust and flexible for future iterations.

As a designer, I aim to anticipate all possible scenarios, including unhappy paths. To achieve this, I collaborate with the team and reflect on myself: What if a user encounters an issue during their journey? What happens when something goes wrong due to user action? And what if technical issues arise? By exploring these questions, I design solutions that cover both happy and unexpected paths.

I don’t hesitate to share my imperfect ideas and failures, often with the team. It’s at this stage where I aim to foster a culture of shared understanding and inclusive design, but more importantly, it’s these moments that help me build trust with the team - by embracing vulnerability and openness.

By sharing early with stakeholders, I ensure that everyone is aligned on whether the proposed solution can be delivered within the set deadline and meets the business goals. This open communication helps us gauge feasibility and make informed decisions, reducing the risk of costly rework or scope creep.

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

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

In reflection on our high-fidelity prototyping process, I’m struck by the significant benefits it brought to our team. By leveraging this approach, we were able to clearly reveal certainties and uncertainties for product managers (PMs), engineers, and users alike, accelerating the identification of solid solution paths that were worth pursuing. This flexible foundation enabled us to conduct more frequent testing and iteration, ultimately refining and perfecting our designs in a faster and more efficient manner.

Looking back on this experience, I’m confident that high-fidelity prototyping was a critical factor in our project’s success. By embracing this approach, we were able to create a more user-centric design process that yielded tangible results and exceeded expectations.