Menu
Toucan - Embeding the Toucan app with a seamless experience.
🏬 BtoBtoB, 💻 Desktop, 🚀 Redesign & improvement.
Metrics: A reduction of 80% in the number of support tickets related to Custom CSS.
Designed avec 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 Ideal Customer Profile (ICP) requires the ability to seamlessly customize Toucan within their software. Currently, they can customize the app’s colors using the « theme interface, » but there is a substantial demand for our IT teams to enable app customization via Custom CSS.
🎯 Company objectif related to: Improving Toucan "app-builders" (users who create dashboards) autonomy.
💸 Outcome expected: A reduction of 80% in the number of support tickets related to Custom CSS.
2️⃣ Observe
We had some doubts about the scope’s size, so we initially gathered analytics by leveraging all the feedback from our Customer Success Managers (CSMs) on the subject. This analysis enabled us to categorize the problem into three distinct sections:
👉Brand Customization (53%): This feature empowers App Builders to seamlessly integrate Toucan’s appearance with their design, whether it’s embedded or standalone. They can adjust elements like font style, colors, text weight, padding, and chart element curvature to align with their clients’ design preferences.
👉Data Storytelling Customization (36%): This includes all the customization options that enable App Builders to effectively communicate data-related messages to their end-users.
👉Toucan Display Issues (11%): This pertains to the utilization of CSS to address problems that arise in the layout of stories or dashboards within Toucan.
Through this analysis, we discovered that these problems stemmed from various user needs, which included:
🎨 Branding the end-user app to make it appear as if it were their own.
📊 Emphasizing specific insights within layouts to better organize data information.
🦠Addressing layout issues within the Toucan product.
Given the considerable feedback amount on the branding need, we opted to prioritize this aspect. The other issues will be tackled in a separate initiative focused on layouts and insights. Despite the scope reduction, we have decided to maintain the same expected outcome but in the branding only.
UX audit
To gain a deeper knowledge of the existing we performed a technical audit, and a UX audit to assess the impact of each color. We recognized that this feature had been in existence for a significant period, and there was a substantial technical debt associated with it. Furthermore, there was no documentation available regarding which colors in the theme interface were affecting various components within the app.
We also conducted user interviews and, combined with the previous audit, we identified the problems we encountered with the initiative.
🆘 Determining where the colors from the theme interface are applied within the app is quite challenging.
🆘 Toucan's organization of colors in the interface differs from the global branding practices commonly used by companies.
🆘 Customizing fonts without coding is not an available option.
🆘 There is a font contrast accessibility problem due to the inconsistency of the application colors.
Persona
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.
3️⃣ Steal
To accomplish this task, we conducted a benchmarking analysis of both data and non-data tools to ensure a broad spectrum of potential solutions. We encountered difficulties accessing certain products, which we successfully resolved by using open documentation and YouTube tutorials.
4️⃣ Execute and decide
User scenarios
Based on the benchmark and the problem statement, we were able to develop user scenarios for the primary persona, Camille, but still giving the possibility to use CSS for our secondary persona developper.
Happy path
Following users scenarios, I crafted a « happy path » to gain insight into how to fulfill our PM persona’s primary objective.
User tests
Thanks to Toucan’s design system, the Figma’s excellent auto-layout and variables 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 validation criteria have been successfully met:
- As an AB I can edit and understand brand theme colors 100% –> 100% result
- As an AB I can add or edit fonts theme 100% –> 100% result
- As an AB I can edit theme assets 100% –> 100% result
- As an AB I can edit corner radius and layout grid 90% –> 100% result
- As an AB I can edit and understand insights theme colors 75% –> 82% result
- Solution confidence mark score 4/5 –> 5 result
We mainly add feedbacks about microcopy regarding the insights colors, not always very clear for non data expert. We change it to make it clearer thanks to a quick quantitative survey.
5️⃣ Deliver
User flows
Creating user flows didn’t seem relevant to us because all interactions occurred within a single interface without a need for flow representation. Therefore, we opted to use UI and functional specifications to convey information about colors and fonts to our design system foundations. Additionally, for the assets, we provided explanations for the placement of each picture.
UI
