Picture of the graphic
Designing the HackTX 2024 website

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?

divider line
role:
timeline:
team:
skills:
tools:
Lead UI/UX Designer
20 WEEKS, 2024
Designers: Amrin Harque, Naomi Lin, Harean Park | Tech: Khang Tran & Luis Pabon
Communication, Research, Stakeholder Mapping, Responsive Design, Wire framing, Prototyping
Figma and Miro
divider line
quick read!
divider line
have time? read more!

about

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.


About section on HackTX 24

The Stakeholders: Power & Interest

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.


Stakeholder Power Interest Matrix

A stakeholder power-interest matrix to demonstrate how communication channels worked and shows who this website design is for.


the design process

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.


Github Universe '24 - Landing
TAMUHack X - Landing

About Page

HackTheNorth - About
Github Universe'24 - Statistics

Footers

HackTheNorth - Footer
Notion - Footer

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.


Key Images from our Research

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

Allie's wireframe sketches

Allie's wireframe sketches

Allie's wireframe sketches


Key Images from our Research

Lo-fi wireframes with mobile versions

Mid-fi wireframes

Lo-fi wireframes with mobile versions

Text styles hierarchy in Figma

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.


About section on HackTX 24

Picture of the logo
Mail iconLinkedIn iconGithub iconResume icon
Designed & Built by Allie Zhang
Ⓒ 2024 Allie Zhang