How to Design a User-Friendly UI/UX – Our Experience on Building Typedream

One of Typedream's biggest values for the no-code community is its user-friendly interface. This means that getting our UI/UX right is crucial for our growth and survival.

And you guessed it, nobody in the team studied Design or UI/UX...

When you're building a product in a highly competitive market, such as making a website builder, UI/UX can make or break your product. Your users have so many options, getting stuck on a product is not worth their time. Unfortunately, much like other things in the startup business, there's no easy way to measure and progress in terms of UI/UX.

Getting the problem right: talk to your users before making an idea.

It was January 2020 when we started developing Typedream. We were highly skeptical of the idea, we had so many questions unanswered, we've just pivoted 2x since our Y Combinator days, and we were absolutely exhausted. But this is where we actually executed YC's advice of "Talk to your users" correctly. We started by interviewing 20 people from the no-code community who made websites with Notion.

We found our keyword, the same thing that was said over and over. "Easy but customizable", these people totally fell in love with Notion's interface.

That's our cue. Still highly skeptical, but what the hell, there's no hope for our previous product anyway. So we started building an MVP, exactly like Notion, but with additional elements: Buttons, Navbar, and built on Vercel so it's static and fast.

Build an MVP, then go back to the initial users

We went back to the initial users, plus found some new users, and allowed them to try out our new Typedream editor. We set up a video call and asked them to replicate a simple site.

It was quite a disaster.

Although we made it exactly like Notion, a lot of things overlapped each other, making it impossible to edit the site. We didn't realize that Notion's design is pretty limited and vertical, you don't usually nest things or make columns.

To build a website, you'll need to use columns everywhere, and insert images, buttons, and other things inside them.

What we did:

• We tried looking at other website builders and graphics editor tools like Webflow, Figma, Google Sites, etc, to see how they approach this.
• We then quickly implemented the changes and pushed an update
• We then onboarded new users the next week, asking them to replicate the same site and see if it has improved.

Over time, our UX got increasingly better, and we iterated really fast. We had the flexibility of "move fast and break things" since we were on the closed beta, and nobody really used the platform at that time.

How we get users to join our onboarding call / UX research

One of the things we did right was posting our progress on social media, and tagging the right people. We got recognized by big people on Twitter, and as a result, we were able to hype up Typedream.

We set up a waitlist, and ask people to tweet about Typedream to jump up the list. Anyone who got off the list has to do an onboarding call to use the product. As a result, we have thousands of people on the list for our onboarding call / UX research. This is very important for us to be able to test things out really quickly.

We ended up onboarding ~200 people before we feel ready to launch publicly.

In summary, all you need to do is just continuously interview people and ask them to use your product to solve their problems and observe how they interact with your product.

• If you see them constantly hovering over something that's NOT clickable, that means that element is misleading.
• If they keep failing to notice a certain button or element, that means nobody will see it, move it somewhere else
• etc.

How we keep our UX on-point after the public launch

We always make sure our UX is excellent by doing multiple interviews throughout the lifetime of Typedream:

Checklist on building a new feature:

• What pain are they experiencing with the current product, how can we solve them?

• Ask them, does this solve your problem?
• Ask them to do something with the new feature, see what's intuitive, what's not, what trips them up, and what works

• Do it quick, nobody has real access to the feature, it doesn't matter if it died for a while.

• Did it improve the UX? Does it solve the problem better? Do people understand what to do at first glance?
• Do this repeatedly until it's usable without a tutorial
• Or until your tutorial is good enough and well placed that people can use your feature without much help.

• There's only so much you can learn from the closed beta.
• When you release it, you'll see new use cases, and learn from there.

• Apply improvements and fixes based on feedback

• You must have done a ton of updates and fixes within those 2 months
• See if there are unique or advanced use cases that people can benefit from
• Perhaps those new use cases may invite more pro users

Well, this is where we're at right now, so we'll see what happens next 😂

In conclusion, talk to your users :)

Whether or not you have experience in design, you can see if your users are struggling. At least you can find out what's wrong. Of course, having a dedicated UI/UX designer would help you find the solution faster.

But wherever you are in your startup lifecycle, don't forget to talk to your users! Not just answering chat support, but actually invite them for a call and have a chat.

Thanks for reading! Let me know if you enjoyed the blog 😉

Putri