Cruzhacks is a student-run annual hackathon event aimed to support diversity within tech and promote visions for societal change.
Known for supporting innovation and change across the tech community, CruzHacks is one of the largest hackathons in the bay area. We bring together over 800 attendees of 15+ nationalities and 100+ total projects every year. Our goal as an organization is to provide the most optimal setting for technological solutions regarding societal issues to flourish, and to establish a network of community members that utilize technology for a more creative and connected world.
Official 2018 Website, Santa Cruz Tech Beat, Santa Cruz Sentinel
Role and Metrics
As the sole designer for CruzHacks, I helped the team plan, prep, and personally:
- Built a fully responsive landing page from scratch targeting both sponsors and prospective attendees.
- Increased the number of company sponsors from last year's hackathon
- Increased application turnout by 60% within the first two weeks of applications opening
- Handled the remaining design efforts (animated graphics, internal design tools, promotional banners, and videography)
- Experimented with a web application to resolve recurring pain points of previous hackathons.
Before jumping into wireframes and content creation, I wanted to declare a few goals for the hackathon based off past years to guide the design of the website and brand attributes. Declaring an overarching strategy from square one helped guide my designs beyond aesthetics.
I decided to interview past organizers for their insights about common pain points of the event, and past attendees to note which aspects of our hackathon stood out. Some questions I wanted to explore and answer in this stage of the process were:
- Who is CruzHack's target hacker audience?
- Which metrics could be observed to measure success?
- Did past attendees have any suggestions for areas of improvement?
- In regards to competitor hackathons, how should CruzHacks be inspired/different than them?
After interviewing around 20 attendees from CruzHacks 2017 of varying skill level (first-time hacker, seasoned hacker, etc.), I found common trends between first-time hackers noting that they were very intimidated by the event. Because hackathons are usually presented as an engineering competition, first-time hackers felt discouraged to participate and didn't realize other aspects of the event, namely educational workshops and mentorship beforehand. Additionally, a majority of the participants noted that it took too long to receive mentorship, and weren't able to find the help they needed.
When consulting with previous organizers, there was a mutual agreement that the mentor process in past years was typically rushed and disorganized. Mentors had trouble finding hackers in need, and didn't appropriately assist requests chronologically. In total, the mentorship process seemed to be a main source of hacker frustration in previous years.
Finally, whilst a hackathon is truly designed for its hackers, there is no event without sponsors. Sponsors also allow the hackathon to be free for hackers, and make logistics of the event affordable and frictionless for all parties. Beyond this, hackers also gauge their interest of hackathons based off the amount of notable tech sponsors and their status. I wanted to gain an understanding of what sponsors value most, the different types of sponsors, and their primary needs.
After referencing Major League Hacking's Organizer Guide and interviewing the experiences with sponsorship of past organizers, I found there were three general persona types that past sponsors or partners of CruzHacks fell into:
- Financial sponsors: companies looking to give cash for some personal gain. This divides further into:
- Tech companies (industry & startups) Needs include:
- Get immediate feedback for their development products, primarily APIs
- Recruit interns or full-time employees (Being hacker-friendly gets developers excited about company, students passionate enough to be at a hackathon are great candidates)
- Raise awareness of company or brand
- VCs (and companies in their portfolio) Additional needs:
- Measure pulse of developer community (Adoption of technologies, popular development stacks)
- Uncover great technical teams to turn towards entrepreneurship
- Strategic Partners: sponsors that assist in promoting and marketing the event; typically local news publications, school newsletters, and county tech beats.
- In-kind: Sponsors that donate in forms other than money, usually in hardware, t-shirts, printing services, or food.
I found strategic partners' and in-kind sponsors' support mostly came naturally in past years. The former organizing team noticed there isn't much effort required in gaining media entities due to the hackathon's annual history. For sponsorship each year, the main focus is gaining reputable financial sponsors.
After uncovering typical needs of financial sponsors, I dove into concerns that surface from each need by financial sponsors as addressed above:
- Get immediate feedback for their development products, primarily APIs
- Concern: Are attendees of an adequate skill level to fit the company in terms of their typical recruiting process?
- Recruit interns or full-time employees
- Concern: Is reaching hacker experience and connections for sponsors easily accessible?
- Raise awareness of company or brand
- Concern: Is attendee turn-out high? Is the hacker value worthwhile?
- Measure pulse of developer community
- Concern: Are there competing brands sponsoring? Will competing products be used during the event?
After becoming mindful of goals to strive for when designing the event and its assets, I also wanted to solidify and emphasize the main purpose of our hackathon as I continued forward. Both to set our hackathon apart from others, and to promote values that our team personally saw as underrepresented in the greater tech narrative:
CruzHacks brings together a diverse and inclusive group of students to develop innovative solutions and solve real world challenges; we take pride in organizing our event to expand future diversity within the tech industry by prioritizing opportunities for underrepresented communities, and encourage such attendees to chart new paths for their stories within tech.
Before diving into visual design mocks, I started with a logomark. I wanted to design a logo that not only reflected the innovative nature of a hackathon, but was personalized to our underlying values. I explored various symbols conveying our goals, but frequently arrived at one particular object—a light bulb.
Light bulbs typically symbolize creativity and innovation, being an everlasting practical invention, but the more implicit action that the light bulb has (to shed light) overlaps perfectly with the event's goals. Light bulbs light up a dark or unexplored area and help provide visibility for a path to be taken; they provide a clear visual environment that allows individuals to move forward.
Colors were chosen to represent a welcoming and friendly environment, but still lively in nature. I explored different paths between the color of the light beam, but ultimately settled on a gradient for its ability to represent a shared unification and balance.
Keeping our main values in mind, I designed multiple branding assets developing our visual style and incorporating our new logo.
Content drives discoverability and engages users to learn and apply to the hackathon. To correctly follow out our brand attributes, I assembled a content guide in order to unite all writers and editors on the organizing team under a common language. In addition to solidifying our brand identity, a content style guide would make all content produced by our writers is usable and functional by ensuring clarity and purpose.
Following Mailchimp's Voice and Tone Guide, our editor-in-chief and I worked through their framework to declare a foundational style guide to our content. Because CruzHacks would be addressing hackers, sponsors, and judges through our website, social media, and emails, we assembled broad overarching principles that could be referenced and iterated upon as content was written.
Sitemap and Wireframing
For the landing page, I decided to go with a one-pager, and as the information needed could be simplified and condensed for users. I took an audit of the past year's sitemap, and added new sections with specific high-level goals in mind:
- Hero (location, date, and tagline)
- Describes event and its mission
- + Added Attendee calls to action
- + Added Noted pre-hack workshops with ranging difficulty
- + Added Noted industry giants who hold workshops and booths
- + Added Bio to give context of speaker's experience
- + Added Stories from past hackers
- + Added Sponsorship call to action below sponsors
With this new sitemap in mind, I sketched out the basic layout and flow of the landing page.
High-Fidelity and Iteration
When transitioning into hi-fi, the site was launched and iterated upon by user analytics before reaching its current state. After developing the high-fidelity mocks, I then implemented Hotjar to analyze user movement and patterns on the site. Hotjar proved to be useful as it created heatmaps showing high areas of movement, and recorded every user session seamlessly.
For Stories, I wanted to keep the content simple, and positioned each persona carefully to address three main user groups: experienced hackers, first-time hackers, and non-UCSC hackers.
For experienced hackers, I leveraged my interview with Sarah to revolve around her experiences with the hackathon landing her a job. Alex, whose first hackathon was CruzHacks, noted he learned practical skills that couldn't be found within the classroom. Brian, a CSUMB student, when interviewed found that participating at a different school broadened his outlook and expanded his network.
This section, although not originally in the sitemap, got added in a later iteration after multiple sponsors had concerns whether or not the hackathon was generally widely accepted. Most sponsors were primarily concerned with the number of attendees from past years, and wanted to ensure past hackathons were well-received.
I gathered past and current articles regarding public coverage of our event, assisted with more pictures and documentation from a reputable source. This section's primary focus is to appeal to sponsors, but prospective hackers might also enjoy reading and viewing prize winners from past years.
After collecting over 100 Hotjar screen recordings, I started to go through each recording to observe behaviors and recognize patterns. The single-most common pattern I observed was that about 40% of participants whose session ended on the apply button, would scroll to the end of the schedule, before having to scroll all the way up or jump around before clicking the apply at the top of the page. To remedy this, I inserted a second CTA that resides directly under the schedule, allowing prospective hackers to apply without having to scroll back to top.
After bringing in over 800 attendees for CruzHacks 2018, I've certainly become mindful of the importance of iteration and research before execution. Next year, as executive director for CruzHacks 2019, I plan to research and develop our internal platform for attendees and organizers. We performed small experimental tests with a prototype of the platform, including an internal tool for application submission review and an external one for reporting a problem and requesting mentorship.