Menu
Toucan - Customizing data display with variables.
🏬 BtoBtoB, 💻 Desktop, 🎨 Creation from scratch
Metrics: Reducing the product customer onboarding by 15 working days.
Designed with :
🏡 Context
Toucan is a B2B2B analytics platform designed to enhance engagement and improve the user experience for software vendors. The company’s vision is to make analytics effortlessly deployable, highly scalable, and deliver an exceptional end-user experience.
For example, if you’re a software vendor in the supply chain management industry and want to integrate analytics into your product but have limited development resources, Toucan offers the perfect solution. With Toucan, you can seamlessly connect your software’s data and create user-friendly dashboards—no data expertise required. These dashboards can then be embedded directly into your supply chain tool, enriching your product with powerful analytics.
1️⃣ Problem frame
Our users need the ability to personalize the experience for each individual using their software. To support this initiative, we focused on enabling the personalization of data and information displayed on Toucan dashboards.
Currently, users must configure and use variables in code to achieve these personalizations.
Variable Definition: A variable is a labeled container that stores different types of data, allowing the application to manipulate and update the data as needed.
🎯 Company objectif related to: Improving App-builders autonomy.
💸 Outcome expected: Reducing the product customer onboarding by 15 working days.
2️⃣ Observe
First, the PM and I conducted theoretical research on variables to ensure we fully understood the topic.
We also performed a UX and system audit of the existing product to gain a comprehensive view of the user journey.
To further clarify, we conducted informational interviews with both internal and external stakeholders. These conversations highlighted the challenges we faced, validated our understanding, and confirmed the scope of our work.
As our research progressed, we collaborated with the Customer Success Manager (CSM) and engaged in shadowing sessions to uncover the actual workarounds users employed. Along the way, we made an intriguing discovery: users were creating dummy profiles to visualize data while designing detailed visualizations and preparing data.
This research phase allowed us to clearly identify and cluster the issues we need to address.
🆘 The syntax for using variables within the product is overly complex.
🆘 Need of Toucan IT team assistance with setting up data personalization
🆘 If I variabilise my data, I can’t visualise the result of my data preparation or vizualisation, If i am not a end user.
Personas
The primary persona for app builder is Camille, a Product Manager in a software vendor company. She possesses some knowledge of data but is not an expert. The second persona is a developer with better data knowledge. For this initiative, we will focus on Camille persona
User journey
Now that we’ve confirmed the user problem, understand the workarounds, and define our main persona, we aimed to identify where in the user journey the issue arose and how it was resolved. This led us to conduct a user journey analysis.
2️⃣ Steal
In this phase of the process, it was crucial for us to compare the flows of data and non-data (3 of each) tools to offer the widest range of variable usage solutions.
Data tools are designed primarily for data experts, which is why they offer limited no-code interfaces for handling variables. The little available no-code functionality was often within contextual code mode areas, making it still highly technical. On the other hand, non-data tools were much simpler and more user-friendly, especially for our Product Manager Camille persona.
Consequently, we decided to draw inspiration from non-data tools while retaining the code mode in our product.
3️⃣ Execute and decide
User scenarios
Thanks to the user journey and benchamark, we were able to prioritize user scenarios.
Happy path
Following users scenarios and the user journey I crafted a « happy path » to gain insight into how to fulfill our PM persona’s primary objective.
To address our « must-have » solution, we opted to:
💡 Create an variable interface that sorts them by type, allowing app builders to set default values for each variable.
💡 Enable interpolation by incorporating a dropdown feature in the data preparation section of the app, and through a dropdown activated using the "/" key within a text areas of the dashboards.
Sketching
Based on the existing variables within the app (not challenged in this subject), we categorized them according to the objects they were associated with, such as users, external sources (from customer software), and filters.
User tests
Thanks to Toucan’s design system and Figma’s excellent auto-layout feature, we didn’t require a detailed wireframe, which can be more time-consuming. Instead, we proceeded directly to creating high-fidelity UI prototypes for testing.
✅ The test result was as success:
-
-
As an AB I can create an Extra variable 60% –> 85% result
-
As an AB I can add a default value to an existing User variable 80% –> 100% result
-
As an AB I can easily interpolate a variable in a narrative 100% –> 100% result
-
As an AB I can easily interpolate variable in a query 60% –> 100% result
-
Solution confidence mark score 4/5 –> 4,83 result
-
