Grafana cloud onboarding

Product Designer 2022-present. Designed the revamped Onboarding Experience for Grafana Cloud

onboard-cover.png

In the rapidly evolving ecosystem of Grafana Cloud, we faced a significant challenge: as our suite of complex products grew, it became increasingly difficult to clearly communicate to users what each product did, why a new (non-technical) user might need them, and how to use them effectively.

The core issue lay within our onboarding process. Through data analysis and user research, we identified that 62% of new users were not familiar with key products in the Grafana ecosystem such as Loki, Mimir, and Tempo. While SREs (Site Reliability Engineers) are accustomed to diving into documentation, non-technical users rarely do so. For these users, a seamless onboarding experience can make or break their engagement with our platform.

feedback-onboard.png Compiled user feedback

This problem exists because of the inherent complexity of the Grafana ecosystem. Each product is powerful and specialized, but this specialization can be overwhelming for new users. Our previous onboarding process did not adequately address the need for clear, accessible information that could guide users through their first interactions with our products. As a result, many users struggled to understand the value and functionality of tools like Loki and Tempo without extensive documentation review.

To tackle this issue, we embarked on a mission to revamp the onboarding experience. Our goal was to make it more intuitive and informative, particularly for non-technical users. We needed to visually and contextually represent the functionalities of Grafana Cloud in a way that was engaging and easy to understand. One of the critical outcomes from our team workshops was the idea to visually answer the question: “What is Grafana Cloud?”

We decided to integrate key product information directly into the onboarding flow. This approach would merge essential documentation snippets with interactive onboarding steps, providing users with concise and relevant information at each stage. Here’s a step-by-step breakdown of the improvements we implemented:

Rebuilding the Login Screen Experience: I started by redesigning the login screen. Each introduction highlighted the primary function and benefits of these tools.

old-login.png Old login screen

proposed-login.png proposed-login1.png Redesigned login screens

Redesigning the Welcome Screen: Recognizing the importance of first impressions, we explored various options for the welcome screen. Through constant feedback and iterations, we developed a version that clearly and succinctly introduced Grafana Cloud and its key components.

cloud-1.png cloud-2.png cloud-3.png Creating assets to use in exploration phase.

In my practice I go through countless iterations based on feedback of stakeholders and users.

Integrating Documentation with Onboarding: I merged essential information from our documentation into the onboarding process. Each step of the onboarding now provides users with an information snippet about the tools they are setting up, with an option to dive deeper into the docs page if they wish.

Interactive Tutorials and Tooltips: I introduced interactive tutorials and tooltips that guide users through their initial setup and usage of Grafana Cloud products. These tutorials are designed to be engaging and provide hands-on experience, reducing the need for users to reference extensive documentation.


Some iterations I've used in user testing sessions.

User Feedback and Iteration: Throughout the process, we continually sought user feedback to refine the onboarding experience. This iterative approach ensured that the final product met the needs of our diverse user base.

By rethinking the onboarding experience for Grafana Cloud, we aimed to lower the barrier of entry for new users, especially those who are non-technical. Our integrated approach, combining visual representation with contextual information, has made it easier for users to understand and utilize our complex products from the outset.