February 4, 2019

What I Learned From My First Hackathon

I participated in my first hackathon last weekend. More specifically, in Hack The Gap: an annual event in the Twin Cities dedicated to amplifying the voices and talents of under-served, under-represented, and under-estimated women and non-binary individuals in the tech community.

At Hack the Gap, there’s no intense rivalry, no redbull, and definitely no overnight benders. It’s a supportive environment for taking risks. But there’s still competition: and a day and a half of intense hacking that culminates in an afternoon of 5-minute presentations.

Knowing that, I waffled on what I wanted out of the weekend. Did I want to dig deep into visual design and branding? Learn more about product design? Push my web animation skills to the next level?

I didn’t do any of those things. At the last second, I joined a team with a vague notion to understand how to bridge the gap between design and engineering.

And I’m so glad I did.

Because as it turns out, meeting several friendly strangers and collectively deciding to hack together the fundamental guts of an interactive education experience — with immensely unfamiliar technology — ended up being the perfect way to better understand the broader relevance of hybrid design and development skills.

Throughout the weekend, I tackled a variety of frontend design roles. I helped lead discussions about the value of inclusive design, and how accessibility could be used to guide our approach to visual design; provided ongoing coaching on how to write CSS without the aid of a framework; delivered a frequent stream of unpolished CodePen design experiments for engineers to try to implement; and helped troubleshoot issues when front-end code broke upon compilation or when the implemented version of a page didn’t match an earlier prototype.

That was all incredibly invigorating. But I believe the weekend also taught me how valuable it can be for designers with hybrid backgrounds to mediate discussions on how to balance design ambition with real-world constraints.

According to Foodsby Senior Mobile Lead / Developer Patrick Fuentes, this often means being able to advocate for when design should be boring and when it shouldn’t. Or as he put it on a panel discussion on collaborative product design at this year’s DevFestMN, “We can reinvent the wheel on every aspect of the app if want, and it will never get out the door.”

That's not an easy message to necessarily communicate: especially in a non-violent, commpassionate manner. But I think it's a task in which individuals who can empathize with both designers and engineers are uniquely suited to pursue.

In practice at Hack the Gap, for me this meant advocating for my team to explore how quickly we could use simple bits of HTML and CSS to style our initial user interface. It meant asking others for early and often feedback on my own design work, and not getting hung up on who owned what.

It meant championing collaboration and finding ways in which I could help everyone feel excited to contribute. Which ended up becoming a really beautiful thing in and of itself.

This is my team, shortly after noon on demo day, hyped up on caffeine and excited to present:

We honestly didn’t think we were going to win anything. In the end, what we had on our hands was several web pages linked together using React. Beautiful pages — built with an in-depth understanding of cyber security challenges and education theory. And a desire to make it approachable and even entertaining for anyone to learn about how to empower themselves to be less vulnerable online.

Maybe that wouldn’t seem innovative. But we’d done it together, and we felt incredibly proud. And the weird thing?

We did actually win two awards: 2nd place overall and the “Thirst for Growth” award for taking risks with emerging technology. And in the future?

We're hoping to actually launch Securiosity as a free platform for promoting cyber security education. So stay tuned, y'all.