How We Won the 1st Place in the Hackathon — Girls in Tech Hacking for Humanity 2019!

This article shares a personal experience of how we made it and what I gained from it

Annie Yining Wang
Jul 4 · 9 min read
Many thanks to my awesome teammates and Girls-in-tech judges!

Organizer: Girls in Tech Van

Venue: DevHub

Name: Girls In Tech Vancouver — Hacking for Humanity 2019

Award: 🥇 First Place — The Most Social Impact Award

Prize: $CAD 6,500

Date: 4–5th of April (2 days)

Actual work hours: approx. 14 hours

Participants: >100 participants with up to 30 teams

On the 4–5th of April, 2019, Girls in Tech Vancouver hosted their 2nd annual “Girls in Tech Vancouver Hacking for Humanity Hackathon” and I and my awesome team of four won 1st place with our app, ‘FIREAWARE’!

Girls in Tech Vancouver Hacking for Humanity Hackathon

Hacking for Humanity is a 2-day code-a-thon for developers, designers, scientists, students, entrepreneurs, educators, and mentors work together to build apps that solve social problems.

The event took place at DevHub, a community space for developers of all levels in Vancouver that provides great hacking space and environment for the event. More than 100 hackers attended, with nearly 30 teams in total.

People said that in a hackathon, male to female players ratio is 8:2. This Girls in Tech hackathon has roughly 60% of girls. (Will this attracts more people to join next year?😏)

The Team

Team members: Megzari Raphael(backend dev), Xinyu Kang(backend dev), Saki Kurano (UI/UX) and me(branding+UI/UX)

Final presenter: Raphael (AI and visualization part) and me (business idea and App part)

Before attending the event, we were almost unprepared. Except that I already had 2 teammates, Raphael and Saki. Raphael is an experienced back-end developer. Saki is a former web dev from Tokyo and a good friend of mine from Red Academy. Xinyu is an UBC student and she was assigned to our team just right before the event got started.

Before attending to the event, Raphael was talking about setting up the coding environment, but we never had the time to do it. I only did a little bit of research based on the article the organizer sent to our email inbox a few days before the event started. It’s important to note that we did not come fully prepared. We even got a bit lost before arriving Debhub and we thought that we weren't able to make it on time…

As Raphael, Saki and I just moved to Vancouver 2 months ago and completely foreign to this city, the idea of winning the hackathon wasn’t even conceived in my head at that time. We only thought that hackathon is a great way to meet other designers and developers and that was our initial motivation-to meet cool people. 😎

Before the hackathon

About one week before the hackathon event, we received an email saying that our challenge would be to eliminate gender inequality and to help with climate change. Usually, it’s important to do research before we attend the event, so I did the same. However, the topic was pretty general and broad, so it was hard for us to focus and discuss ahead.

During the hackathon

Choose a topic

Interestingly, right after the opening ceremony, each team, with the number of 4 were given 5 scenarios. We were asked to pick one of them to tackle. These 5 scenarios all asked us how can we use technology to educate and to connect people to the natural world.

We chose Scenario 4 since it was the most specific topic that we understand how to deal with at that time.

2018 was the worst fire season on record as B.C. extends a state of emergency beating the record set only a year earlier in 2017. More than 13,000 square kilometres of the province had burned in 2018, and is estimated to double in damage in 2019.
Demonstrate how to use technology to educate the issues surrounding local forest fires, floods, and other natural disasters.

Brainstorming

Brainstorming wasn’t easy, especially at the beginning. At first, we barely had any idea. Luckily, Girls-in-Tech Vancouver provides mentors for us to consult. We asked several questions to our mentors and they also provided some useful information and related links for us to start with.

Hence, we started to have more thoughts about what and how we want to do it. When we came up with the idea of creating an fire alert APP for firefighters and the general public to track fire at the surrounding area. We were thinking of what technology should we use and how to implement them. At that time, I suggested that we could use some technology terms, such as A.I., Artificial Intelligence, A.R., Augmented Reality and V.R., Virtual Reality, to catch people’s attention.

We were then looking for some cool technologies that we could actually implement it to our product. It was useful to use some related keywords to construct and to find more ideas. In this case, I would say that mind-map would be a good tool for doing so. ‘SimpleMind’ is a cross-platform mind mapping tool that is easy to organize thoughts, remember things and generate new ideas. The app version is called ‘SimpleMind+’ that has it on both iOS and Android platforms.

After the brainstorming, we came up with some keywords such as ‘prediction model’, ‘automation’, ‘AI prediction’, ‘real-time’, ‘hot spots’, ‘tracking’, ‘visualization’, etc.

The initial brainstorming started to be fruitful. We then narrowed down the scope, picked the most important tasks which were also doable and divided them into two. Raphael and Xinyu were assigned to the AI prediction model and fire visualization map, and saki and I were in charged of the mobile app design and to incorporate all technologies in one.

Design Process for the fire alert app- Fireaware

In this paragraph, I am going to share how we came up with this app in less than 8 hours and what tools we used to maximize our time. The best thing is that those tools are all free of charge.

First of all, we defined our target and followed with the ‘Affinity Diagram’ to organize ideas and data. We had a lot of ideas from brainstorms, user needs, opinions and insights that we wanted to put in the app. This tool helped us immensely to categorize, clustering and bundling information to each page of the app in an intensely short amount of time.

Here is one article talking about affinity diagram from IDF, Interaction Design Foundation that I recommend.

Besides using Sketch to create mock-up, I also use Flaticon to create the app logo and other icons. Flaticon is by far the largest database of free customizable icons in the world. It has nearly 2 million icons. You can edit icons directly on the website. It’s also super useful in a hackathon.

We also looked up other natural disaster apps to help us create mock-up in a short time. This earthquake alert app gave me much inspiration on how to design one.

Check for some similar or related product can also save a lot of time compared to thinking from scratch.

In addition to all the tools mentioned above, I also used inVision to demo our Final product. We didn’t have time to prepare a presentation on keynote or ppt, so InVision was the only tool I used to present our works.

Finally, we created an app provides general public fire prediction, alert functions, and educational resources!

Let’s see our final design on Invision:

Time for the app design: <8 hours

Presentation

In the meantime, our tech team also finished fire visualization map and AI prediction model. During the presentation, we simply explained our concept and that we have designed to incorporate the app all these above-mentioned technologies. And then, we presented the prototype of the app, the fire visualization map and the AI model respectively. We were happy that the feedback was pretty positive.

The first link contains what we do in general. The second one is the online final announcement. 🏆

Recap: Tips to win a hackathon

After the hackathon, I would like to share from my personal experience, what are the important points to succeed in a hackathon.

Tip 1 Make your idea sounds cool

Commodity needs to be sold and so does the hackathon idea. It also needs to be well-packaged to make the audience and judges to buy it.

In our case, we used the terms, such as ‘AI prediction model’, ‘virtualization’, ‘hot spots’ and ‘Real-time’ to package our product.

Tip 2 Follow the 80/20 rule

I think it’s important to mentioned that we followed the 80/20 rule (also known as the Pareto Principle) to make all these work in such a short amount of time. It’s one of the most helpful concepts in time management. Roughly 80 percent of the effect is coming from 20 percent of the causes. Our strategy were to pick on the 20 percent most important tasks that will account for 80 percent of the result.

In the beginning, we chose scenario 4, which for us was the most concrete and definite one. It prevented us from thinking too far and helped us to focus when we are at the brainstorming phase.

Tip 3 Ask a lot of questions

Thanks to Raphael who initiated it, we asked a lot of questions right from the beginning. We therefore got useful feedback from judges and mentors. It really helps us to get into the competition fast, to understand the scenario and to narrow down the scope.

Tip 4 Leverage as many tools as you can

In this article, I shared tools, such as SimpleMind, affinity diagram, Flaticon, and InVision that we used to maximize time. Remember, we had to race against time to finish before the deadline, work efficiently and effectively is the key!

Tip 5 Present loudly and confidently

This is a very easy and simple notion but I was surprised to see that many presenters still talked in a very low voice. Even with the microphone, even with judges seating at the front rolls, for a venue with more than 100 participants, not even counting volunteers, workers, mentors, and judges, I feel it was hard for me to hear and learn. It was a pity because many projects seem pretty interesting to me.

If it is hard to show confidence to people, I feel simply by speaking louder will help just fine.

Finally

I feel hackathon is a great place to make friends with a similar mindset. After the event, I talked to some designers and developers from other teams. I learned some new techniques that they used that I can implement it to my future design. I also talked to volunteers, mentors and judges. We were all connected via Facebook or LinkedIn. It was a great experience.

Many thanks to DevHub who provided an awesome venue, the organizer Girls in Tech Van, volunteers, mentors and judges, including Sandra Wong and Jesse Harris, Founders of Quantaloop, Ghislaine Chan, Managing Director of Girls in Tech Van, and Étienne Hossack, software engineer of Tasktop. Thanks to you all so that we were able to attend and enjoy such a great event.

At last, I would like to show My deep appreciation to my awesome teammates who went through all these together with me. It was challenging but we succeeded to pull it off! 😎 Special thanks to Raphael who told me about this meaningful and interesting events. You are a true leader and a great mentor!

I kept thinking of writing this article for a long time but life doesn’t always turn out as what we expected. I’m happy that I finally did it! Hope this personal experience can give future hackathoners some useful information. 🥳

Notes: The hackathon is part of a global series by Girls in Tech that takes place throughout the year in various cities around the world. Each chapter partners with Non-Profit Organizations (NPOs) to solve social problems local to their community.

Annie Yining Wang

Written by

Hi there, I am Annie, a globetrotter, a yogi, and a UIUX designer based in Vancouver. Let’s grab a coffee ☕️ 🥐 and talk about interesting ideas. 🙌

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade