I N T R O D U C T I O N
Premier League soccer is one of the world’s biggest sporting events, with fans tuning in day and night from around the world to catch live games. The TV broadcasts they watch are famously exciting, but the best way to enjoy a game isn’t from a couch; it’s with a rowdy group of fans all cheering on the same club. For NBC’s Premier League coverage, fans were encouraged to find pubs that supported their teams and enjoy the games with a crowd. This experience was first promoted by NBC Sports with the Matchmaker app, which introduced fans to pubs that supported their team.
To drive even more fan participation, NBC asked us to create a social experience that would crown the Best Premier League Bar in America.
Like the matches themselves, the project was fast, creative, and a rush to be part of. With a tight deadline and rapid-fire creative sessions to set the pace, we pitched, strategized, and designed the project on-the-fly.
S T R A T E G Y & P L A N N I N G
With a frantic timeline, we had to move quickly. First, we needed to know about our users and how they would be interacting with the site. Since the votes would be coming from fans at the pub, we knew the site was going to be a mobile-first experience. That meant building an interface that looked and felt like an app. Then we determined the functionality behind the vote: How would we combine social feeds? What information did we need from users? How could we make the process as streamlined as possible so they wouldn’t miss any of the action on TV? Lastly, we wanted to know how to make sure the bars were also promoting the contest.
D E S I G N
NBC Sports covers dozens of different sports, leagues, and events throughout the year, including the Olympics, Nascar, Notre Dame football, the NHL, Formula 1, and other marquee championships, and it does it all under the umbrella of one distinct brand. This contest needed to appeal to soccer fans while still feeling representative of the NBC Sports family. Fortunately, the contest was a natural fit for NBC’s voice and goals; it was up to us to build them a site that conveyed it. We used NBC Sports’ colors, fonts, and logos in a way that felt fresh but familiar, and integrated the look and feel with physical collateral that was used to promote the contest in pubs throughout the country.
First impressions are king, especially online, so the first frame of the site had to be striking. We used big, bold imagery to set the scene immediately.
D E S I G N C H A L L E N G E S
The functional underpinnings of the site had a lot of heavy lifting to do. The landing frame needed to convey a lot of information quickly, the social feed needed to be robust, the navigation needed to be simple, the bars needed to look attractive, and the voting needed to be accurate.
H E R O F R A M E
The landing frame had to contain a lot of information in not a lot of space. It introduced the contest with a logo, copy instructing users how to participate, a call to action driving engagement, and brand logos. The layout evolved as we were provided more information and requirements, which were also being determined as we were working.
By the time the site was live, it also included a trending bars section, which listed the leading pubs in real-time, instructions to download the NBC Matchmaker app, and a pub nomination CTA.
S O C I A L F E E D
At the heart of the platform is user interaction. Between Facebook, Twitter, Instagram, and site generated content we knew the social feed had to feel cohesive. We created a masonry grid that followed the same styling regardless of which social platform the post was from, which was difficult because different platforms contain different elements. The grid is inherently uneven which we were able to use to our advantage. Dealing with user generated content, we didn’t want to limit what a person could say and therefore a character limit wasn’t imposed, which eliminated having consistently sized content blocks. Once we had the feed designed, we needed to figure out how users would browse this content. Would they want to see everything at once? Just posts supporting their favorite teams? Or their favorite pubs? We added various filters at the top of the feed to allow the user to sort posts by city, team, or bar name.
N A V I G A T I O N
Navigating across the platform needed to be fast and intuitive. To make navigation quick and above all obvious, we created a dashboard style menu on both mobile and desktop. On mobile, there are two pieces to the navigation. The top bar houses the NBC branding, an option to view the top trending bars followed by a call to action to vote. Pinned to the bottom of the device are the four sections of the site with an easily-identifiable icon and type contained in an NBC Sports’ branded yellow. Both of these elements are fixed in place for easy access even as the user scrolls.
P A R T I C I P A T I N G B A R S
Another integral part of the platform, the Participants page is where all the bars involved in the competition were housed. Nobody was going to scroll through a bulleted list of names in order to find the one they want, so we laid the bars out as cards. We elected to use a traditional grid layout here as opposed to the masonry grid. Unlike the social feed, we had control over what content was going to be displayed. Each bar would have the same information: a photo, the bar name, location and a call to action to vote for the location. Once the user found their bar, a tap opened a modal that contained an image slider, bar name, location, clubs they support, a description and a link to see all the posts about that specific bar.
N O M I N A T I N G A N D V O T I N G
Every vote counts. Casting a vote was one of the driving factors for determining a winner to the contest. Call to Action buttons were placed in the navigation, on the social feed and within each bar in order to prompt users to vote. Voting only required basic information. No one was asking for your email, phone number, home address or where you went to high school. All we wanted was your name, to associate a post with on the social feed and your vote on the backend, the bar you were voting for, the club you liked and why your bar is awesome. There is also an optional media uploader to attach a video or image.
D E V E L O P M E N T
With so much going on under the hood, we needed a platform that was flexible and easy for contest moderators — who wouldn’t necessarily have technical backgrounds — to use, so we chose to leverage our Drupal development expertise. Available integrations and libraries for the platform made it easier to develop the social feeds feature, which finds and pulls social network content into Drupal nodes. Furthermore, the Views module allows for quickly building custom interfaces. Since all displayed social content was curated, the ability to filter and sort through thousands of automatically pulled social interactions at once, was essential. These features also made vote tabulation and bar nominations easier. Bulk operations, commonly a difficult-to-implement and oft-forgotten feature, are instead first-class throughout all custom administrative pages thanks to the Views Bulk Operations module. Finally, the ability to tabulate content in Views ensures that votes can be counted at any point during the progress of the contest.
P R O J E C T T A K E A W A Y S
Take A Scaleable Approach
For a project to succeed there needs to be a constant process of growth. Taking a phased approach helped us to launch a platform that would facilitate the needs of the competition on day one and then layer on more functionality in the following weeks post launch. The project launched but, was incomplete. Once the site was live we implemented Instagram into the social feed and configured the ability to pull advanced reports regarding site activity through from the Drupal backend. We continued to talk with the client, whom was getting a ton feedback from bars about the platform which we then turned into experience improvements for their users such as; a clearer breakdown of the contest rules and a call out to the NBCSports MatchMaker App for iOS and Android.
Finding The Positives In A Tight Deadline
Ordinarily, we’re against rushing to complete a job, but sometimes speeding up the process has its benefits. For one, it keeps us moving: decisions are made quickly and we don’t spend much time second-guessing or waffling between two options. Sometimes, even with the most cohesive projects, having more time than necessary leads to overthinking and coming up with complicated solutions. For this, we stuck to simple, executable methods that kept a complex project from growing beyond what it needed to be. Moving quickly also meant pushing beyond our typical roles in some cases, and it brought our team closer together with a sort of “in-the-trenches” mentality that comes with pushing yourselves harder and faster.
