The Challenge

In order to produce the hackathon, our team needed a responsive and adaptable website to serve as a hub for hackers, company representatives, volunteers, and mentors. Not only did this website need to contain important information leading up to the event, but it also needed to support the capability of accommodating live updates during the event.

My Role

I took the lead in wireframing and prototyping the website using Figma. I worked as part of a small team of other designers and developers that helped me iterate through designs and make improvements. Among those people, Grace Fan designed the branding graphics for this year’s version of TAMUhack, and Jonathan Innis implemented the final design.

The Discovery

Our Users

Since the website was going to be frequently accessed by hackers, company representatives, volunteers, mentors, and potential sponsors and partners, it needed to provide specific information and functionality based on the wide variety of users while also maintaining simplicity. Our team decided we wanted to highlight as many features that are common between user personas as possible. That way, our website would have essential content while keeping usability high.

In order to figure out what the essential content for a particular user is, we developed a two personas using demographic statistics and hacker/company feedback from previous iterations of TAMUhack.

Jeffrey

Computer Engineering student in Austin

First-time hackathon attendee

"I'm excited to participate in my first hackathon, but I'm unsure of what to expect."

Needs:

• Jeffrey needs to know what he can do ahead of time to prepare for the event.

• When he arrives to College Station, Jeffrey needs information on how to check-in and where to park near the venue.

Frustrations:

• Jeffrey is nervous that he won’t be able to find people to form a team when he gets there.

• Jeffrey has a lot of questions about hackathons, and his hackathon-veteran friend won’t respond to his texts.

Ingrid

Software engineer at AmericanAirlines

Attending TAMUhack with colleagues to represent company

"I am looking forward to meeting a ton of smart students and to seeing what they create!"

Needs:

• Ingrid anticipates leading a successful programming workshop during the hackathon.

• Ingrid is looking forward to meeting potential summer interns for her company.

Frustrations:

• Ingrid doesn’t know the size of the room her workshop will take place, and she can’t plan logistics until she knows.

• Ingrid is unsure of how to contact hackers about internship interviews during the event.

The Process

After knowing what our goals were, we set out to design, develop, and launch the pre-event website as soon as possible to ensure that users had access to essential content prior to the event. With this year’s branding graphics already created, my goal was to maintain consistency throughout all of our designs and platforms.

_{Landing page / About}

_{FAQ / Sponsors}

With the live version of the website, we accommodated for the change in our users’ goals by moving more important sections to the top of the website. During the event, hackers are less interested in reading about the history of TAMUhack and more likely to seek resources and assistance on their project.

_{Landing page / Event info}

_{Schedule / resources}

_{Prizes / Compact FAQ}

The Outcome

Great, not perfect. Always room for improvement.

The accommodating and flexible design of the TAMUhack 2020 website allowed for over 800 hackers, 23 companies, and volunteers and mentors, to have a positive experience during the event!