We built an MVP during a 2-day no-code hackathon

For the first time ever, we hosted an internal 2-day hackathon to learn about no-code tools... and ship an app.

Bartek Pierzchała

—

Product Designer

We love Webflow. It’s our go-to no-code tool and we recommend it every chance we get (sometimes we think clients pay us just so we shut up about it). In fact, every website we developed in the last 6 months was built using Webflow (including this blog!).

And while this tool is perfect in many ways, we couldn’t help but wonder: What else is out there, in the no-code universe?

Why a hackathon?

If you check what’s trending on Product Hunt every morning, you know that it seems like a new no-code platform is released every day. The rise in popularity of this technology is great, but ain’t nobody got time to learn all of these tools! Heck, keeping track of them would be quite an achievement on its own.

To fight the FOMO, our no-code team decided to host a 2-day hackathon to take those new, shiny tools for a spin.

Learning by doing

As design pragmatists, we believe that the best way to learn new stuff is by doing it — so we had to find ourselves a challenge that would give us the playground.

Should we build an app? What tool to use? Will we work with Webflow at all? We had a few ideas in mind, though none sounded as exciting as what was about to come.

Much needed catalyst

Just 2 weeks before the hackathon, during a regular team meeting, I pitched an idea for a product that we could build internally and, one day, launch to the public. My presentation included a no-code prototype I built in Bubble. Very scrappy, very ugly — but very functional.

After my demo, Damian (our Head of Design) suggested to build my app in no-code during the hackathon. It was a perfect plan for all of us, so I said yes — and joined the hackathon team.

Dream team

There was five of us: two designers (Damian and I) and three no-code developers (Rychu, Wojtek and Dawid). Additionally — being the idea owner — my responsibility was to make the final call in case of a dilemma. Regardless of our titles, though, we all contributed to the design of the app.

The day before the hackathon, we all met in a bar for drinks. We agreed to leave any work-related discussions for when the hackathon officially starts. The next morning, at dawn, we rolled up our sleeves, took the first (of many) sips of Red Bull (not sponsored) and gathered in front of a plain whiteboard that was soon to be covered in ideas.

The hackathon taking a selfie, smiling. — Me and the boys launching a product at 5am.

What we built

After 40 hours of the all-time high productivity, we launched Pickle — an app for designers in a pickle. You upload 2 versions of a design that you’re stuck on and let your team solve your dilemma by voting on the version they think is better. If you’re on the other side of the flow, you have to vote yourself first to see what others picked. It’s simple but beautiful — and it’s exactly what our team wanted to use.

Why we picked Pickle for the hackathon

When working in numerous agencies, I observed a common pattern of exchanging design feedback on Slack: designers posting a couple versions of their design and letting others vote for the best one.

This pattern also existed at tonik. Seeing an opportunity to make the feedback process easier seemed like a fun thing to do. And it was relatable.

Fixing a real problem

I always thought that the makeshift voting in Slack is flawed. It’s highly biased because you always see how the majority of your team is voting. On top of that, the first person to post a comment influences everyone after them (google priming).

To nurture independent thought, Pickle keeps those influences hidden until you vote. Only once you do, you get to compare your opinion with others.

It’s rewarding to see what feedback your colleagues gave and find out if you really think alike or just copy each others’ words.

What we learned

During those fast-paced 2 days, we learned a lot about the state, possibilities and limitations of no-code development. Not only did we build an MVP, we also learned first-hand how difficult it is to create a seemingly simple thing.

Focus is key

To truly focus, we eliminated all distractions. We dedicated an entire room in our Poznań office just for the hackathon. We locked our calendars and paused all notifications. Everyone at tonik knew that we shouldn’t be disturbed.

We were in the zone for 48 hours straight. Our heads were clear and focused on one thing: shipping the app.

We’re all in this together

To keep everyone on the same page, we had an all-hands-on-deck sync every hour. It allowed us to pivot (when needed), spot blockers or exhaustion. If someone was stuck on a task for longer than an hour, he would get help from another team member or switch his focus altogether.

This approach kept us motivated and prevented feeling burnt out. After all, we were in this together, sharing all the Ls and Ws.

The hackathon in a room full of computers and a big TV that shows the app's prototype. It's dark and everyone's focused on the job. — We didn’t have time for a proper team picture. That’s the best we’ve got.

Figma is perfect for collaboration

Together with Damian, we collaborated on the design of Pickle. He focused on the visual direction and I was planning the information architecture and writing all kinds of copy. From prototypes, through various diagrams and ending with the landing page content, we used Figma for literally everything. Whatever the devs needed, we could hand it to them in seconds.

The TV showing a user flow with a caption that says 'MVP (Minimum Viable Pickle). — Minimum Viable Pickle — the new standard of launching startups.

Integrations are OK, but native is safer

We did consider building Pickle in Webflow, but it required too many integrations: Zapier/Integromat, Airtable, MemberStack. Having this many additional services meant a lot of time spent on syncing between apps, resulting in a lack of real-time status update.

By going native you eliminate the man in the middle. For example, instead of relying on a third-party solution to synchronize databases, you operate in real-time with zero lag. Even Glide — which sported a sheets-first approach for years — noticed that because they launched native sheets themselves. No more worrying about a mysteriously removed Google Sheet or Airtable file!

It’s possible to judge a no-code platform

Whenever a new platform is launched, no-code enthusiasts are eager to try it. But some of those apps shine so brightly that you get blinded and forget to check if they can handle the job. Thanks to our hackathon, we found a way to test any no-code platform using 4 criteria:

Logic — can it handle formulas, events and triggers?
Database — can it create and edit relational database records in real-time?
Integrations — can it integrate with Slack, Google and Zapier with third-party solutions?
Styling — can it be styled to the point where it looks as good as custom-coded apps?

Bubble is the ultimate all-in-one solution

There were 4 platforms we considered using: Glide, Retool, Ycode and Bubble. And there was limited time to test them.

To be 100% sure that we chose the right tool, we ran 30-minute tests for all no-code platforms:

I can upload 2 pictures and see them side by side before submitting the form.
I can vote on a picture and comment it without seeing my team’s votes until I submit my own.

Bubble won in overall. It has a built-in logic and database, style editor and full customizability. Not only is it self-sufficient but also super-powered with hundreds of integrations. Everything happens in a blink of an eye in one platform, no hiccups.

No-code is a profession, not an ‘extra’

None of our developers worked with Bubble before. But after analyzing my prototype they already knew more than I did when I had created it after hours. This shows how little tools can matter — if you have the right mindset.

But as powerful as Bubble is, it’s also quirky. Its styling feature is nowhere near Webflow’s ease of use. Luckily, Wojtek got the hold of it quickly. No one could match the speed he was customizing the UI, so we assigned any styling efforts to him.

Then Dawid took on the integrations tasks because he was already familiar with tools like Zapier. Once he finished that, he developed Pickle’s landing page in Webflow.

Last but not least, Rychu handled the database thanks to his superb architectural approach. He was responsible for the foundations that Wojtek and Dawid used.

We realized how no-code is not a bonus you can add to your skill matrix with a little effort but rather a separate profession that requires a ton of knowledge and practical experience.

What’s next?

When we finally shipped the app at 5am in the morning, we were so happy that the hackathon is finally over. Later that day we held a celebratory team meeting where we announced the launch. The app was live and we were heroes.

Oh, and of course we had a party that technically extended the hackathon by another 24 hours.

A picture of Szymon, who's smiling at a restaurant. — Tell me that this smile ain’t worth the hustle.

Where a hackathon ends, a journey begins

While our teammates at tonik already use Pickle for solving daily design dilemmas, we want other teams to see how well it works too. We invited a few companies to test it to learn as much as we can about our users’ needs.

BUT, you can join our waitlist yourself to keep up with us and be the first to know once we launch to the public!

Will we host another hackathon?

Oh, definitely! Not for the same app, though. I think that hackathons should be reserved just for fresh challenges. Only then you can evoke that creative energy and drive. Hackathon is all about like-minded people getting together to solve a problem — not to work faster.

We never planned the hackathon to make things faster. We saw it as a way to make them possible.

At the end of the day, it was not about the app itself — but the people. We all wanted to learn a new no-code tool — and we did. We all wanted to learn our strengths, weaknesses — and we did.

So if you’re thinking about hosting a hackathon yourself, follow the famous slogan and just do it.

Takeaways

No-code world goes beyond Webflow.
Hackathons are great for both building and learning.
It’s easier to build a solution to a problem you can relate to.
Complementing each other is faster than learning all by yourself
One hour is enough to test out a no-code tool if you know exactly what you need to achieve.
You can judge a no-code platform by 4 criteria: logic, database, integrations and styling.
No-code is a profession, not an ‘extra’.
Check out Pickle!

Don’t mention design tokens near him or you’ll get a (free!) lecture. A true 10x Product Designer who always starts with ‘why’.