Designing a Visual Modeling Tool From Scratch
From market opportunity to shipping product.
Role:
Founding Product Designer
Type:
Desktop Web
Length:
9 months (v1.0)
Collimator.ai was founded on the idea that today’s engineers deserve better tools for building and optimizing the next generation of digitally-controlled technology. Working with the company’s co-founders, I engaged with engineers to understand their tools, workflows, and needs. Armed with a better understanding, I designed and helped launch the cloud-based visual modeling, simulation, and optimization platform at the core of Collimator.
The CEO of Collimator discovered, during his career as an electrical engineer, that the tools available for designing and tuning electronic systems were unnecessarily complicated and archaic. Adopting modern workflows that incorporated machine learning, large data sets, or intense collaboration was painful, if not impossible. In discussions with colleagues and friends, he found that they shared many of the same pain points. He decided at that point to do something about it, and Collimator was born.
My first order of business after joining the team was to design a visual modeling and simulation environment.
First, I needed to better understand what modeling and simulation was about, and the tools that were used. I started with the experts we had in-house, getting a download from them of collected information, references, and perspectives.
Consider an electric scooter. It contains mechanical, electrical, and software components, each of which must be designed, optimized, and manufactured.
The modern way to do this is by creating a virtual version (a "model") in software, then simulating inputs to this model to see if it performs as required. This is much cheaper and faster than iterating with physical prototypes.
Once I had the basics down, I spoke with several engineers from across a variety of fields, including electrical, mechanical, systems, and controls engineering. I asked them to talk about their workflows, how collaboration worked for them, their experience with cloud-based tools, and how they used Python in their work.
There were a few things reported by everyone interviewed, however one finding was especially relevant:
I investigated a number of tools mentioned in the interviews to get a better understanding of their approaches to visual modeling, as well as to take stock of their features.
All of the tools I examined were desktop applications, first and foremost, and they generally looked very dated. The biggest issue, however—and one that came up in the interviews—was that they all relied on separate windows for additional views. If you wanted to see the properties, or contents, or output of anything, it opened another window. This meant that the process of using one of these tools required a fair bit of resizing, positioning, and switching between different views.
I also investigated tools from other domains to see how they approached visual programming. These included tools for general programming, 3D graphics, and creating music.
Despite the variation in approach, I realized that every environment had four basic elements in common:
The options were vast, so I just started sketching. I made decisions about color, shape, size, line type, etc. and took them as far as I could. Along the way, I tried to develop opinions about what was working and what wasn't.
When I had something worth sharing, I got feedback from the experienced engineers on the team. I learned a lot through this process, and within a few weeks I had the framework for a visual modeling language.
Next, I had to determine the UI framework that would surround and support the visual editor. To do that, I analyzed web-based editors of various kinds to understand how they divided up the space and handled different modes or contexts. I also surveyed code editing environments to understand how they dealt with supporting views without using additional windows.
I quickly developed UI scaffolding that could be used throughout the platform, with main content in the center, actions at the top, and supporting views that went from contextual on the left, to detailed on the right, with extra, lesser-used panels sliding up from the bottom.
In less than a year, we launched our first version to the public.
With the help of customer feedback, we iterated on the core product, improving workflows and adding features. Here's what it looks like today:
