Fusion Soccer

Fusion, part of Disney-ABC and Univision, is a news, pop culture and satire TV and digital network. Working with Human Made, I had the privilege to build their “second screen experience” for the 2014 Brazil World Cup.

  • Client Fusion
  • Agency Human Made
  • Roles Front-end Development
  • Year 2014

With the Brazil 2014 World Cup fast approaching, we were under a tight deadline to deliver a performant website that would scale to include live social media data feeds and multimedia content.

The site was to be hosted on WordPress VIP, and who better to tackle a challenge than Human Made, who have some of the best WordPress developers in the world. Along with an incredible project manager, who kept everyone in the loop and allowed everyone to keep moving, we were able to deliver everything in good time!

Steff is fast, pays great attention to detail and best of all is a real team player. His ability to work under pressure, given a very tight deadline, was very inspiring and we couldn’t have done it without him.

The team at Fusion provided us with designs for both the mobile and desktop experiences — the mobile designs were provided earlier, as that was the focus for the project. This turned out to be good for development, as it allowed me to approach from a mobile-first perspective; although things had to be re-worked once the desktop designs were provided as some features varied between the two experiences.

One of the biggest features that came in the desktop designs was the social honeycomb; a social and rich media experience that allowed the fans to be part of the action.

The Honeycomb

The largest technical challenge of the Fusion Soccer site was the social honeycomb. This allowed users to share content via social media, and was a vital part of the experience. Fusion editors were able to curate social media mentions and highlights across Twitter and Instagram, as well as include editorial social media posts to create a rich and interactive living honeycomb.

The honeycomb had to work on all types of devices and screen sizes, and be able to live-update with new content.

Hexagons populating
Early honeycomb concept, showing new content could be live updated.
Hexagons responsive
An early responsive prototype for the honeycomb (with yours truly snowboarding in the background).

The final site was launched with great success, and some of the best features were highlighted in a preview that Fusion published to their YouTube channel: