Organizing a Virtual Hackathon for Web Developers
We held a competitive event to put our developers’ skills to the test - in both web architecture and collaboration. Find out how we challenged them and how clients will benefit.
Symetris recently held a virtual Hackathon,’ with two teams of developers competing. Our Innovation team arranged the competition. We sat down with Innovation Director Matthieu Gadrat to learn more about how he and Project Leader Elisabeth Lafrance approached the event. Plus, how it will benefit both employees and clients alike.
How would you describe a hackathon and what drove the decision to organize one?
A hackathon is a competition between developers to solve a problem in a time-constrained way. In this case, our teams had two days to submit their solution.
We decided to organize our first hackathon as a response to the COVID-19 pandemic lockdown. It seemed like an excellent way to replace the conference travel we usually use to help keep our developers updated and excited about the latest technologies. Most conferences have been replaced with virtual events, which are fine, but our developers still wanted to get their hands on the technologies and experiment with them. A hackathon was a good way to challenge them.
Describe the challenge given to the teams. What inspired you to select this challenge?
The teams were asked to produce a microsite that would allow visitors to locate historic photos of Montreal on a map and select prints for purchase.
A number of the virtual conferences that our developers attended had themes of headless architecture and the decoupled approach. This is a type of architecture where you have your content management system separate from your front-end application, enabling you to use a wider variety of front-end methods to display information. This was a new approach that our teams were interested in getting to know better.
I wanted data that would be inspiring to use as part of the challenge, so I looked through the open data catalogues from the federal government, the provincial government of Québec, and the city of Montreal. I found a set of photos about old Montreal that struck me as the perfect data for our hackathon teams.
Creating a frictionless ecommerce experience is an area where we aim to excel, especially in the current context, so I made sure to incorporate this into the challenge as well.
What was the biggest hurdle the teams faced, and how did they overcome it?
The biggest challenge was doing a hackathon entirely remote. The teams weren’t able to sit in the same room and brainstorm and tinker with ideas the way they usually would have.
One team stayed connected for the full two days in Google Meet. They weren’t talking the whole time, of course, but it helped recreate the atmosphere of being in the same room by remaining connected online.
How did you go about organizing the hackathon?
I’ve participated in several hackathons in the past, so I had a sense of what participants need to have on-hand to be empowered to work on the challenge and not get bogged down in details.
They need to know the timeframe, their subject, and the data set they have to work with. They also benefit from having some specified parameters, including things they don’t have to build. You don’t want to send teams on wild goose chases or have them waste time on things that aren’t central to the challenge.
You have to ensure that teams can add their own twist to what they produce, but make it hard enough to keep them excited and engaged in the challenge. This can be difficult since there are a variety of experience levels within each team, and you want there to be something to challenge everyone.
We assigned teams rather than have people form teams themselves, as a way to create teams that were diverse in expertise and approach and to make sure intermediate developers had the confidence to work with senior developers on the task.
And unlike other hackathons that are often done on weekends or on employees’ own time, we made sure to carve out time during the work week so that everyone could participate.
How did you ensure effective collaboration?
You have to strike a balance between providing structure and enough free rein to self-organize.
Symetris’ client projects have a well-honed process with defined roles and structure. For the hackathon teams, I wanted to recreate some of these roles, but not all. Each team needed to have a lead developer, a project leader, and a QA analyst, but the teams were asked to select the individuals to fill each role. I wanted them to explore in a more chaotic environment how they could self-organize.
One team opted to put an intermediate developer in the lead developer role, for example. While we wouldn’t take this risk on a client project, it was empowering for someone who’s not used to filling those shoes. She had to stretch beyond her experience to meet the expectations of her team. This approach worked out really well for them.
What were the rules and requirements for teams to complete?
Each team's historic photo site needed to offer visitors the ability to, among other things:
- Retrieve a photo from the Montreal archives, put into context in a map
- Preview the photo and add it to their shopping cart
- Access and edit their shopping cart
On top of these requirements, the teams had three additional “stretch goals”, where a visitor would be able to:
- Select different sizes of print with different prices
- Submit a historical photo, select its location and grant reproduction rights
We decided not to mandate any technologies because the data we provided pushed them toward the use of headless architecture that we wanted to focus on anyway.
They had two days to complete the challenge. They had a short window before the hackathon to prepare their work environments, but they didn’t have the data or functional requirements, so they couldn’t get a head start.
As a surprise, halfway through, we invited one of our partners, Atecna—who do UX development work—to do 30-minute Q&A sessions with each team to give some expert input and help them align their work to the goals. The teams really appreciated this, and they did an impressive job of incorporating Atecna’s feedback.
Can you tell me about the major highlights of the event? What would you improve?
It was great to build teams that included people who wouldn’t normally be working together. Everyone was impressed with the level of completion the teams managed in just two days, especially considering they were using new technologies and architectures in their work.
If we did a hackathon like this again, I would love to explore an even harder challenge that really takes people out of their comfort zone
What benefits are there, either direct or indirect, for your clients that will come from this hackathon?
One worry for technical teams is when a project requires, or could benefit from, new technologies that they haven’t had time to familiarize themselves with. The hackathon helps build confidence within the teams about being able to roll with things a bit more and learn new technologies on the fly if they have to.
Our clients will benefit our developers’ confidence as they will be able to identify and act on opportunities to leverage headless and decoupled architectures.
Hackathons also help teams understand what works and what doesn’t when you’re in a rush. Teams are better able to benchmark timelines and improve estimating for clients, particularly where time is a factor on the client side.
Finally, we are honing employees’ abilities to organize themselves and collaborate fluidly, under pressure and with a mix of disciplines and prior experience together. This boosts effectiveness when they work as a team on client deliverables, as well as when they co-create with client team members.
