Designing a no-code tool

Qiao Huang
Jul 31, 2020 · 6 min read
Image for post
Image for post
Illustrated by Qiao Huang

As part of this year’s San Francisco Design Week, I gave a talk about my journey designing a no-code tool, including the challenges I faced and what I’ve learned as a Product Designer. I was pleasantly surprised that more than 500 people tuned in to listen to the talk. It was a clear indicator of the level of interest for this topic.

If you’re thinking about building a no code tool, or you’d like to learn more about designing a technical product for non-technical users, you’re in the right place — My team and I recently launched a no-code tool called Visual Tagger at Segment.

What is a no-code tool?

There is a growing demand for no code or low code solutions, such as Webflow, Shopify, Airtable, and many others. Their mission centers around democratizing technology, enabling people to be creators, and empowering them to focus on other important aspects of their businesses by removing the need to code manually.

About the no-code tool we built

People sign up for Segment with the goal of enabling analytics for their company. However, we discovered that for many of our new customers there was a massive hurdle to get started with Segment despite how desirable the product is — Setting up Segment needs engineering effort and buy-in. Yet, many of our customers are actually marketers, product managers and business owners who don’t necessarily possess that technical knowledge. How might we help unblock these customers from getting set up with Segment and get their team on-board?

Image for post
Image for post
Visual Tagger

Introduce Visual Tagger — a tool that helps Segment customers easily collect data about what their users are doing on their websites without implementing any code. It has been very well-received by our customers, in fact many new customers have been able to get set up with Segment successfully by using this tool. However, the path to getting to this end state of our product was by no means simple or easy. We were building something that will eventually replace the need to code entirely.

After reflecting on my journey leading design for Visual Tagger, there are three main lessons I’ve concluded from a Product Designer’s point of view:

Leverage the beginner’s mindset

As a designer on this type of project, you are responsible for turning a very complex state into a simplified and friendly UI. The goal is to present polished and simple interfaces, hiding all the engineering work that is running behind the scenes.

It’s a no-brainer that you need to know how the underlying technology of your product works in order to design a tool of this nature. If you are not familiar with the subject you’re designing for, it can be daunting to find yourself surrounded by engineers and PMs using technical jargons 24/7. Think of this as an excellent opportunity to absorb tremendous amount of knowledge from them.

Along with doing your homework on the subject, don’t be afraid to ask questions. By asking probing and difficult questions, you will challenge your teammates to re-think their assumptions that have been set overtime, while helping build your own understanding of the product. Always ask hard questions even when you are at an advanced level, just as a beginner would. Why? This is called a beginner’s mindset, which sets aside the status quo to challenge assumptions and to explore new possibilities.

I’d encourage everyone to leverage the beginner’s mindset. This will help yourself and your team periodically question and reassess deeply held assumptions. It’s easy to stick to existing ways of thinking, and much more difficult to be bold enough to disrupt what has been established. If you approach your subject with a more naive mindset, you might come up with new solutions!

The definition of technicality may vary

As I started leading design for Visual Tagger, our team was still trying to build a deeper understanding of who our users (or potential users) are. With the drive to build customer empathy, we ended up conducting user interviews on a weekly basis. What we learned was that new Segment users are mainly marketers, product managers and business owners. By questioning what, how, when and where, we started to form a crisp idea of the exact problems our users are trying to solve — we found that they want to enable analytics without relying on their developers, because traditional tracking implementation is very time consuming. With a lack of engineering resources, our users come to us, eager to set up tracking on their websites themselves so that they can track their user’s actions digitally.

With these learnings from customer interviews in mind, we started to get a sense that many of these marketers, PMs and founders are non-technical. I started to wonder… where should I draw the line between “technical” and “non-technical” as I design for them? I knew that I needed to dig deeper.

Image for post
Image for post

We know that people have different backgrounds and skill sets. There are also so many different programming languages. Turns out, you can’t just ask users “are you technical?” It is a fairly vague question that’s hard to give a distinct answer to, simply because individuals also have different understanding around technicality. In addition, what users told us about their level of technical knowledge did not always match how they behaved. To answer this specific question, we found it was best to observe how they use our product.

The more user testing we did, the more we discovered certain patterns:

  1. Many users get intimidated when they see even one single line of code.
  2. Many users are looking for guidance on how to set up analytics properly.

They want to learn analytics by doing, but the lack of analytical skill is a blocker for many of our users to achieve their goals successfully. These two conclusions are where we ended up drawing the lines between “technical” and “non-technical”. It became clear to us that we need to make this product “no-code” with beginner friendly analytics.

The definition of technicality may vary based on your product and target users. Just as building for any other products, learning about your users and the problems they are trying to solve is crucial.

A win-win for both coders and non-coders

“Love it! Great product, made my life so much easier. Waited for a month on my engineering team to get this setup. Visual Tagger came out and it only took me 20 minutes.

This is a quote from Jacob, a Segment customer at ViseAI. Similar to Jacob, many of our customers use Visual Tagger because what traditionally takes weeks or months to set up now only takes them less than 30 minutes. Even some of our users with programming backgrounds use Visual Tagger as well, because it saves them time and energy on implementing website tracking.

As we’ve discovered here at Segment, no-code solutions can be a win-win for both coders and non-coders.

There’s more!

Let’s chat about design, products & inspirations!

Special thanks to Kate Butterfield for editing. Also thanks to Sophia Yoo (my former fabulous PM, co-speaker at SFDW) & every single member of Visual Tagger Team — It has been an amazing journey building the product together.

Segment Design

Empowering every team with good data.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store