How a Spur-Of-The-Moment Decision Got Me over 1.1k Upvotes on Product Hunt

Published Aug 08, 2017Last updated Nov 19, 2017
How a Spur-Of-The-Moment Decision Got Me over 1.1k Upvotes on Product Hunt

Our product, Topol.io, an email editor that lets anyone create beautiful email templates, was a surprise sleeper hit. After our Product Hunt launch, it grabbed the attention of designers, developers, and marketers worldwide. To our great surprise, it quickly received more than 1.1k upvotes. Someone even reached out to ask how they too could have a successful launch.

I wasn’t sure what to tell that person. The truth is, we didn’t really plan out our product launch, and certainly didn’t expect that amount of success. Looking back, I realized there was one key element of success: our product.

The first version of Topol wasn’t perfect, but the idea and execution were good, and we were dedicated to making it better. It took us two to three years of iterating to get to the final version. We experimented with various technologies, learned from our mistakes, and continually refined our product along the way. We’re now proud that Topol is, in our opinion, a great product and the best solution for the problem we wanted to solve.

If you want a successful product launch, build a great product. Here’s our story.

The idea for Topol.io

People’s working lives revolve around email. I used to work at a digital agency. After working there, I started my own business with a colleague to provide email automation and marketing services to our clients, who are primarily central European.

From the beginning, we knew our services had to be very user friendly to cater to our clients. They had varying levels of technical and design skills and different needs when it came to their email marketing efforts. That’s why we decided to build an email editor that would help our clients design and create beautiful emails.

We wanted our editor to be beautiful, simple, and very easy to use. We decided that our users need to be able to build an email template just by pointing and clicking. That was two or three years ago. Since then, we’ve gone through four or five versions of the product. Although the core idea stayed the same, building Topol was an definitely an iterative process.

Initially, there were some technical aspects that got in the way of the editor working smoothly. There were also times when we felt that our idea of the product wasn’t clear. We took a lot of comments to heart and had many brainstorming sessions where we tried to perfect the product’s mission and technical aspects. It’s finally in a place where we’re happy with it and can consider it the end product.

What is Topol.io?

Topol is a tool that helps you design beautiful and responsive emails. When you first start out, you can choose one of several templates that our team designed.

Screen Shot 2017-07-24 at 16.53.59.png

Once you click on a template, you can customize it by dragging things like dividers, buttons, and spacers onto the template. You can also embed images, videos, or even GIFs into the email templates.

971e4217-bfc8-4ee0-91fe-e790705daee7 (1).jpeg

When you’re happy with your template, you can save and download it in HTML format. The Pro version, which costs $5 a month, is very similar but has the added feature of downloading templates for use in any email service. In the Pro version, users can also use our Google CDN to host their images.

Iterating and Experimenting with Different Technologies

The first edition of the editor was made very simply with jQuery. It was essentially a series of blocks, which were HTML blueprints. You edited the HTML code right in the browser. But that started to get messy, because jQuery isn’t made for this kind of usage. Also, jQuery’s drag-and-drop is not the most reliable.

In the following version, users were just editing the HTML itself, but the downside was that it didn’t work with all email clients. The next thing we tried was using React, which worked much better. We also used a version of MJML, an open-source library from Mailjet.

Diving deep into the MJML library was a challenge because we had to reverse-engineer and hack it to make it suit our needs. Once we did, we didn’t face many complications since we already knew exactly what we wanted to build. Even though MJML worked, we needed to make a lot of changes inside, so it would work better on the client side. When we tried to do that, the product became messier and harder to maintain.

Eventually, the technology we ended up using to build Topol was Vue.js. After trying out the other frameworks, we’re happy with this choice and it’s working smoothly right now. The MJML we used is still hacked somewhat, but it works.

How Topol Works

Our email editor, Topol, is essentially made up of a bunch of UI controls. Based on how you manipulate the controls, they make the template using MJML, and we render it on the server. From MJML, we make the final HTML of the template you create, which can then be downloaded. From this, we realized the potential of using serverless architecture, which we ended up using as well.

topolio-diagram.png

There are a lot of email editors out there. Our competitors include MailChimp and Campaign Monitor, among others. We’ve closely studied how their email editors look and work. We’ve incorporated what we liked into our own product but have also made the rest better than what they offer. We were inspired by them but have ultimately incorporated some of their good ideas to make a product that has the best of all worlds. 😄

Launching Topol

When we released Topol, we didn’t think that hard about promoting it. We didn’t even know what Product Hunt was when we decided to launch. For some fortunate reason, I just stumbled upon the website. I’m not quite sure why I thought about posting our product on that specific site, but I’m sure happy we did.

Our launch on Product Hunt led to blogs picking up on the product and writing about it. Every other day, it seemed like there was another web designer blog writing about Topol. From the very first day we put Topol on Product Hunt, the reception has been a bit crazy.

Since launching, we got feedback on the product and made some changes to improve it. One cool development was when another email marketing company said they were willing to license Topol and use the editor as a plug-in for their product. Overall, we were overwhelmingly surprised by the response to our product.

Challenges of the Email World

The main obstacle during our iterative product-building process was figuring out the technicalities and specific challenges of the email world. It’s messy.

Building emails is very different from building websites. Some people ask us, for example, if it would be possible to build a landing page with our editor. The answer is yes, it would be possible and easy. But there’s no need to do that with our editor. There are a lot of website-builders that let you do that directly: drag and drop what you want to appear where, edit the code, and get your webpage. Those are easy and work fine, partly because there are only four or five main browsers to serve.

With emails, it's a different story. You need to know and think about all the technical specificities of individual email clients before you let users handle the various factors and styles that go into email templates. Because there are so many factors when it comes to email, it can be a mess among all these email clients. It’s not an easy problem to solve. Still, we think that we’ve built something that works great on every major email client you can use.

Key Learnings

Build, Learn, Iterate

This is the way we built Topol: we worked fast and made mistakes. Then we'd make another version, and fix issues using what we'd learned on the way.

We tried some error tracking with Sentry, a tool you can embed or install with a script to track errors. We found that we could track all errors created on the client side and fix them without the client telling us they experienced the error. Being able to track errors that way has been very useful and helped us better serve our customers, which has always been our main goal.

Email audience - virtually boundless

We created Topol based on the idea that anyone should be able use it. When we started, we didn't realize that our tool would be used by such a wide variety of people, including political parties, girls who sells homemade socks, and people who make products for horses. The audience is very diverse, and we can’t even imagine who else will use it tomorrow. The user base runs the gamut from professionals and email geeks to everyday users without much technical know-how.

There’s a magic recipe for success — just build a good product

To the developer who reached out to ask me how to be successful on Product Hunt, here’s the magic recipe: make a good product others want to use. “Make something people want,” as Y Combinator’s motto goes. While Topol.io didn’t come out of YC, it’s still a valuable lesson that I learned while building it.

Looking back, I can say that we perhaps could have been faster if we had spent more time planning the product at the beginning, including making proofs of concept before the launch. In hindsight, I can even say that the approach we used might not have been the best one.

That being said, it worked for us in the end! Even if there’s a different, better way, we wouldn’t know because we've never tried anything else. It took us three years of exploring different frameworks, fixing bugs, and listening to feedback. Perhaps someone would have been able to do it in half the time, but it wouldn’t be the same product as ours — one that works and helps others create something simple, beautiful and useful.

Discover and read more posts from Jan Tlapak
get started
Enjoy this post?

Leave a like and comment for Jan

7
1