Crafting a Winning Solution at HacKlab Hackathon

I’ve always been fascinated by innovative thinking and technology, and their power to solve the world’s greatest challenges. I'm fortunate to have worked on products that affected millions of people. My aspiration is to design and create products that matter.

So when I saw an upcoming hackathon about improving the lives of Filipinos through technology, I immediately Slacked (is this a term now?) my teammates at YOYO. I was lucky that the "Father of UX in the Philippines" (as the design community fondly calls him), Ely Apao, happened to be working as our UX Consultant at the time. I got him on board along with two awesome developers, Ted and Monica.

The hack team was formed.

The Challenge

Transform the idea to prototype... in 24 hours

But first, we needed to qualify.

The event organizers would only choose 10 teams with the best ideas. There were over 50 participants all over Metro Manila. We were given a month to submit our top idea. No pressure.

The best way to have a good idea is to have a lot of ideas.

Linus Pauling
Quantum chemist and biochemist

We set up a Google Sheet and started with problem statements, then condensed it to "How Might We..." sentences. After our brainstorming session, we had generated quite a handful of great ideas.

Initially, we picked a crowdsourced scholarship idea as a way to provide education to the under-privileged youth. It'd be like Kickstarter for scholars.

But after further research, we figured that we could create more impact if we came up with a product that would support nonprofit organizations that were already doing good work. We'd create a platform to crowdsource donations for nonprofits so they can focus on doing more good work.

Nonprofit platform goals
  • Expand donor base
  • Improve donor retention
  • Increase community engagement

It was an "Aha!" moment for us, and we were very excited. We decided to send the nonprofit platform as our top idea, and then we waited.

We are in!

The qualifying teams were announced a week prior to the event. It meant we'd have a week to plan our strategy. With two UX guys leading the way, both Ely and I decided Agile UX would be the best approach.

That week before the event was our sprint 0, and the event itself would be our 1-day sprint.

Already armed with an end-user validated idea and a minimum viable scope, we headed off to a cafe to kick off our mini-scrum.

Ely facilitating the estimation of user stories

Marius' Angels

I wasn't around when the organizers asked for our team name. Naturally, my teammates came up with Marius' Angels, as a reference to Charlie's Angels (because you know, Charlie isn't there).

Back to the hackathon...

After the orientation, we were ushered to our own room. We had post-its, Sharpies, and most importantly - a whiteboard. Since we were doing agile, we quickly set up our kanban board to help us optimize our workflow.

Setting up my To-Dos

What we are building

We were building a crowdsourcing platform with a conversational UI.

How would we differentiate our platform from other charity apps? Two ways.

First, it allows nonprofits to open a conversation with potential donors and volunteers in a personal way - comparable to texting.

Second, donating will be fast, easy and secure. A truly delightful experience.

Hack away!

Here's how we managed to turn our idea into a prototype in 24 hours:

Pre-hackathon Planning

Idea development is key. Days before the event, we already had a clear picture of what we were going to do. We had our Minimum Viable Product broken down into user story points and we knew which user stories to focus on.

This step was crucial not only for understanding, but also for execution.

The first 6 hours

The core feature we wanted to use in our demo was the conversational UI. So we started writing down tasks and sticking our post-its on our kanban board to accomplish this. My first task was to map the app flow and create flowcharts for everyone's reference. After that I made the outline of our story and I started sketching different UI patterns. Ely worked on the website's frontend while Monica and Ted spent 6 hours setting up accounts, systems, and dev environment. Our dev setup took longer than expected, but we were still on track.

In hindsight, we could have saved time if we setup our systems before the hackathon started.

Logo and UI sketches

The next 12 hours

This is where the work got serious. While Ely worked on the website, I started working on the brand story and app's user interface. Ted and Monica were churning out codes. The flowcharts really helped. We were in the zone!

We named our platform "Ambag", a Filipino word for contribution or share in a collective affair. I used a prism as our symbol because it exudes hope - one ray of light creates a rainbow. It's perfect!

And then, fatigue kicked in. After all, we're human too. We were constrained by our physical bodies and we know it's important to rest too in order to operate at peak efficiency.

The last 6 hours

After a short rest and a cup of coffee, we were bent on getting everything done. Just when we thought everything was going smoothly, bam! Our devs encountered a major impediment. We couldn't get our back-end to work.

We didn't panic. We focused on what's working. We had an awesome website and our app prototype in Marvel worked perfectly. We created a "happy path", just like what Steve Jobs did with the original iPhone launch.

We spent the last hour perfecting the story and our pitch.

And finally...

Pitching time!

Delivering the Pitch

I was the designated speaker of the group and Ely served as my demo driver. It wasn't my first time to sell ideas, in fact, it's part of my job as a product designer. Here are some tips I've picked up along the way:

  • Write down 3 talking points. In this hackathon I started strong with our vision, explained why our approach is unique, and elaborated on the business value or opportunity.
  • Practice with your team. Talk like it's real. We practiced our pitch 3 times until we were comfortable with the flow.
  • Take time to relax. Hackathons are physically taxing. One hour before the pitch, I took a 5-minute meditation and a power nap.
  • Smile. It's normal to get nervous, I get nervous all the time. But come pitching time, take a deep breath, smile, and take your audience on a journey.

The Result

We faced stiff competition, our competitors were very talented. But we were as confident as anyone else and we believed we delivered value to our audience. It was a tight race and we pulled through. We won!

Achievement unlocked!


Things will not always go according to plan

When something goes wrong, don't freak out, focus on what's working. Create a "happy path" and don't stray from it.

Hackathons are awesome

Hackathons are great as skill incubators. I was able to practice communicating with technical teams, other designers, and industry experts. I've learned that deadlines can bring incredible things out of people. It made me stretch and flex my creative muscles. It was difficult going from brainstorming to building a user interface and experience for the prototype, then presenting to a panel of judges. However, the whole experience made me a better designer and leader.