• rise-as-one-01English layout
  • rise-as-one-02Spanish layout 1
  • rise-as-one-03Spanish layout 2
  • rise-as-one-04Spanish layout 3
  • rise-as-one-05Transition 1
  • rise-as-one-06Transition 2
  • rise-as-one-07Transition 3
  • rise-as-one-08Transition 4
  • rise-as-one-09Transition 5
  • rise-as-one-10YouTube content 1
  • rise-as-one-11YouTube content 2
  • rise-as-one-12Facebook content 1
  • rise-as-one-13Facebook content 2
  • rise-as-one-14Twitter content open

Budweiser: Rise As One

Overview

Budweiser’s Rise as One campaign is a celebration of the often unseen sides of footballing culture throughout the world, and in collaboration with Vice and Fox Sports we helped to tell some truly amazing and personal stories from around the globe:

This final phase of the The Rise as One campaign’s site, in the lead-up and over the World Cup, site is a mash-up of YouTube, Facebook, Twitter and user generated content in a portal-style environment.

For this project, I worked in-house as the front-end lead at Grand Union in a team of around 6.

Implementation

The site’s design and development was an organic process, and it ended up as a single page application, though without using a framework like Backbone. At the time of redesign we anticipated have separate pages and URLs like the existing site, but as new client amends were taken into consideration, it became obvious that treating the grid as a single, fluid entity for displaying content was the way forward.

Each of the grid items in the grid layout was designed as a card with 2 faces – the front showing the content preview, then flipping over when clicked to reveal the back, which would then load in the content from whatever internal or external APIs it needed to. Once the content was loaded, the card back would expand to show the content, and in the case of video content, would allow additional content to be loaded by clicking on additional video thumbnails.

The separate content types were powered by custom jQuery widgets, and I developed a custom Packery implementation for the grid layout, that featured auto-focus, scrolling, keyboard navigation, and tile transitions. CSS 3D transforms and image filters were added to add a bit of flair to the user experience, degrading on less-capable and mobile browsers.

The back end was powered by .net, but most interestingly, I developed the prototype of the site using Mixture, a rapid front-end development toolset for Mac and Windows that allowed me to quickly build and test ideas, all on the front end, and without the need to customise the existing back end.

The final site was released over 4 “hubs” (locales) and featured 5 different content types: Image, Video, Facebook, Twitter and Gallery.

Links

 

Leave a Comment