Rethinking the way Boiler Room partners with brands

BACKGROUND

Previously at Boiler Room, when we partnered with different brands we would create a bespoke website that represents the campaign between BR and the brand.

 

We called these microsites, the main purpose of them were to..

  • Tell the user what the campaign is about
  • Show the user different pieces of content that have come from the campaign

 

MY ROLE

I led the design effort on this project, liaising with the rest of my team (made up of designers, developers and a PM), the commercial team and the creative team.

PROBLEM

The problem with microsites were that..

  • They were built using the WordPress CMS, which would be soon to be defunct since we had built our own in-house CMS.
  • They had no connection with the structure and components of our current website. This also meant that they weren’t consistent with each other.
  • Since they weren’t part of a flexible or re-usable system, we would have to create a brand new microsite for each partnership
  • Oftentimes they were incredibly text heavy, causing really high bounce rates.
GOALS

The aim was to create a solution that..

  • Should be simple enough that it could be built by in theory, anyone our own CMS.
  • Should have a connection to the current structure and components of our website.
  • Should still allow a bespoke branded look and feel to be applied.

This solution came by the way of Project Pages*.

* different name, same purpose.

APPROACH

We had recently updated our website to feature two components.

  1. Staff Picks Carousel: A carousel that enables users to view multiple pieces of content in one prime location.
  2. Featured Playlists: A number of curated collections are displayed to the user, allowing them to browse from the main page or link through to a section dedicated to the playlist.  

Since launching these updates we had seen a 67% increase in session duration. So for project pages, we planned to make use of everything we had learnt from this recent update and utilise these components that power boilerroom.tv

The benefits of doing this would be..

  • Mirrored UX that we know our users will be comfortable with
  • Since it uses the same structure as the BR site, it would be regularly validated and tested with users
  • Completely Flexible system of components
  • Powered by the main BR CMS (for faster and more regular updates)
COMMUNICATING TO THE CLIENT

During the definition part of the design process, it was important to communicate our proposal to the client and be clear at what this new offering was. Below is a glimpse of a presentation that I worked on to help the commercial team explain this new concept to the client.

THE RESPONSE

Revisiting key components

Once we had the brand on board we had to give the brand, I had to decide what level of customisation we should be able to give the brand, so that each project page would visually represent each different brand whilst still being consistent with the main BR site

HEADER

Each site has its own bespoke header displayed in place of the normal BR navigation. It includes the partnership logo and a link back to BR.TV.

The background of a header can either be a gradient, a solid colour or an image.

CAROUSEL

The original staff picks carousel on the BR website could only house recordings

We decided that the carousel should house different types of content.  With this new functionality, upcoming events as well as live shows and playlists could be featured in the carousel during the campaign.

For added clarity, we also added a new CTA to indicate to the user what type of content they were going to click into.

On any carousel item (recording/event/playlist) the title can be either text or image. This would be powered by the individual item and whether it had an image assigned to it or not.

If a background video is uploaded to a recording/event/playlist then this will be displayed when that particular piece of content is featured in a carousel. Alternatively, a background image can be displayed.

On mobile devices, the background video won’t display (due to device restrictions). Therefore, a background image would be required as a fallback.

CREATING AN AUTHENTIC EXPERIENCE

Its important that the Project Pages didn’t feel sponsored to the user. It needed to feel authentic, true to the BR brand. Usually, on sponsored content in our carousel, a brand logo would appear. To combat what we called at the time ‘logo overload’ we decided to hide the carousel logo if the content is being featured on a Project. We knew that there would already be a brand logo in the header – so by doing this users would only shown one brand logo at a time.

WHEN THINGS DON’T GO TO PLAN

In our backend CMS every carousel is made in the same way as a playlist is. This new functionality meant that events, playlists, genres and series could be featured as a playlist. Yes – that means, playlists of playlists! 

We had no idea what this would look like. It was my job to work this out (all within deadline!)

I introduced a new card type and a variation of the existing card, so that users could differentiate an event from a genre and so on. Below is a peek into some of the documentation that followed this project.

FEATURED PLAYLISTS

The titles for featured playlists can now be given a unique font and colour. They can also be replaced with an image.

FOOTER

Each site also has it’s own a bespoke footer, it can feature brief info about the campaign as well as a flexible call-to-action that can link to any URL. It can also display social links for the partner.

Allowing for all phases of the campaign to be featured

Project pages were designed to organically grow during the 4 phases of each event in a  campaign.

A continuous loop

Microsites had a broken user flow, once a user clicks out of the site, there was no real way of returning back to that microsite. To combat this, we created a link to the Project Page on any associated piece of content (recording, playlist, event)

This means that no matter how a BR user arrives at a recording, playlist or event, there will always be an easy way to access the Project page.

OUTCOME

We launched our first Project Page on the 31st October.. Have a look here. It’s still early days but when compared to the last microsite we launched, data tells us that it’s performing a lot better than usual. We’ve seen two major improvements:

Exit Percentage:

The percentage of users that leave our site from this page has decreased from 68.91% on microsites to 3.47%

Bounce Rate:

The percentage of users who navigate away after viewing only one page has decreased from 78% on the first day to 5.3%

ezgif.com-crop