Every year, Freetail Hackers puts on the biggest hackathon at UT Austin called HackTX, and sohacktx.comas a website is meant to serve those who might sponsor, attend, promote, partner, and speak at the hackathon.

This is how my brain understood all the people and stakeholders I would work with. This was important because as I was leading a team, I was often a middle man between groups.

Finally understanding that this a website that all these people will constantly refer back to for all the information about the event, how do I make their experience on the website as smooth as possible, but keep it exciting every time they load into this page?

The vision is a website that is clean and professional, but fun, interactive, and on theme. The design before while was good, didn't fit this criteria. The design has to quote in quote WOW anyone who would view this website.

By going through examples of hackathon websites and other websites, the directors all came to an understanding of what the vision was. This also was good as I was able to see the kind of hierarchy, structure, and interaction that a good website should have. As well as understanding good design for desktop and mobile.

From there we solidified the theme, but I didn't feel as though there was enough imagery on the mood board, so I asked my friends who are more knowledgable about older Japanese gaming and arcade culture for what they think I should look to for inspo. This was important as I am not someone who grew up with this culture, I wanted to make sure that the people who did feel represented.

We started with brainstorming, sketching to get out all sorts of crazy ideas that related to our theme.

Moving onto digitizing our wireframes to see what our sketches would look like, we wire framed our basic and our crazy ideas. Digitizing the sketches gets everyone on the same page.

After spending time creating those wireframes, we came together and decided on what we should and could include in the final layout. What kinds of interacts did we want to have? How much is too much? What's feasible for tech team and for us within the time frame? How would this work on mobile?

In order to keep a fun creative theme still looking professional and clean is to use hierarchy. The HackTX 2023 website lacked this sort of hierarchy, making it look like the text was thought of last minute. This is why the website doesn't look as clean or professional.

As I took all the pieces from the puzzle of what we wanted to use for the final website, I made sure to keep tech informed of what we wanted to create. We had a meeting where I presented our interaction ideas to the tech team, and they let us know what was feasible, or how to tweak something for it to become more feasible.

During a previous Creative meeting, we decided on some fonts that we could use for the website and for all of the other HackTX designs. Taking those fonts, and based on the previous wireframes, I created a hierarchy for the text to follow. This ensures that the entire website is cohesive, no matter the screen size.

During the same meeting where we decided fonts, we also decided on colors. However, colors are a bit trickier to decide on, since they were not in context. On top of the layout and hierarchy I put together, Amrin and I had fun creating different color schemes, going as crazy as we wanted with color first.

As I was playing around with out color swatches, I wanted to emulate something similar to the logo I created for HackTX24—a glowing purple under white as if it were a neon sign. I ended up loving this motif, so when we moved onto the combination of both Amrin and I's color schemes, we kept that motif at the top of our color hierarchy.

Purple is used to designate important buttons or secondary headings. Pink is used to indicated links, text based buttons/actions, or important information that was Body size. White was used for all other texts, as it provided the most amount of contrast against the black background.

The arcade screen and the schedule are the only areas that break this type of hierarchy. For the arcade screen, the users needed to be more fully immersed into that world, so more colorful gradients are uses, along with all pixelated text. The schedule on the other hand uses color to visually differentiate the different types of events at a glance.

While solidifying the layouts, there are many spots left for more creative graphics. One of those is the logo and branding for the entire hackathon. The logo suite is inspired by Japanese neon signs seen in nightlife, and the letters are inspired by Katakana.

While he doesn't have a name yet, HackTX 24's mascot is a little character made up of different arcade pieces. And then because the theme was older arcade, I went ahead and pixelated him, putting him in the arcade screen for the website.

We went through so many ideas and iterations, in the end, we made sure that we could complete everything on time and prioritized what was feasible for tech to do.

The main developer taking lead on this project was Khang Tran. Khang is a very talented front-end developer, and with his expertise, we were able to put this website together. Also shout out to the rest of tech team and the new recruits because the website would not be what it is now without them.

As school started up again, I let Amrin off this project to let her focus on what she needed to focus on, and the tech team and I could discuss and give each other feedback as it was necessary.

Khang and I would constantly give each other feedback on updated information and designs, changes to the website, and communicate how things were going on both ends—before and after the launch of the website. We would frequently have calls about the website in order to ensure that we were both on the same page, as well as the rest of our teams.

Khang and his team also came to me with new ideas, such as: moving the eyes of the little arcade character, creating a sense of space with the stars with a paralax effect as well, and more! Some I felt were appropriate, others not so much, but it was a really welcoming environment for feedback between us, and even with the director team was well!

As this project wraps up, I'm really proud of my team and I dreaming and thinking big first, and then scaling things back. This is something I will definitely do in the rest of career because I believe it created a better product in the end, especially when compared to the first iteration where there were no big ideas for the fear of being rejected. I have learned that rejection is okay, but more than that to communicate with the tech team and the other stakeholders involved to design something that is both feasible and desired.

There are definitely parts that I want to improve for this website, but due to a lack of time and burnout from both the creative team and the tech team, here are some regrets.

I wish for the scroll interaction to have a larger buffer, so it's easier to land onto the arcade machine's screen. Right now, it's quite hard to land on it, unless you're aware of the exact amount you need to scroll. It makes for a bit of an awkward expereience.

A simple change is the hover interactions for links and buttons, or lack of them. Buttons and links are typically indicated with a hover feature. However many of them on the website do not show up, whereas they do in the Figma prototype. This was likely due to an oversight by the tech team and a lack of time for them to complete the project.

I want to learn how to make it easier for front-end developers to read my Figma files and understand what the full design is. How do I make their lives easier, and how do I communicate exactly what I want? I currently have interaction notes alongside the components based on where they first occur on the website. Is this the best way?

The mobile experience is also not as smooth as I would've liked, but I understand that the tech team has other responsibilities and that the mobile version is they're last priority.

With the two designs shown earlier, a whole suite of designs were created based on the mascot, logos, and other inspiration from older Japanese Arcades.