Designing a no code tool from 0 to 1

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?

(aka No-Code Application Development Platforms)

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

Segment is a B2B software company that provides a customer data platform. This platform enables businesses to collect first-party data about users from different sources, unify user actions, and send that data to tools such as Amplitude, Intercom, and MailChimp. With that data sent downstream, Segment customers can then take actions such as analyzing data, sending personalized email campaigns to their customers, and so on.

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?

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

A no-code solution is designed for users to do complex jobs easily.

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

The vision for building a no-code tool did not just suddenly come to us one day.. It was actually based on what we learned about our users.

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.

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:

Many users get intimidated when they see even one single line of code.
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!

Other than building this product from 0 to 1 within one year, we had also successfully transformed it from an unusable product into a usable and delightful product within 7 months. (Of course, there are still improvements that we’re constantly making.) If you’d like to learn more about how I helped our team to get to this state, please stay tuned & follow me for more content!

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.