What we did and how we did it

Plank is proud of our work building the website to support Celtic Soul, a documentary created by Canadian actor Jay Baruchel and Irish soccer journalist Eoin O’Callaghan, and written and directed by Michael McNamara. The film is a tale of soccer fandom that spans both miles and generations. Jay and Eoin set out on an epic road trip that takes them through Canada, Ireland, and Scotland, as well as 200 years of ancestral and sport history.

The website gives fans a chance to get to know Jay and Eoin as they begin their road trip and discuss the deeper points of sport, community, and history. As users scroll through Jay and Eoin’s road trip, they are gracefully flown from Montreal to Ireland and Scotland on an elegant, interactive map. The destinations are accompanied by online-first video content where Jay and Eoin delve into the parallels between fans of the Celtic Football Club and the Montreal Canadiens, explore the history of Irish immigration in Montreal, and share a few laughs on the road.

Today we’re looking at the site from the team’s perspective, and sharing a bit of how we did it.

Design Considerations
Jennifer Lamb, Creative Director

The interesting challenge of this project was that it called for some heavy integration to present a rich array of content – animations, video, an interactive map – that serve to tell the story of Celtic Soul. Frontend was really the star of this show,so I worked very closely with the team to manage the delivery of that content. I gotta say, after so many hours of looking at Irish landscapes, my feet are itching for my own road trip.

Using Mapbox
Jerome Devillers, Frontend Developer

I had to find the best mapping solution to showcase the various locations in Montreal, Ireland and Scotland that Eoin and Jay visit on their road trip. After considering Google Maps we ultimately chose instead to use Mapbox. But why Mapbox over Google Maps? Because Mapbox is fast and lightweight – which means it doesn’t slow down the loading of other content on the page. We also had to match the scroll page position and content with the corresponding location on the map. Mapbox also allows you to design and style the map rendering to keep it consistent with the overall look of the website.

Building a custom Twitter-bot
Sean Fraser, Senior Developer

We gave fans the ability to view sneak peaks of video clips from the movie by engaging with @CelticSoulMovie on social media. We created a simple bot which regularly pulls in Tweets to the account. The bot reads the hashtags in the post and replies with a direct message containing secret links which unlock various pieces of hidden content across the site.

Vous en voulez plus? Rejoignez notre infolettre.

Nous aimons partagé nos conseils à propos du web, nos idées et nos projets.


Vous pouvez vous désinscrire en tout temps. Contactez-nous pour plus de détails.