Creating the First Integration Workflow
🧨 Challenge
Make the experience of building data integration workflows easier, making it less abstract for users.
“Where do I start when I need to transfer data from my app X to my app Y, customizing the format in which this data will be provided?”
📚 Context
From 2018 to 2021, I had the opportunity to be the main product designer at Wevo, a startup in the iPaaS (integration Platform as a Service) market, and our mission was to be recognized as the first iPaaS in Latin America.
As an pioneering pirate in a blue ocean of great opportunities, there were no relevant players, but there were to many questions about:
“How can we demonstrate the value of an iPaaS solution to a market that doesn’t even know this technology?”
“What can we do to introduce this amazing thing into a Latin culture where people don’t really like to interact with extremely technical and complex issues to solve small daily tasks?”
💡 Design Process
☕ Ideation & Discovering
Our product served two main personas who had different levels of technical knowledge about data integrations between apps and APIs. Our personas for this feature were:
👨🏽🚀 Walter Watson, +37 years old
- 🤒 Pains
• Difficulty understanding how integrations work
• Lack of knowledge about codes and programming languages - 😱 Needs
• Report the results obtained through the company’s app integrations
• Monitor the creation of integration workflows
• Make simple connections between different apps
🧑🏻🚀 Wesley Williams, +25 years old
- 🤒 Pains
• Lack of flexibility in business rules
• Excessive scripts in customizations - 😱 Needs
• Customize and manipulate data display formats
• Make complex connections between different apps
• Test integration workflows
In most conversations with these personas, it was mentioned that it is very complicated to build integration flows without having visual feedback of the connections made and even if you use lines and boxes to indicate these connections, it would still be difficult not to get lost among the dozens of lines and boxes on the screen. So we opted for an extremely minimalist interface that shows only what is really necessary through hover effects and highlights within a whiteboard.
Based on this background, we were able to choose some application functionality goals:
- Build an integration workflow in the shortest possible time.
- Reduce the margin of error in building these workflows.
- Ensure that users with different levels of technical knowledge can abstract the integration workflows in a coherent way.
✏️ Wireframe & Concept
Together with the development team, I spent a few sprints discussing the needs identified in discovery while the devs showed me the ideal frameworks to solve these needs until we reached the consensus that we needed a Canvas lib. The idea behind this lib was to give users complete freedom to materialize on the screen the exactly workflows they imagined to integrate their data between different apps.
🎲 Validation & User Flow
Since we had a good lib, this helped us to advance many steps in the user flows, since the goal was to give the user freedom to use the flow they wanted. So the biggest work was within the modals and the features that we added over time, such as:
- Reduce abstraction with lines and markers that highlight connections;
- Increase predictability of integration success before publishing;
- Diversify possibilities through customization tools.
All of these features were important for our users to understand the value of adopting our product in their applications suite.
🖥️ UI Deliverables
After validating our user flows, the chosen solution took shape through the medium-fidelity prototype.
🔗 Click here and request me access to see how it works.
🧠 Conclusion
The next step will be a handoff to Development team there is a need to insert this module into our development pipeline to perform follow-ups, iterations and design more improvements and new features.
And that’s it, we’ve reached the end. This was a quick project, but with a lot of passion, carried out using rapid methodologies during 6 weeks of development. I learned from my mistakes and successes, becoming a more capable professional and confident in my skills and knowledge.
I would like to thank the entire development team that provided me with intelligent and very collaborative solutions for the benefit of the user.
I would also like to thank you, the reader of this article, who took a moment of your time to learn more about my case.
I’m Fernando Alves and I participated in all stages of the development of this interface project: UX Strategy, UX Research, Experience Mapping, UI Design and UX Writing.
Credits:
Ana Carla, Debora Brito, Diogo Araujo, Fernando Vieira, Felipe Honório, Guilherme Nunes, Guilherme Oliveira, Guilherme Prado, Pablo Almeida, Rafael Anselmo, Rafael Fleck, Vitor Machado.
If you liked my case study, I’m available on my Linkedin our in my Portfolio to talk more about this or future projects.
