Hackathon website template
A guide to designing your hackathon website, with expert tips.
Published on 29th of March 2024. 6.5 min read.
How to design a hackathon website
A great hackathon website must contain a graphic appealing hackathon banner, a catchy hackathon name and tagline, a register now button, an about section explaining the hackathon goal, “who can participate” details, a timeline, hackathon challenges, prizes, mentors and jury members, sponsors, and hackathon rules sections.
In this article, we explore each section a well-structured hackathon website should always have, examining a real hackathon website example.
We will also include expert tips along the way.
1. Introduction
50 milliseconds. This is all the time a user needs to generate a first impression of a website.
You can now understand why a hackathon website, which is your event’s poster, is so important for the success of your event.
The key factors for a great hackathon website lie in UX and Graphic Design.
These 2 crucial elements will make the difference between people registering and people immediately abandoning the website, leaving the “Engaged sessions” Google Analytics metrics empty.
Other factors contributing to a higher conversion rate are appealing prizes, clarity of the content, relevance of the hackathon challenges, and limitations as per terms & conditions.
In this article, we will bring a real case study to the table, x-raying a hackathon website we produced for an AstraZeneca’s event: the HackHERHealth Femtech Innovation Hackathon.
Let’s start with how to build your hackathon poster.
2. Graphic appealing hackathon poster
This is the first thing the website visitors see: you have just 0.05 seconds to make a good impression.
It must contain:
Hackathon logo
Hackathon name
Tagline
Event date
Register button
Cracking this challenge requires visual wizards.
It’s recommended to hire designers who can transform abstract ideas into designs that not only grab attention but also build a strong brand identity for our hackathon and leave a lasting impression on participants.
The hackathon banner (or hackathon poster) must be produced in coordination with the marketing team of your client since it needs to take into account brand guidelines, colour palettes, and the marketing department directives.
In this specific case, it was produced directly by AstraZeneca.
3. Catchy hackathon name and tagline
About the hackathon name:
Keep it short and easy to pronounce. Aim for a maximum of 3 words that resonate.
Consider acronyms. For example, naming your event “Fuel Unconventional Concepts & Knowledge” could be a bad idea 😅, while HackHERHealth can be easily remembered as the “HHH”.
Include relevant keywords. In our case “Health” and “Her” were the most compelling ones, easily communicating the event’s topic.
Check if someone else already used that name and how difficult would it be to find the right domain on the domain registrar services like GoDaddy or Google Domains.
About the tagline:
Highlight what participants will contribute to solve
Use expressions to encourage participation (e.g., "Help. Build. Break. Create.").
Make it memorable: the tagline should stick in people's minds.
Think in the long term here: your hackathon could be the first of a long series and you don’t want to change the name in the future.
Involve other people, colleagues, and friends, asking their opinion
Make sure you’re sure!
4. Register now button and countdown
This is the main call to action button of the whole website.
You need it to be visible and accessible as much as possible, and we highly recommend having it at the centre of your hackathon poster.
Ideally, you should create an announcement bar in the header and add it there too:
Consider adding a countdown section as well!
It makes it easier for people to understand when they should do it and adds a positive sense of urgency that could result in boosting registrations:
Use colours that contrast with the background and stand out on the page. Consider the hackathon website's overall design for a cohesive look.
Make the button large enough to be easily clickable, especially on mobile devices.
5. About
You want to keep it simple here, like a 3-step process: what, why, how.
The About section must explain clearly and quickly what the hackathon is about, why it’s being organised, and how it plans to solve a problem.
Keep each text below 45 words.
6. Who can participate
This section is very important.
This is where we state who we’re looking for and would be perfect to participate in the hackathon.
Make sure you include:
Target audience and industries
Teams’ composition and maximum number of members
Desired skill sets and backgrounds
Age requirements
Restrictions
You need to find the perfect balance between clearly communicating who you’re looking for and, at the same time, avoiding hyper-targeting.
Consider keeping this description as broad as possible in case you don’t have much budget for an outreach campaign.
Remember: no participants, no party!
7. Timeline
Present the timeline in a clear and easy-to-understand format.
Use visuals like tables or timelines to make it easily digestible.
Include all relevant times with clear time zones.
Using an asterisk to announce that *Times can be subject to changes is a good idea.
Hackathons are complex events where mishaps can happen frequently and it’s not a crime to change the date or time of a hackathon live session or webinar.
8. Challenges
As suggested for the About section, we recommend keeping things simple and short also for the hackathon challenges description.
More details can be provided later in a dedicated Hack Guide distributed to the participant or directly in a “read more” button that redirects people to a dedicated page containing specific information about a challenge, like this one.
Graphic elements play a good part here.
They must be explanatory, relevant, and coordinated with the content.
Great web and UX designers can help you with this.
9. Prizes
A great hackathon website section regarding the prize pool should be informative, engaging, and motivate potential participants.
It should include:
Total Prize Pool: clearly state the total amount of money or value of prizes available.
Breakdown by category (if applicable): if there are different categories (e.g., first place, runner-up, best design, etc.), mention the prize amount or value for each.
Keep it concise and easy to understand.
People shouldn't have to spend a lot of time deciphering the prize structure.
Use visuals strategically: Images of the prizes or icons can make the section more engaging.
Proofread carefully: Typos or inconsistencies can make the section appear unprofessional.
10. Mentors and Jury Members
A great hackathon website section regarding mentors should be designed to inspire confidence and showcase the value they bring to participants.
This section should highlight the mentors’ expertise and impact, showcasing individual mentor profiles with headshots, names, titles, and a short bio highlighting their relevant experience and expertise.
It’s also smart to briefly mention the areas each mentor specialises in (e.g., mobile development, design thinking, product marketing), for the participants to better understand the mentor's field and therefore how they could support them.
Make sure you have the mentor’s approval before having their photo on the website!
Copying it from LinkedIn is not always the answer.
11. Sponsors and partners
A great hackathon website section regarding sponsors and partners should highlight prominent logos, ensuring each logo clicks through to the sponsor's or partner's website for easy exploration.
If needed, this section can be divided into different categories such as:
Funded by
Hosted by
Powered by
Supported by
Keep it organised: don't overwhelm visitors with a cluttered logo list.
Ensure the section displays well on all devices, especially smartphones and tablets.
12. Rules
This section is absolutely necessary: every respectable hackathon event has one.
A great Terms & Conditions (T&Cs) section should prioritise clarity, accessibility, and transparency.
You can make it user-friendly by avoiding overly legalistic jargon and complex sentence structures and using plain language that participants can easily understand.
We suggest breaking down the T&Cs into sections with clear headings and subheadings for easy navigation and using bullet points to present key points in a concise and scannable format.
The content of this section must be written by experts.
As simple as that.
13. Technicalities
Your hackathon website must also be consistent when it gets technical.
GA4 should be installed correctly, better if done through Google Tag Manager to avoid overloading the header and footers with unnecessary code injections.
A cookie banner must also be present, ensuring compliance with GDPR and CCPA.
At last, insert links to the hackathon social media accounts, for people to easily find how to follow the latest updates of your event.
Inserting a Chatbot can be a good idea, especially in the AI era we’re currently living in.
It can make easier for participants to find the information you’re looking for and, at the same time, will make your event look cooler.
14. Conclusion
Building a hackathon website is not easy and requires balancing and coordinating multiple actors and skill sets.
It needs to cater to a diverse audience (participants, mentors, partners): ensuring the website is informative and engaging for all these groups can be challenging.
Hackathon websites have many pages with different types of information: organising and structuring this content effectively can be time-consuming, especially if you don't have experience with website architecture.
Change requests to update the website content are frequent and depend on the availability of information.
For example, not all the mentors can be available at the beginning of the project.
In conclusion, handling this type of project requires skills and expertise.
Get in touch if you would like us to help you with your next hackathon website.
