Hack The 6ix

How we designed an online hackathon experience for 500+ remote attendees.

TIMELINE

Jan. 2020 – Aug. 2020

PLATFORM

Web (desktop)

MY ROLE

Lead Designer

TEAM

Sabrina Pan (Co-Lead), Joanne Vuong (Co-Lead), Anna Situ, Vivian Nguyen, Wendy Soung Chen

ARTIFACTS

Research plan, persona, competitive analysis, user journey map, flows (task, user, wire), mock ups

Introduction

Shifting gears to deliver a remote experience.

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. 

Key problems

PROBLEM #1

HT6 faces uncertainty replicating the essence of a hackathon, remotely

Themes: Generative research, service design, design advocacy

PROBLEM #2

Hackers face ambiguity about what digital hackathons are and how they work

Themes: Secondary research, UX design, visual design

Scope

Goals 🎯

  • Reorganize and advocate for design team to shift tasks towards UX and strategy
  • Build transparency towards what a digital hackathon entails in order to increase hacker applications
  • Launch a website to market to prospective hackers

    Constraints 🚫

    • Lack of UX design presence and autonomy across the organization (design team was primarily graphic design focussed when I joined the team)
    • Lack of alignment on a service design blueprint throughout cross functional teams

    Solution Overview

    1. Through design advocacy, we engaged the entire organization to create a cohesive experience and a digital space that fosters collaboration and socialization.

    2. Increased transparency into our digital hackathon by leveraging visual design and staggering key information throughout the homepage.

    PROBLEM #1: UNCERTAINTY REPLICATING THE ESSENCE OF A HACKATHON REMOTELY

    How might we help post-secondary students optimize their hackathon experience in a digital space during a pandemic?

    Exploring the problem

    Digital hackathon...what?

    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.

    RESEARCH QUESTION

    Why do hackers participate in in-person or digital hackathons?

    RESEARCH METHODS
    • Created research plan for design team
    • Conducted semi-structured interviews with hackers who have and haven't attended a digital hackathon (5 interviewees)
    • Surveyed hackers (25 respondents)
    PURPOSE
    • Understand what hackers value when they choose between which hackathons to attend so we know how to better market to their interests

    Research synthesis

    Affinity mapping findings from semi-structured interviews

    Key research findings

    "I’m less likely to join a hackathon if I don’t have a team. Do you know it is hard to work remotely & with people you don’t know?"

    Goals and motivators

    *Derived from survey regarding hacker’s motivations for attending hackathons (n= 24)

    Jobs-to-be-Done

    • Acquiring knowledge and skill sets that can enhance their career, but struggles to stay productive at home due to distractions from family activities and lack of peer support
    • Furthering their career through opportunities in networking or collaboration, but lacks a space to meet new people due to restrictions caused by the COVID-19 pandemic
    • Finding a community to feel a sense of belonging but lack real-life options to do so due to social distancing requirements
    • Establishing a bond with their teammates during the hackathon but lack meaningful ways to connect with each other in a digital environment

      Pain points

      • Expected the fundamental elements of an in-person hackathon to be in a digital hackathon but are unsure about what digital hackathons have to offer
      • Disincentivized to participate in hackathons due to barrier of application process
      • Disorganized due to the use of too many communication tools during hackathons, making the collaboration process very inefficient
        SOLUTION TO PROBLEM #1

        How might we help post-secondary students optimize their hackathon experience in a digital space during a pandemic?

        Through design advocacy, we engaged the entire organization to create a cohesive experience and a digital space that fosters collaboration and socialization.

        Research learnings & challenges

        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.

        PROBLEM #2: AMBIGUITY ABOUT WHAT DIGITAL HACKATHONS ARE AND HOW THEY WORK

        How might we reduce ambiguity about our digital hackathon to encourage students to apply as hackers?

        History of design team & Hack The 6ix websites

        Websites were vague...and primarily designed by the developer team.

        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.

        RESEARCH QUESTION

        How did other digital hackathons organize their website?

        RESEARCH METHODS
        • Competitive analysis (compared 10 hackathons)
        PURPOSE
        • Discover strengths and weaknesses from other digital hackathons
        • Apply opportunities to improve to Hack The 6ix

        Competitive analysis

        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.

        Some key research findings

        • Emphasizing how to connect with the community could reduce ambiguity towards team formation and collaborative remote work
        • Designing for multiple timezones may be important as the hackathon is now open to applicants beyond the local city, Toronto
        • Showing past event photos and statistics can build credibility for the hackathon for new hackers who have not hacked with us before

        Creating user flows

        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.

        Some design explorations

        Exploration: Presenting Key Information

        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?

        ✅ Design Decision: Staggered Key Information, Vertical Scroll

        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.

        🚫 Design Alternative: Compacted Key Information, Horizontal Scroll

        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.

        Exploration: Adaptive Site vs Static Site

        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.

        ✅ Design Decision: Static Site

        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.

        🚫 Design Alternative: Adaptive Site

        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.

        Exploration: Team Formation

        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.

        ✅ Design Decision: Organic Team Search

        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.

        🚫 Design Alternative: Team Listings

        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.

        Design system

        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.

        SOLUTION TO PROBLEM #2

        How might we reduce ambiguity about our digital hackathon to encourage students to apply as hackers?

        We increased transparency into our digital hackathon by leveraging visual design and staggering key information throughout the homepage.

        Next steps

        Learning from our user testing sessions

        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:

        • To evaluate the ease of finding key information on the website
        • To understand how information hierarchy is perceived by users
        • To describe how users feel about the overall experience
        • To evaluate if our goals for the website are met 

        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.

        Impact

        Our first year going digital was our biggest event ever 🎉

        This year we attracted...

        And we couldn't have done it without our entire team. 👏

        Learnings

        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.

        1. Design advocacy makes a difference

        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.

        2. Too many owners isn't always a good thing

        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.