I pen this long (winding!) letter as a retrospective on the past 14 months spent developing VisualFlows.io. My objective was to augment our existing VisualSitemaps platform with more UX planning features—specifically, those that would significantly enrich our value proposition in addressing the evolving work stream requirements of our users beyond the IA auditing our platform presently delivers.
There were numerous approaches we could have taken. Focusing on data integration was a possible choice, as it seemed to be a natural layer of information to enhance the visual maps we generate. However, enabling user journeys and funnel flows also presented a considerable opportunity, particularly since users were actively seeking solutions in that domain, and our existing automated IA provided such a solid foundation.
We gathered extensive feedback through spontaneous spot-check questions and structured surveys from our user base, which includes both paid and unpaid members. Moreover, during our Appsumo campaign, we received an overwhelming amount of feedback on our product roadmap, which was incredibly insightful.
Armed with user validation, I embarked on the MVP journey by delving into the current landscape of technology, exploring various libraries, frameworks, and open-source solutions that could meet our immediate needs. My rationale was straightforward: with the right library, I could cobble together a working prototype in mere weeks. My extensive historical use of canvas platforms like Lucid, Miro, Mural, Whimsical, and FigJam, provided ample inspiration, and have always in the past facilitated my process of navigating complex challenges in product design, development, and strategic planning. This led me to ponder: why recreate something that already exists? The question was undoubtedly worth considering, particularly as I generally eschew duplicating established solutions. So why make yet another web canvas right?
On a practical level, enabling users to audit current user flows, and defining more optimal ones, would indeed inform them with better ideas to build healthier information architectures.
Healthier IA, in turn becomes the foundational vertebrae enhancing: clarity of navigation, content hierarchy, predictability, minimizing cognitive load, feedback and orientation, facilitating decision making, accessibility, search-ability, scalability, and cross-device consistency.
Yet, there was also this intrinsic conviction that integrating this functionality into our ecosystem was essential for unlocking more of our users’ potential, by enabling them to concentrate on their web planning tasks in the context of their beautiful maps, all the while ideally increasing our LTV and reducing churn.
So.. How fast can we build this? Was my biggest concern as a bootstrapped startup.
During my due-diligence, I discovered a few libraries, but one specifically stood out a lot, React Flow. Since our front-end was already in React, this felt like the right choice. React Flow, when we started with it in version 8,7.9, was quite basic and purpose-built for simple, linear-like input and output.
It was purpose-built to visualize various data inputs entering a process/flow with various outputs downstream.
At the time, their model was not quite rigged to encompass the open-nature of the free-flow creativity that I wanted to build to enable spontaneous brainstorming-based thinking. But I noticed that it had at least 50% of the foundation to get us out quicker, or at least that’s what I thought!
This is where I hoped the 80/20 rule could really work..and that we could ideally release a usable MVP in about 4 weeks. Little did I know that technical UX simplicity is extremely hard to attain.
My production strategy included bringing on a new developer, as my existing team was deeply involved in supporting our existing complex SaaS (VisualSitemaps), which ran using a D3-based front-end architecture, and a sophisticated NodeJS-powered back-end for crawling functions.
The shift to an intricate flow/canvas UX required someone with a fresh outlook — a beginner’s mind capable of appreciating and refining front-end nuances.
Enter “Pablo”. He came highly recommended by a trusted tech partner. Yet, two months in, he faltered, underestimating the complexity and patching together some basic functionality.
At that time, ReactFlow lacked the open, flexible model we needed for our nodes; it was too rigid, offering only basic inputs and outputs, while we required multiple bi-directional ones just to start. This necessitated deep refactoring of their core component logic and crafting custom functions.
Pablo began to crumble under these demands, lacking the requisite FE experience and understanding of UX intricacies. In hindsight, my reliance on references and a superficial three-week trial, where he cobbled together a basic solution, was misguided. The real test came in week four, where The devil was not showing in the details.
That week all of Pablo’s confidence started to quickly melt away and a bunch of excuses started to come up that had nothing to do with the project and rather had to do with his personal life. And after this fifth excuse it started to be apparently clear that this was not the right person for the job.
Ok Back to the “drawing board”.
I had to look elsewhere and find the developer personally by digging through the community of developers that were actually working with ReactFlow, especially ones who’ve done a lot of customizations with it. Someone with intimate knowledge of it would have been far greater. To-date, that was the biggest mistake I made and ended up losing 1.5 man months.
That evening, I took a long walk to my lake and prayed to the Gods of Tech Debt. They said “don’t rush, this will take time, and this time do a deeper dev search on the lib’s Github > discussions” .. 24 hours later..I found Gabriel.
Gabriel, had previous experience with ReactFlow for over a year building a side project of his own. His demo was more than impressive. It demonstrated the exact finesse that I was looking for. The ability to bend this nascent library far enough away from its core.
What was even more remarkable than his skills was his warm, positive personality paired with a youthful confidence. Hailing from Brazil, he exuded an aura of positivity and calm, likely a product of not residing in a toxic, bustling metropolis. Living in a beach town, he had established an admirable work-life balance; he was also a musician and in the final years of his computer science studies.
Although he lacked extensive senior-level coding experience, he initially displayed just the right dose of confidence. My instincts told me that he would embrace any challenge with the right team spirit, attitude, and determination to persevere through the difficult phases that were bound to arise, especially considering the challenges I had already encountered three weeks into our intense sprints.
So we began our journey – and I must say it was epic.
However, just about a month into our new reboot, I had an unexpected twist in my personal life.
After being married for 14 years, I was faced with the unavoidable reality of divorcing my wife. It was unexpected. Love is blind as they say. But it had to happen for reasons I will not bore you with.
The next 72 hours of my life.. were a blur.
I found myself having to leave my home and temporarily, my son. Within 24hrs, I needed to secure a new place to live close enough to maintain my parental routines with my son.
As my personal world crumbled, my solace was the intense focus on VisualFlows with Gabriel, who, fittingly by name, became my guardian angel in this chaos.
The upheaval was so intense that maintaining a professional facade was impossible. Even though our interactions were virtual, with daily stand-ups and screen sharing, Gabriel detected the change in my voice. As we grew closer through our frequent video chats, sharing snippets of our lives in neighboring Argentina and Brazil, my professional barriers fell.
I soon confided in him, explaining that I needed time to reorganize my life ( a bit ) before returning to our demanding work routine.
Gabriel’s response was profoundly human. He stepped out of his professional role, offering empathy and compassion as I grappled with anger, shock, and grief. From that day, our bond deepened, fundamentally altering our relationship and product..for the better.
Raised in New York City, I adhered to an ultra-professional ethos, maintaining a personal boundary that often felt colder than other cultures. However, living in Argentina for 16 years softened my approach, fostering a warmer, more collaborative spirit. This transformation laid the groundwork for a deeper connection with Gabriel.
As I regained my footing, we faced an intimidating task: extensive customizations were needed. I contemplated halting everything to sort out my personal life versus continuing our uncertain, yet promising project. After a night of reflection, I chose to proceed, driven by my promise to him, and the momentum we had built.
Three months in, with newfound clarity and velocity—and the uplifting partnership with Gabriel—I couldn’t let a drastic personal shift derail our progress. The thrill and solace the project provided, became my lifeline.
Thus began the second chapter, far tougher than any of my previous 25 years in product design. The intricacies of intertwining UX and interaction design were immense, even with a wealth of proven references at hand. We were pushing an existing library to its limits, doing what it wasn’t designed to do.
The biggest time sink was – QA. QA is a black art unto itself.
It is not something that a mid-level developer with little experience knows how to do well. In fact, most of the QA that Gabriel was used to doing was when he was working at a larger company that had designated QA teams. So the process for him was always outsourced.
The issue with outsourcing QA is that it might seem efficient for programmers on paper, but it ultimately hampers the quality of programming by disrupting the internal feedback loop that’s essential for an end-to-end experience. It’s akin to having a race car engineer assemble a car without ever taking it for a test drive to feel its handling. That was the analogy I shared with him, emphasizing that we would be in this car together daily, pushing its limits and identifying where it falters.
Deep continuous QA was the only way we could get this app out.. right.
Gabriel needed to grasp my philosophy of QA quickly, which went beyond basic end-to-end testing. It involved rigorous stress testing and complex, non-linear, multi-step QA, which is challenging to master.
Fortunately, his musical background and improvisational experience greatly aided his understanding of my non-linear QA approach.
So 14 months later…we bring you version VisualFlows 1.0 – 100% free to use .. for as long as we are alive.
This is my testament to all the indie developers having to grind through their pet projects, while life throws its curveball after curveball, Never give up..and find the right team players to lean on when shit hits the fan.
Thank you Gabriel Camboim đź’—, Team VisualSitemaps, and React Flow.
—–
Artur