How we designed an online hackathon experience for 500+ remote attendees.
Jan. 2020 – Aug. 2020
Web (desktop)
Lead Designer
Sabrina Pan (Co-Lead), Joanne Vuong (Co-Lead), Anna Situ, Vivian Nguyen, Wendy Soung Chen
Research plan, persona, competitive analysis, user journey map, flows (task, user, wire), mock ups
In the midst of planning Hack The 6ix’s 2020 hackathon, the world was struck with the COVID-19 pandemic. Physical distancing regulations were enforced as social gatherings became a dangerous source for viral transmission. What did that mean for Hack The 6ix, a hackathon which relied on people coming together to socialize, learn, and collaborate? As an organization, we decided to pivot to creating a digital hackathon.
Themes: Generative research, service design, design advocacy
Themes: Secondary research, UX design, visual design
Hackathons are notoriously known as two-day competitions filled with collaboration, free food, games, networking, and sleepless nights. They would garner the attention of hackers who would travel from across the world just to attend. But now that we've gone digital, could we still retain the key characteristics which make hackathons so attractive? What does a digital hackathon offer? This section articulates our process in solving problem #1 through generative research and design advocacy.
Before we could answer problem #1, we needed to understand hackers' goals and motivations for attending hackathons in the first place.
*Derived from survey regarding hacker’s motivations for attending hackathons (n= 24)
Conducting generative research allowed the design team to develop a stronger understanding of how to create a homepage marketed towards prospective hackers. This process is further described in problem #2.
We also discovered areas contributing significantly to the hackathon experience which were outside of our team's scope at the time. These heavily depended on other teams. This created a challenge for the design team to create a seamless end-to-end experience for hackers.
General feedback from the organization indicated that the journey map was helpful in guiding their decision-making and building their knowledge of how the hackathon will run.
In previous years, the design team acted solely as a graphic design agency which primarily responded to graphic design requests from the marketing team and developer team. This meant we didn't have any autonomy in crafting the user experience nor was any other team thinking about it. It resulted in websites that existed solely for the sake of existing. This year, I wanted to change that.
For years, Hack The 6ix got away with simple landing pages with minimal information about the hackathon. It consisted primarily of a date, a schedule, frequently asked questions, and company sponsors. For the most part, it was sufficient. Given the growth of the hackathon scene, hackers typically already knew what to expect at these events. But we could do better. And this year, we needed to do better. Digital hackathons were not popular and people didn't know what to expect from them–not even our team.
Hack The 6ix's website from 2019. Design's only role was designing the hero image and developers designed the rest.
To begin, let's explore the existing digital hackathon space.
I created a competitive analysis template with key questions for the design team to answer as they evaluated websites. Areas we looked at included how they solved for mass remote communication and networking. We were able to discover areas where they excelled and were lacking and improve upon them.
Comparing websites of 10 unique digital hackathons using Google Sheets.
I tasked the design team with individually ideating and designing at least one user flow per person while referencing our persona and journey map. Then, we presented our user flows to each other and highlighted what stood out to us within each other's flows. We asked ourselves, which flows best achieved goals and solved problems outlined in our persona? Next, another designer and I synthesized the highlights of each user flow to create a unified user flow.
Creating a unified user flow using key contributions from each team member.
The key problem we were solving for was to reduce ambiguity about our digital hackathon. Our approach to this was to offer key information on that homepage that may answer a hackers key questions at the pre-application stage. But what was the best way to present this information?
We chose to showcase the key information in a staggered, vertical orientation so it would be clear and unobstructed. It took up more space, but it acted like a highlight reel letting users focus on one feature at a time. This also allowed us more control over hierarchy and thus the order of which users saw information.
This design condensed key information into a compact format, but also cut off important information if users did not scroll through the section. We also designed our homepage to be primarily vertical scroll, and forcing users to horizontal scroll upon certain sections could be confusing.
The hackathon website was the central hub for hackers to stay updated on information. We discovered that hackers seek different information at different stages of the hackathon experience, but the information on the website is typically static throughout the whole event. We explored the idea of designing an adaptive website that changes throughout these stages.
This option does not leverage the website as the central hub for resources and information. It relies on external platforms such as Discord, Facebook, and Instagram for hackers to receive news and updates. However, this option was the most feasible to accomplish time-wise for both design and development.
In discussion with the developer team, we came up with the idea of creating separate sub-domains to host the different components from the different hackathon stages. This would be easier to manage than changing and updating the design and information on the main page.
Our research showed us that most people joined hackathons to meet people and collaborate, but there was a mystery to how this would play out remotely. Team formation is one of the most important stages as it determines who hackers will spend their entire hackathon with.
This flow is the most feasible as it does not depend on design or developer teams, and it still works to get the job done. It uses a third-party communication platform (e.g. Discord) where hackers join a group chat (aka channel) and figure it out amongst themselves. We ended up choosing this method due to developer constraints.
In this flow, we leverage the website as a platform to organize team formation. This would allow team formation to be separated from conversational clutter. Hackers would be able to create listings either to recruit members or to request to join teams. We were in discussion with the developer team at this stage, and they were interested in exploring this idea as well; however, time constraints did not allow any further development of this idea.
To ensure consistency between designs, I created a mini design system for spacing, text hierarchy, button states, and hyperlink states. This also made it easier to communicate design states to developers. The design system is fairly simple as there were not many components used within our final designs.
The branding guide had already been established by the design team from previous years. We did not make any changes to branding in 2020.
We conducted six 10 minute user testing sessions with post-secondary students who have and who have not attended a hackathon before. To collect feedback, we provided users with tasks/prompts and guided questions while observing how they behaved on our website.
The purpose of our user tests were the following:
We found some small bugs as well as more notable issues with UI and logistics. We were able to make the smaller changes right away by communicating with the developer team. Larger issues with UI and logistics could not be implemented before the hackathon. However, learnings can be taken forward into designing Hack The 6ix 2021. We originally planned to test earlier in the process as well, but due to lack of resources, we were unable to do so until we pushed out our final product.
This year we attracted...
And we couldn't have done it without our entire team. 👏
Designing Hack The 6ix 2020 was one of my most challenging yet rewarding projects. I found most of my difficulties stemmed from leadership and design advocacy. This was my first time leading a team of designers through the end-to-end design process. It was also my first time trying to prove the need for UX on an organization level. It was difficult to balance the two amongst the need to solve our primary problem for our hackers, but a myriad of learnings came out of it.
This year, I brought the whole organization into the design process. Although I only planted a small seed, I am confident that our peers now understand the value the design team can bring beyond graphic design. I have received feedback from team members celebrating the value of our artifacts (e.g. journey map, competitive analysis). They were thoroughly impressed with the design team this year, and the dev team was happy they could focus on what they did best–coding.
My goal going into this role was to ensure that everyone had an equal opportunity to learn and voice their opinions. My team consisted mostly of junior designers who were either new to or unfamiliar with the design process. This made it all the more important to me that everyone felt equal and held the same level of ownership across the whole project. However, this resulted too many owners, which took up more time and resulted in the lack of a unified vision. Going forward, I realize good leadership means providing both a strong direction and a safe space for team members to grow and make an impact.