Hack Junction
Design website, platform and marketing ads for Hack Junction – Europe's largest hackathon
Role
Multi-disciplinary Designer (Sitemap, Wireframes, Art direction, Graphic design, UI design)
Sector
Fair services, exhibition services
Team
2 Designers, 2 Developers, Project Manager
Overview
Hack Junction is Europe’s biggest hackathon, bringing together thousands of developers, designers, and entrepreneurs. My role covered web design, digital marketing, and platform development to support both physical and online event formats.
Website design: Delivering information architecture, wireframes, prototypes, and web interfaces for the event.
Marketing campaigns: Creating marketing assets to attract hackers, partners, and volunteers.
Junction platform: Designing an online platform to run remote hackathons, solving participation barriers like distance and visas.
The Problem
The event website wasn’t meeting changing user needs before/during/after hack days.
Marketing needed to attract a bigger and more diverse audience.
Participation was limited by geography and visas.
The solution
A redesigned event website with adaptive information architecture.
Marketing ads/campaigns to drive participants, volunteers, and partners.
An online platform for organizing remote hackathons enabling participation from anywhere in the world.
Results
2.5x increased traffic
1.5× more participants
2x number of partners
A remote-first hackathon platform to expand global access allowing the event to expand globally and attract more participants and business partners.
Research
Identify User Groups
The first step is to understand the needs of Hack Junction’s diverse stakeholders, I identified three main user groups:
User group | Hackers | Partners | Volunteers |
|---|---|---|---|
Bio | Hackers group is represented by University student or young professional (20–30), who are skilled in product development or design. | Partners are companies and organisations sponsoring the event and giving hack challenges and mentorship. | Volunteers contribute to the event organizing. They are students, alumnies, or community members willing to help during the event (18–26). |
Motivation | They are motivated to learn, tackling challenges, gaining experience, winning the prize, and networking. | They value strong brand marketing and visibility during the event. | They value community and a sense of belonging. |
Goals |
|
|
|
Paint Points |
|
|
|
Needs | Timely information about the hackathon, support for their questions and logistic concerns. | Simple entry points for their challenges. | Feel part of the Junction community and gain experience |
Define
Since the user groups' needs depend heavily on timely, up-to-date information, we have defined the project phases based on the hackathon timeline. This includes preparation before the main hack day, live information during the main day, and follow-up afterward. It is especially important that the information provided during the main hackathon day is accurate, timely, and centralized in one place.
Project goals
We have outlined the main project goal: Build a robust base structure that allows for changes in visual design of Hack Junction's yearly theme.
The deliverables include:
A responsive and lightweight marketing website for Junction 2019.
A hackathon platform that functions on all devices.
Marketing materials available in both print-on-demand and digital formats.
Project timeline
Before the hackathon: potential hackers and partners needed inspiration and practical onboarding information.
During/after the hackathon: hackers’ priorities shifted to finding challenges, real-time updates, and essential logistics.
Audience segments
Hackers: students, young professionals, international participants
Partners: tech companies, namely Facebook, Supercell, Intel, Kone, ... to name a few
Volunteers: students, alumnies
Constraints
A significant barrier was remote participation due to geographical distance, organizational logistics, and visa issues.
We were under time constraint, as we only have three months before the main event to design, test, develop, iterate on the platform and website, and market the event.
Design
The design process included three interconnected deliverables:
Junction 2019 Website Design: I created wireframes and prototypes for testing, and delivered UI design that reflected Junction’s 2019 brand identity.
Marketing campaigns: I designed branding assets, and visual direction that balanced Junction’s brand with partners' brands, aiming to create visibility and attract more participants.
Junction App hackathon platform: For the online hackathon platform, I received the design requirements from core team members. We aim to create the first version of the platform, where hackers can sign up for a hackathon event, see their profile achievements, and submit their challenges.
Junction 2019 Website Design
Site map, Phase 1: Before the hackathon
The site is static and provides essential information about Junction, namely: Junction story, hack challenges, Junction's contact information, and link to main Junction website.
Site map, Phase 2: During/after the hackathon
During and after the hackathon, the website provides crucial information for participants. Their main objectives are to select the hack challenge they wish to participate in and to learn about all the event details. We have created a Live Event page as a centralized resource for all participants to use on the day of the hackathon. This page is scheduled to go live during the event. Additionally, the information page is separate from the main homepage, as the volume of information increases as the event approaches.
Wireframes and prototypes
I began the design process by creating rough sketches on paper. Then, I collaborated with another designer to refine our initial ideas before creating wireframes and prototypes for initial usability testing.
Check it out Website Prototype
Below are some wireframes for demonstration.
Website: Junction 2019 / Home
Website: Junction 2019 / Junction Story
Wireframe/Junction Week | Wireframe/Story | Wireframe/Transportation |
|---|---|---|
 |  |  |
Visual Design
The design of the Junction website is consistent with the brand's overall look and the theme for Junction 2019. After conducting usability testing, I deliver the design to keep up with the project timeline. Note that the website content is added later as the event progresses, hence it does not show in the pictures here.
Website: Junction 2019 / Home
Website: Junction 2019 / Junction Story
Website: Junction 2019 / Live
Website: Junction 2019 / Transportation
Marketing Design
We worked with marketing team to deliver marketing materials according to the marketing calendar. The marketing campaign included social media marketing, in-person event marketing, and traditional marketing. This means that the materials needed to be prepared include banners, social media advertisements, print-on-demands swags, posters, digital displays, etc. We also advertised our partnering companies and their challenges, using their branding guidelines and adhere to requirements if applicable. Below are some examples of the materials designed.
 |  |
 |  |
 |  |
In addition to the main hackathon, Junction organized side events to promote itself. I was responsible for designing the visual identity and all promotional materials for the HelTech and Hack Talks conferences. These conferences feature a series of tech talks attended by professionals in the field. Below are two examples of the materials created to demonstrate these conferences' visual directions.
Hel Tech (Facebook event cover)
Hack Talks (Instagram post graphics)
 |  |
Junction App Platform Design
Next, we designed an online platform for organizing remote hackathons, enabling participation from anywhere in the world. This format removes barriers like distance and visa issues, allowing the event to expand globally and attract more participants and business partners.
Check it out Junction App Platform
Below are some main screens of the Junction App platform.
Junction App - Hacker Dashboard
Junction App - Main page
Junction App - Event page
Junction App - Project page
Junction App - Hack Project page
Develop
Month 1: Research and define
Mapped user groups, user goals for hackers, partners, volunteers, organisers
Defined information architecture for two phases (before vs during/after event) for the website
Established a visual direction consistent with Junction 2019’s brand
Created wireframes and prototypes for the main site structure
Ran lightweight usability testing on early sketches and wireframesx
Defined hackathon platform's must have features
Created wireframes for the hackathon platform
Month 2: Design and Marketing
Designed early marketing campaign visuals to recruit hackers, partners, and volunteers
Iterated on information architecture and wireframes with feedback from organisers and hackers
Iterated on wireframes of the website and the online platform
Delivered iterated wireframes design to develorers
Month 3: Implementation and Iteration
Implemented branding with the theme "Vintage tech" on the wireframes
Delivered hi-fi UI for the Junction website
Collaborated with developers to ensure design feasibility and smooth handoff
Aligned with organisers to prepare iterative content updates as the event drew closer
Launched hackathon platform, where hackers can participate in event and send in their projects.
Hackathon Day: Launch "Junction Live" page
Junction Live provides practical live information during the hackathon day
Supported event organisers with rapid updates during the hackathon
Post-Event
Analysed result: 1.5× more participants, 2× more partners, global expansion compared to the previous year.
Collected feedback from users for future iterations
Conclusion
Although the project required a heavy workload within a limited timespan, I was able to deliver the project goals and achieve excellent results. We got a 1.5x increase in the number of participants, a double in the number of partners, and a significant increase in web traffic and broadened business market while serving the main user groups. These results are thanks to a clear project scope and goals, and effective collaboration with the developer, marketing, and partnering team. This project helped me to learn about designing for adaptability, scalability, and balancing my work quality with time constraint.
