Forem: Špela Buh

From Idea to Reality in 2 Days: Bringing the Hackathon Approach into our Office

Špela Buh — Wed, 19 Mar 2025 10:46:49 +0000

If you read our DragonHack blog, you already know what an important role the hackathon approach has played in shaping our team dynamic and making us the team we are today. It threw us in headfirst, challenging us to solve real-life problems for the first time outside the classroom. And most importantly, it gave us the opportunity to discover the best way to work while tackling really hard problems head-on and still creating something incredible within the time constraints.

So, with a larger team than ever before and growing ambitions to explore some product ideas, we decided to see if this approach is still the right path for us, by holding a two-day internal company hackathon.

Ground Rules

Before we started, we had to set some ground rules for how the event and the work would take place.

Sleep at home: While true one-piece hackathons can be a lot of fun (staying up all night together, trying to get things done, and pushing through the slumps) we recognize that people have lives outside of work. So, we decided to spread the hackathon across two days.
Think about the users and make sure you’re solving a problem: It’s not just about the product; it’s about ensuring there is a product-user fit. Don’t just build something cool - make sure it actually solves a real-life problem.
Make a demo and pitch the idea: Think broader than just building it - show that you understand the problem and your product, and sell it to us.

Let’s Start at the Beginning - What To Do?

Of course, we couldn’t start without knowing what we wanted to work on. So, we kicked things off with a brainstorming session a week before to define the problem we wanted to solve. Each team member had to pitch two problems they were interested in tackling. The ideas were varied and diverse - ranging from development-focused issues that had bothered us for months to personal annoyances we encountered in everyday life and niche market problems we stumbled upon by chance.

With over 20 different ideas, we needed a way to narrow them down. So, we did a bit of research and combined different resources to get the 13 questions we asked for each problem to evaluate them:

Is this a solution or a problem?
Are we the right team to solve this problem?
Market size (large with little competition, or growing fast)?
How big is the problem?
Can we imagine a good business model?
Can we reach the target audience?
Is there competition? (Not necessarily bad - but do we need a new approach?)
Would we use this product ourselves?
Has the solution only recently become possible or necessary?
Are there successful similar companies in other markets?
Can we see ourselves working on this idea for years?
Is it scalable?
What is the success rate in this space?

At the end of this process, we were left with four ideas that checked all the boxes. Three days later, after everyone had a bit of time to sleep on it, we voted and selected the final two. With that, we were ready to start our hackathon.

Let’s Get Crackin’

Time for the main event - let’s get to building. We started by setting clear expectations and splitting into two balanced teams. From there, we defined key features, divided the work, and got to building.

Each team was also tasked with completing a value proposition canvas and creating a landing page to better understand the product, the problem, and how to communicate the value proposition. Then, the building began - of course, with a well-deserved pizza break along the way.

The first day was all about tackling the toughest challenges first and ensuring there was something to show - because the next morning kicked off with a short demo of what had been accomplished so far. The other team could ask questions and suggest ideas, giving us fresh momentum to push forward. But the hacking stopped at 15:30 sharp.

Then, it was pens down and time to pitch. Both teams did an incredible job - both in building and presenting, resulting in two amazing demos. But we’re not showing them to you just yet!

So Was This the Right Way?

Ending our two-day journey with a celebratory beer, we would say, absolutely! Beyond just building something awesome, we:

Created a great environment for innovation, maintained full focus, and really pushed through it.
Switched teams around a bit and explored different dynamics.
Coordinated, explored new roles, and tried out different approaches.
Thought more strategically, beyond just the technical aspects.
Had an amazing team-building experience.

Goodbye Webflow, Hello Our Shiny New Website

Špela Buh — Tue, 23 Jul 2024 06:38:25 +0000

“That's it! I'm done with Webflow! It's been nothing but a nightmare. We're moving to a headless CMS, and we're doing it now. No more wasting time!”... is what could have easily been heard about two months ago in our office, after (yet again) discussing whether to make a move to a headless CMS for our company website or not.

In reality, the discussion was much longer and much more boring to sum up here. But what is true, is that for the past few months we have been working hard to revamp our website after growing frustrated with Webflow, and we finally launched it! So, after completing this strenuous path, we decided to share the journey insights with you.

A short history of what we tried and why it was time to move on.

So, as evident from the title, we of course used Webflow, but we also tried out WordPress, as well as hard coding our website using React and considered a few other alternatives. However, each of these options was in some way too limiting for our needs.

Hard coded website

Took too long to set up.
Difficult to edit content.
Can’t outsource the editing work to a non-technical team.

Webflow

Limited by the selected theme.
It requires more technical understanding than expected - when editing the content, you can easily change something on one page that changes the layout, or some other design aspects on other pages as well. This was at least in part a problem with the theme we were using, but Webflow did not help either.
There are some live preview issues.
Localization was not built-in until very recently.
The customization is very hard and a lot of things were taken out of our hands (performance, fine-grained SEO, lazy loading, etc.).

WordPress

Performance is subpar.
Localization issues in the headless version.
Bottom line: If you are using WordPress as a template it works fine but as a headless CMS it mostly sucks because of subpar API support.

We also considered Squarespace, Wix and Framer, and although it is possible to use them as headless CMS, they are also quite limiting. So we decided to find a suitable headless CMS, meaning we could use Next.js (our beloved framework) for frontend development and develop a completely custom website, but still have a content management system, which allows a relatively simple input and editing of content.

What we were looking for:

Based on our experience we decided to go for a suitable headless CMS for managing the content of a Next.js-based landing page, allowing full customization and seamless integration. Other requirements we had were also support of custom sections or components that emulate a purposely primitive website builder, rich text editor support, user-friendly admin interface, SEO support, multi-user support, media hosting and easy backups and restoring.

We conducted quite an extensive research when it came to choosing the right solution for us. As this was long enough for a whole separate blog post, we decided to post it here:

The Hunt for a Perfect Headless CMS

Žiga Patačko Koderman for zerodays ・ Jul 3

#nextjs #cms #payload #webdev

The solution

In the end, we (web)landed on Payload because of its superb integration with Next.js - our technology of choice for web development.

This approach allows us to:

Have absolute control over performance.
Play around with SEO and analytics on a lower level than with other solutions.
Have a great experience for the content editors.
Build a tailored website including great animations and easter eggs.
Use our favorite libraries and tools along the way (Framer Motion, Tailwind CSS, shadcn/ui among others - take a look at our Next.js template on GitHub).

The results speak for themselves.

Desktop performance

Mobile performance

So far, we are loving it, but what we love even more is the new website, built by our team of talented developers. Check it out!

Here are also some before and after shots, so you can compare the improvement for yourself:

Landing page before:

Landing page after:

About Us page before:

About Us page after:

Visualization of our development process before:

Visualization of our development process after:

Services page before:

Services page after:

Contact form before:

Contact form after: