Website

Red Bull Futur / IO

2018

CLIENT

AGENCY

Red Bull launched an event in which creative minds & dreamers from all over the globe had the opportunity to show their vision of what they wanted for the future in a 60 second video.

The video would be judged by a panel of international experts based on three key criteria: Desirable Future, Creative Storytelling and Inspirational Visions.

The finalists of the competition got to fly out to the Red Bull Future I/O Academy in Lisbon where they had the guidance of those expert judges to expand on their vision. The most stunning vision was selected to be professionally produced at the Red Bull Media House to propel them into the creative industry.

The goal was to develop a website that allowed potential participants to understand the competition and encourage them to upload their own video & build momentum to keep them engaged in the competition.

user flow & site map

The first thing to do was to map out the journey and site map for the user. The target audience were college & university students so aside from making the homepage visually engaging, it was key that I identify user decision paths that the structure the content in a way that helped build momentum and excitement for the competition.

This meant that providing enough of the information that was needed without overwhelming the users such as a video > brief description of the competition > how it works > what’s in it for the user > expert judges.

All these sections had call to actions that all pointed the user to a dedicated page with expanded details about how it works, offering a roadmap of the entire competition and the full list of expert judges. Using a pinned navigation and a final CTA at the end of the content, it’s encouraged that the user enters the competition

creative approach

The client wanted the site to be visually unique, but still feel like it’s Red Bull, so I adopted elements of the Red Bull brand guidelines such as their spacing, shadows, card designs and typography, and integrated it into the fabric of the key visual. This meant that the vertical rhythm and design patterns that exists across all of the Red Bull sites allow Futur/IO to stand alone, yet still feel familiar.

One of the core things that I wanted do was take the key visual supplied by the client and integrate elements of it into the site, particularly the geometric shape and the highlight on the text; I pushed this even further on the Participant Entry flow detailed further down.

Users were asked to upload their video, fill in a title, description and add appropriate tags, however, I wanted the user to preview their entry with the site aesthetic applied to it as though it’s a featured. The aim was to make the user feel like their entry is the only one that matters and wasn’t just some additional step that’s part of what’s usually a generic process. For me, this is one of my favourite aspects of the design.

The homepage of the the futur/ui website

The bottom part of the home page showing a sunset gradient

Styling

As made clear by the client, the visual design needed to feel fresh & new as this was the premier of the Futur/IO event, however, the integrity of the Red Bull brand and their identity had to shine through. So the way I approached this was to use their core principles of colour, typography & spacing, and apply them to a new design style inspired by the key visual.

I was really keen on getting in some unique shapes that augmented those seen in the key visual, so the primary call to actions are not only colour fills, but have round edges on one side, whilst the other side swoops upwards. They also have little elements around the buttons that animate when hovered, and change when pressed.

A stylesheet for the Red Bull Futur/IO Porject

submission process

Users were asked to upload their video, fill in a title, description and add up to three tags that most matched their chosen subject. I wanted to push their entry into the Futur/IO style, so I allowed the user to preview their entry with the site aesthetic applied to it as though it’s a featured part of the event. The aim was to make the user feel like their entry is the only one that matters and wasn’t just some additional step that’s part of what’s usually a generic process. For me, this is one of my favourite aspects of the design and overall experience.

Voting

Aside from the judges decision, participants get two extra chances to earn their place at the Red Bull Futur/IO Academy, and the first was getting their submission to the top of the voting tables.

To allow this, I designed a carousel that would allow people to share and vote for their favourite submissions providing users had signed in with Facebook. Of course, this had to be moderated (because, ya know, people) so comments were able to be reported and flagged for approval in the back office.

A board of all the different card designs across the website

Cards

The Red Bull branding utilises card components to not only keep some content contained, but often as a doorway to new content, so it was important to design new cards based on the visual design I had developed. These cards ranged from those seen in the back office, profile cards of judges & finalists, as well as individual participant cards which would send them to their respective entry.

SxSW Smart Application

The Smart App was a way for more people to enter the competition and available exclusively to attendees of the popular event SxSW who approached the Red Bull Futur/IO booth. This was a way to gain more traction simply from footfall at one of the innovative & exciting events of the year.

‍

The smart app process differed slightly in that users would not have the same tools at their disposal as those participating via the website because they were there in person, meaning they couldn’t edit a video or submit a more curated application. Instead, participants using the Smart App simply talked into the camera for 60 seconds about their idea. It was then pooled together with the other participants, but tagged with a “smart entry” tag on their card so they could be identified.

A mockup of the South by Southwest tablet application

Back Office

Aside from the main design of the event website, there was also the back office design to consider which would allow the judges to cast & submit their own votes on each video. Upon logging in with their credentials, they’d be presented with a video wall containing all the current submissions where they can click into a card and vote on that submission providing they hadn’t yet voted. They could also filter via voted, reported & open, as well as by country, add videos to a saved tab and of course the shortlist tab which would show their top most voted entries.

As there was no dedicated moderation team, judges were also able to report videos that violated the terms & conditions or those entries that were inappropriate. These would then be moved to another section which would mean their entry has been disqualified.