The Toaster World Cup

As a digital creative agency, the World Cup provides a unique opportunity to engage the people in our agency, and have a little fun. Considering we have creative technologists, like me (ahem), we can take this one step further, leveraging emerging technologies to enhance the experience of such a prestigious and popular event.

So what’s the best way to get the trash talk going and the competition underway?

A sweepstake, whilst an obvious choice, still needs to be engaging and low impact from a ‘management’ perspective. In our discovery, we found that creating this World Cup experience for the agency is both quick and relatively simple. Talk about a win win.

Fielding the teams

Since the goal was to be as agile as possible, we found a fit-for-purpose external API and used our simple boilerplate at the start. This foundation was central to the success of the project. The API, backed by a company called Software for Good, gave us nearly instant content updates from the World Cup. Initially, I used this to populate a set of teams (and added a few extra bits like kit colours myself). Next, I incorporated an API from our Toaster “People Page” to pull relevant staff information. To link people to their team, I simply created a ‘pivot’ array to marry the two bits of data together.

Because the APIs were so effective and provided everything that was needed, the focus shifted to architecting components that match well with this data well. Jumping ahead to the final outcome, I had a lot of scenarios that looked like this (this is faked, but you get the idea):

const data = {
   homeTeam: {
       name: 'England',
       goals: 6,
       yellowCards: 2,
       redCards: 1
   },
   awayTeam: {
       name: 'Panama',
       goals: 1,
       yellowCards: 1,
       redCards: 0
   }
}

<Team {...data.hometeam}/>
<Team {...data.awayteam}/>

Once this structure was established, it meant that the components became very transferrable around the site. Wherever I needed a team to be displayed (I actually called the component ‘Sticker’ in honour of all our panini childhoods), I could drop in the team knowing that I just had to map the resulting data directly to it. That fluidity, combined with some responsive design, meant that the site was quick to build and felt seamless.

Fine tuning the beautiful game

This was an internal project, so the polish was intentionally crude and quick. However, adding additional features was really easy, like a live page to get info on games in play and games played to date.

Taking the smack talk to Slack

One of the ideas to stoke the flames within the office was to aid visibility on whose team had gotten into the World Cup - and ultimately who in the office you were playing. With a relatively simple hook up to Slack (relatively simple to me, because I didn’t do it, thanks Dom!) we could post to Slack and inform everyone of their upcoming matches.

We could @ reply people, notifying colleagues of the games their team would be playing in, and in a snapshot, also see who they were paired up with for that day. We also included a cheeky little CTA for ‘dead ends’ (see below).

Game on!

Visit the site for yourself here:

https://toaster-sweepstakes.appspot.com/