Initially, creating an impressive, fun, interactive, and informative website for the upcoming hackathon HACKTX 2024. But more than that, learning to restart, take charge, and communicate with non-designers. Answering the question: what makes a good hackathon website?
When I set out to designhacktx.com/24for Freetail Hackers, my main priority was to create something that would excite everyone of our audiences—sponsors, attendees, partners, and speakers—while making it easy for everyone to find the information they needed.
Understanding the audience was a huge part of my process. I started by mapping out all our stakeholders with a power/interest matrix, which helped me clarify how each group would engage with the site and what they cared about most. Since I was leading the team, I ended up acting as a bridge between these different groups, trying to balance everyone's needs and keeping communication open.
A stakeholder power-interest matrix to demonstrate how communication channels worked and shows who this website design is for.
For inspiration, I researched other successful hackathon websites and had long conversations with our directors about what makes a page stand out. I wanted our site to be not just clean and professional, but also interactive, fun, and totally on-theme.
The visual aesthetic drew heavily from Japanese arcade and gaming culture—something I admittedly didn’t grow up with—so I leaned on friends who did, making sure the references felt authentic and inclusive.
Some key images from our ever growing mood and inspiration board on Miro.
Our design process was super collaborative. We started by brainstorming, sketching wild ideas on paper, and then moving those concepts into digital wireframes. As a group, we debated which features would actually be feasible for our tech team to pull off before the event. I paid special attention to hierarchy and clarity—I wanted every page to look polished and be easy to use, so I spent a lot of time on text styles, color systems, and making sure everything was visually cohesive in Figma.
Allie's wireframe sketches
Allie's wireframe sketches
Allie's wireframe sketches
Lo-fi wireframes with mobile versions
Lo-fi wireframes with mobile versions
Lo-fi wireframes with mobile versions
Working with the development team was a constant feedback loop. I had regular check-ins with our lead dev, Khang Tran, to make sure the vision came through as he and the tech team built out the site. Khang sometimes brought new ideas to the table—like having the mascot’s eyes follow the mouse or adding a parallax effect with stars—and I always appreciated that openness, even if not every idea made it to the final version.
In the end, I’m really proud of what the whole team accomplished. The HackTX 2024 site feels much more vibrant and engaging and does a better job serving everyone’s needs. One thing I learned is how valuable it is to “dream big” first, then scale things back to what’s actually possible; it leads to stronger work than just doing what feels safe from the beginning. Communication with the tech team and the other stakeholders involved to design something that is both feasible and desired is also important for a stronger piece of work. While there are still things I’d fix if I had more time—like smoothing out certain interactions or making Figma specs crystal clear for devs—I’m excited to take those lessons and improve even more on my next project.