<- Index

Using websites as an interaction prototyping tool, or how I designed a UI for DevOps

One day I was approached by a product owner of a few SaaS apps we’re building at CFT. He described an issue they had: half a dozen apps multiplied by two dozen corporate clients were causing an issue for their DevOps engineers. They had loads of various configuration files in different formats and no easy way of spinning up and configuring a new app instance for a new client.

Now, I like these sorts of challenges. They seem technical at first, but you have to remember there are actual people behind those operations. And they would rather have a pleasant experience and a UI forgiving human errors.

There are existing solutions for managing multiple client instances. But they are either too technical or too generic. In my post about building a sustainable design system, I write more about the shortcomings of generic solutions.

While for consumer-facing products, it is better to start with design, we decided to start with engineering first for this engineer-oriented tool.

We asked app developers and DevOps engineers to propose a solution for unifying their config systems. After a short back and forth that included me, engineers, and a system analyst, we came to a solution. The solution was to store any config in a tree-like hierarchical structure. Quick sketching showed there are multiple ways to design a UI to manage settings structured in such a way. I also asked devs not to migrate existing settings to a new API yet, as there were not enough data about what extra fields we’ll need to make the UI user-friendly.

The next obvious step would be to jump straight to Figma to do wireframes and get early feedback. But for this project, I went for an advanced tool straight away. I created a web prototype.

This is one of my favorite design tools of today. It fits the “show, don’t tell” approach very well. As good as they are, Figma prototypes don’t feel like an authentic experience. Although, this may change in the future: the tools are becoming increasingly advanced each month.

Creating a web prototype only sounds like a complicated and lengthy task. Once you’re familiar with web development on a fundamental level and have built a few projects from scratch, the time to create such a prototype is comparable to designing one in Figma. It can take a bit longer if we’re talking about complex interactions, i.e., the ones that save user state between sessions. But it’s still worth it, as those things can’t be built using common design tools as of 2022.

For this project, it was essential to show future users how navigation and app configuration will work. This was also an opportunity to test little UX improvements, like this default value tag that becomes highlighted if you leave the input field blank.

Sending the prototype link to those unable to attend in-person meetings also worked better than usual. They saw the prototype not as a bunch of pictures but as a working demo. This led to more engagement and feedback compared to the previous discussion stages.

Another thing I learned from the project was not to throw away stuff after you’re done with it. As I’ve got my own server and CI/CD processes set up for those advanced design tasks, I sometimes feel the need to clean up after the real project is shipped. Why do you need a half-working website when you have the real product out there?

Real products are real for a reason, though. You can’t easily access an app that essentially controls critical bank infrastructure. And the team might have already turned off testing and demo servers if they’re done with an active stage of development.

That’s when the old prototype comes in handy. A few months after we were done with this app, I sat in a meeting with another team. Their DevOps engineer talked about the same issues the first team in this story had. All it took was to send them a link to a prototype demo I still had online. The team agreed to adopt the solution. This probably saved them some time dealing with their configuration issues and potentially a lot of time trying to come up with their own solution to this problem.

How do you create prototypes? Want to chat about it? Feel free to drop me an email. I appreciate any feedback.

<- Back to index