The HT6 design team is split into 2 subteams: UX and Visual Design. We met as a whole to discuss overarching themes, but the UX team focuses on competitive analyses, wireframing, and user testing, while the visual team makes creates illustrations and assets for marketing material.

The various stages of the hackathon each require a different platform, which we work on iteratively throughout the year.

From January to February, I worked on creating the HT6 landing page for all aspiring hackers, sponsors, and mentors looking to learn more about the event. The focus is on providing information and generating interest.

Prior to wireframing, we decided on goals and metrics to measure traffic on the site and the call-to-actions we wanted to emphasize.

I interviewed a handful of students to better understand their goals and needs when visiting a hackathon website. I diversified my participant pool by varying years of study, and hackathon experience. After 7  interviews, I identified 2 types of users: the beginner and the experienced hacker.

Consolidating the insights from each type of hacker, these are their general goals when visiting a hackathon website:

I translated the findings into blocks of content for the website. For example, the main reason beginner hackers decide not to apply is because they find it intimidating and they often consult the FAQ section for information. With this in mind, I made a note to include phrases like "beginner-friendly" in the FAQ section.

Each designer made wireframes based on the personas, metrics and goals. I alternated between beginner and experienced conten blocks to keep all users engaged since one of the metrics is time spent on the page and abandonment rate.

We reviewed each other's wireframes with both positive feedback and notes for improvement, before consolidating one final wireframe (far right).

The visual design team and operations team fleshed out that final wireframe with content such as illustrations and testimonials.

Over zoom, the user shared their screen while I asked for initial impressions, and to think out loud while navigating the site. I noted that experienced hackers skipped over information like "past workshops" in favour for the prizes, while the opposite was true for the beginner hackers.

With that in mind, I prioritized beginner-friendly content in the workshops and FAQ sections.

Other insights I gathered addressed that the website was really long to scroll through, what users ignored, and what users were looking for, but had trouble finding.

We made additional design choices and changed some layouts to better achieve our metrics.

Building on the brand guidelines, I wanted to explore atomic design further and created the UI system with a focus on input feedback and scalability for future projects.

Our final design was handed off to developers at the end of February. We went for a cozy, summer vibe to reflect the August hackathon time, and a feeling of collaboration and connection within our community!

With my experience as a front-end developer and having experienced the nuances of coding from Figma files, I took leadership of creating the hand-off document for the developer team to avoid clicking on nested items multiple times just to confirm that it is indeed a <h1> tag (but blue).

This was my first project where I got the time to test assumptions on users and gather feedback on my designs. Finding users and guiding an interview gave me more insight on how to collect data and communicate with users remotely. Working on a long term project with a team of designers is a great experience and I loved our team dynamic of bouncing off ideas and comments while working.

Since I come from a computing background, I find myself considering technical feasibility of implementation while I design, which sometimes limits creativity. The developer team I worked with on this project are very accomplished and accommodating, so I got to dive deeper into micro-interactions while prototyping.

Overall, this first step at Hack The 6ix was my first non-weekend design sprint project, where I got to properly conduct competitive analyses, test assumptions and work with an amazing team of fellow designers and developers. We are now currently working on hacker application flows and hacker dashboard for the actual event!