Refining visuals and incorporating AI into a low-code integration map
About The Project
Overview
The integration map functionality was the company's most strategic and essential product, serving as the core tool where project managers and developers integrate systems using Digibee. The competition in this field was intense, and Digibee aimed to stand out. To achieve this, we needed to significantly enhance the visual interface, improve component usability, and introduce two key features: an AI assistant and a visual integration mapping tool.
The challenge
The existing integration creation flow required significant usability enhancements, as it had not been updated for a long time. Additionally, to remain competitive with leading global companies. The product goal was to achieve 50% user adoption of the Visual Mapper and Smart Connector features within the first two months of launch. My role was to enhance key features to ensure the product remained competitive with leading global companies.
Discovery
Exploring hypothesis
The first step we took to uncover hypotheses and identify potential solutions and opportunities was to create a detailed mapping. This mapping intertwined critical paths in the customer journey, identified Jobs To Be Done (JTBD) by the customer, proposed potential solutions for those jobs, and outlined ways to validate each solution.
This approach enabled the team to visualize the product's future, set clear product goals, and uncover key hypotheses to explore additional opportunities.
Making questions and defining facts
Once we identified the critical paths and their needs the team collaborated to define facts, formulate assumptions, and identify existing questions.
This step was crucial, particularly for the development team, as it facilitated discussions on technical requirements and team capacity, ensuring timely delivery.
The key highlights identified were:
Low-code users would like to see a document of the JSON mapping, something more visual.
Low-code users map JSON integrations on a spreadsheet before the code phase.
Users struggled to find the right connector among the 60 available options.
Users interview
With all the first explorations done, we gathered a considerable amount of information that enabled us to start engaging with end-users about their perspectives on the project's key topics.
To organize, transcribe, tag topics, and document all interviews, we used Marvin, which is an excellent tool that facilitates and optimizes our research process.
Research analysis
The tagging feature available on Marvin helped us identify topics and organize them into categories. To further facilitate discussion, we transferred all the relevant gathering results to Miro, enabling the entire team to collaborate and begin prioritizing effectively.
Difficult in explaining Mapping to low-code users.
Difficulty in choosing integrations due to the lack of information.
Define Visual Mapping on CSV
The usage of JOLT makes our job very slow and difficult.
Lack of organization of connectors, hard to find what I want and see the documentation.
The current integration canvas is hard to use and hard to interact with the rounded circles.
Key insights
Ideation & Definition
Impact VS effort
It was time to prioritize potential features. This allowed us to collectively assess the value and feasibility of each feature, ensuring a strategic and efficient approach to decision-making.
Ability to test transformations individually (without needing to run the entire pipeline).
Display the input and output data for the connectors, and when creating the mapping, allow the user to view the automatically generated visual solution. (Visual Mapping)
Improve connectors organization by providing more search features.
Redesign the canvas format for a more intuitive and functional version.
Show the input and output format of each connector. (Sidesheet)
Key items prioritized
Visual Mapping flow
Before jumping to the prototype, we worked together to create the visual mapping feature flow, including a low-fidelity prototype to visualize the UI possibilities.
Prototype
Visual updates for IDE integration
This project's first step was to develop improvements to the remaining integration IDE. Across user interviews, we identified multiple adjustments to fix at the Canvas (the place where the integration is mapped), so we leverage this opportunity to escalate these insights and enhance the Canvas experience.
Old Canvas version
Based on feedback from interviewed users, the current Canvas platform exhibited several significant issues. Here are the major ones:
Drag-and-drop arrows to connect integration proved difficult due to possible bugs.
Disorganized interface layouts caused users to spend several minutes orienting themselves on their first access.
Users reported difficulty locating and understanding actions within the execution panel.
New canvas version
📌 All these updates were validated across usability tests.
After incorporating key user feedback into the interface, we implemented the following improvements:
The new connector shapes offer a consistent visual pattern, enhancing clarity and improving the drag-and-drop experience.
Actions and links were organized by context ensuring effective information.
The execution panel was simply relocated to provide better visual support..
AI suggestions
The Smart Connector feature provides AI-driven connector suggestions in an integration flow. This functionality streamlines the integration workflow and offers new users a friendly, intuitive, and supportive experience.
The key highlights of this feature were:
Facilitate the process of finding the correct component for an integration.
Fast access to search for any component.
A link to the component documentation, providing comprehensive usage details.
New connectors sidebar
The new sidebar menu was redesigned to align with the updated Canvas, offering a cleaner visual experience and a cohesive design standard. Additionally, new features were added to enhance usability:
Users can now access comprehensive documentation for each connector directly from the sidebar.
A dedicated favorites section allows users to save frequently used connectors for quick and easy access in future projects.
Visual Mapping
To support low-code users struggling to understand code-based map integrations, we developed Visual Mapping, a feature designed to provide a clear and intuitive understanding of mappings within each integration.
The key highlights of this feature were:
Users can add new or existing input and output JSON directly to the platform.
Once the data is added, they can choose to build their mapping through either the Input/Output Specs or the Visual Mapper interface, both of which are fully synchronized.
Low-code users can now easily read and understand the structure of a specific JSON integration.
Navigable prototype flow
After completing the interfaces, we created a navigable prototype to demo to the entire product team. This prototype was also used to evaluate end users navigation on a usability test.
Usability test
The usability tests enabled us to validate key functionalities, micro-interactions within the visual mapper, and user perceptions of the visual changes.
Usability test goals validation
★★★★★ - Ability to find how to include data in the system.
★★★★★ - Ability to interact and navigate between items on Visual Mapping.
★★★★★ - Ability to create a simple mapping.
Conclusion
Business goal and KPIs validation
Although two of the KPIs were below expectations, the results were considered acceptable by the managers and we continue to monitor and improve the product. The KPIs monitored were:
Objective: 50% of the active users successfully utilize the AI functionality in their mappings.
Result: 34% of users utilizing the Smart connector.Objective: 50% of active users utilize the Mapper Visualization at least once
Result: 49% of users utilized the Mapper Visualization at least once.