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
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.
Non-Profit Platform Goals
Expand donor base
Improve donor retention
Increase community engagement
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 the team’s task list on Kanban
What we’re 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
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!
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!
Reflections
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.
