Problem

We wanted to create the basic building blocks for a robust website, and much more than that, a platform to serve the next years’ websites. From last years, we have learnt that content editing is a task that is happening on a daily basis, and the web team that is responsible for building and maintaining the website should not have to do it.

Our main focus should be how we structure the content, leaving the edits of content to the marketing and partnerships teams.

On the other hand, being Europe’s largest hackathon, Junction should proudly showcase that we do not only organise a hackathon because we wanted to be cool, but because we really believed in it, we were capable of building, we were able to learn about building something big and robust, within our teams.

Audience

There were 2 major personas for Junction. As a hackathon we primarily catered to people who want to build and create projects. They come from a vast variety of backgrounds, mainly engineering, design and business development. We could not do that however, without the help of our sponsors. As a non profit organisation, we do not have funding other than what we get from our sponsors every year to run the event. The sponsors get to influence the hackathon, with their sponsorships -of course, but also by creating the actual content of the hackathon. Creating the challenges, and providing technologies, APIs, prizes and all kinds of incentives.

Our website had to have sufficient information for both of those personas. For hackers, to convince them that this hackathon is attractive, lucrative and fun to attend to. For sponsors, to convince them to give us money & technology, and convince them that they will get ROI (learnings, candidates for recruitment, visibility).

Process
Workshop with key stakeholders
In order to understand the needs of the teams and their customers we had to conduct a co-creation workshop with partnership & participant teams. In that session we were sharing knowledge on what the different stakeholders expect and need, be it, participants, partner companies and the teams themselves.

Create personas
We created personas that would serve a general view of each of those segments to keep in mind when building the website IA, content, & UI.

Journey mapping
The next step was to conduct a journey map to understand how all these stakeholders fit in, how are their experiences differ and where we can find similar patterns to understand where do we need to focus when prioritising content.

Information architecture
Through the Journey Mapping results we infused our site structure, and gained understanding how we would structure content to service our customers.

Prototyping
We created some rough prototypes that we engaged with our teams to gather feedback, iterate and move onto designing the concept of how the website would look like.

High fidelity mockups
I designed a high fidelity mockup of the website to be, to create a visual future desired state that would help in starting to build the website with code. This coup contained redlining, and information on CSS values such as colours, spacing, etc. The mockup was accessible through InVision & Zeplin

Setting up environment
One of the most challenging parts of the project (apart from conniving everyone that this is the right way to go) was to setup the environment. We did a research on the technologies we wanted to use and how they would connect and communicate with each other. However in reality when you get to do the practice you realise always how that differs from reality.

Result
‍
In the end we shipped a website that had a robust structure and it was still easy to use by the teams who needed to work with the content. The website was then easily deployable, as Junction had requests to be hosted elsewhere as well. Therefore the website as a GitHub project became the core package for that effort. When Junction was agreed to happen in Hanoi for example, the teams there would not have to create a new website from scratch but they would deploy this website on their server, tweak it and they went live! Most importantly this was made as an open source project so that the broader community could benefit from.

It was a fun - and frustrating at times - exercise that taught us a lot about collaboration, teamwork and integrations & technologies.
‍
Key findings
- Start by researching
- Understand your stakeholders & build for them
- Include as many different people in the process as possible
- Integrating different technologies can be difficult especially with a volunteers’ team
-  When possible challenge yourself with doing things you are not comfortable with because that’s when you learn the most


‍