Hero image of the desktop designs in a laptop

website

Red Bull basement University

2019

CLIENT

AGENCY

Red Bull wanted to create a global hub for their Basement University project - an event that encouraged students to present innovative technological solutions for issues that they face on campus.

The submissions were to consist of a 60 second video pitch and the best entries were invited to collaborate with a mentor to develop their ideas and then present them at a Global Workshop in Toronto.

The site was to be fully integrated inside the main Red Bull website as a microsite; this was to better drive traffic towards the project and assure more engagement. The project had a total of six stages ranging from Application to Voting to Meeting the Finalists and then onto The Winner. The nature of the stages kept various elements the same, but it was often a case of removing sections and replacing with new ones.

Unlike previous Red Bull projects such as Paper Wings & Futur I/O, it wasn’t necessary to design a back office UI as the client was already using an event registration provider; this meant that once all event spaces had been taken, the ability to register needed to be suspended.

user flow & site map

Similar to the previous Red Bull projects, the way I approached this user flow was more like a low fidelity wireframe to help me map out and plan the information hierarchy and rhythm of the content. This isn’t always necessary, but I find it’s good practice in some instances and helps the client not only visualise the site but brings them into the conversation.

Due to the complexity of the many stages, creating a single user flow wasn’t possible, instead, I had to create six user flows - one for each stage as it was a constantly evolving and de-evolving site that turned sections on and off depending on the phase.

The six stages were Pre-Application, Application, Voting, Meet the Finalists, Global Meeting, Winner. Each of these stages required new things to be added, and older elements taken away, so finding how to communicate that the site had changed since their last visit was a challenge.

creative approach

As with all the Red Bull projects I’ve worked on, I was provided a key visual to work with as a reference point for the visual design and from this there was a clear emphasis on the theme of invention, creation and ideation. Combined with the blueprint grid pattern, this became the background to each page.

I was really inspired by the light coming from the globe in the key visual, so I decided to implement a repeated gradient that went from dark to light to dark again to reduce the monotony of pattern and make it feel less flat, yet giving it a slight retro vibe.

Since we had a similar function on the website to the Paper Wings event finder, I worked closely with the 3D team at Koffeecup to create a tech-like globe to add visual interest not only to the page but to the Find Event call to actions. Furthermore, to ad to the tech-vibe I created some abstract frames that wrapped around each image.

The key visual for Red Bull Basement University

A snapshot of the homepage for Red Bull Basement University

A 3D render of a globe used on the homepage

styling

As this site was integrated into the main Red Bull website, many of the components for buttons, fields, spacing was predefined so it was mainly a case of using it to create something cohesive and inline with the key visual. Once again the key Red Bull colours were used and this time we integrated a new font that would be the (type)face of the Basement University project - see what I did there?

By using the Red Bull components library and utilising their guidelines such as the 8-point grid system it was more easily recognisable as a part of the Red Bull main site so users still felt that they were inside that ecosystem.

A stylesheet displaying the many styles used across the website

The different card designs used across the website

Cards

Despite having to use the Red Bull component library, it didn’t mean I wasn’t able to change and tweak some of their designs which came in especially useful when designing the many card types required. Having the use of the typeface from the key visual really granted a fair amount of versatility that allowed me to create something unique whilst staying within the Red Bull brand guidelines.

the competition

As mentioned previously, the competition had six stages; Pre-Application, Application, Voting, Meet the Finalists, Global Meeting, Winner.

As each of these stages required new things to be added, and older elements taken away I needed a way to show that things had changed for those who were revisiting the site. The best method of doing this was through the hero image which contained information pertaining to that phase. It was important to note three main things; what the current phase is, how long they have left, and a call to action to get them straight to where we want them.

Meanwhile, the integrity of the homepage was still intact for those new to the competition and still wanting to understand how it works.a

submission process

Something that I really love about one of the previous Red Bull designs (Futur I/O) that I created was having a participants video entry feel special so in a similar fashion, once users have entered their video information with tags, description and title, the video page was made front and centre.

Once submitted, the entry would appear on the video gallery of the relevant phase; this card would differ in appearance where it may show votes and/ or labels noting whether it’s a finalist entry or not.

Judges, Mentors & Hosts

Curating the competition were nine people; three judges, three mentors & three hosts. The judges were of course judging the entries and deciding who would progress to the next phase of the competition. The mentors helped the best entrants develop their ideas further to bring their vision to life. Finally, the hosts were those conducting the Global Workshop in Toronto.

finalists & winners

After the Global meeting, the website’s Project page was updated to present the winner including a photo, quote, description and a link to their winning video. A link though to a content pool for a full press release was also added.

Furthermore, those late to the competition were still able to navigate to the video gallery to check out all the entries from the beginning stages.

The design for the winners homepage & video gallery

designing responsively

In quo voluptas assumenda est, qui ratione voluptatem ut calere ignem, nivem esse expetendam et fortibus viris commemorandis eorumque factis non recusandae itaque aiunt hanc quasi involuta aperiri, altera occulta quaedam et dolorem? sunt autem quibusdam et quasi naturalem.