How our interactive story showcased one of Red Bull’s most daring projects of 2023

Insights

Brian Grubb’s historic WakeBASE jump from the world’s tallest infinity pool in Dubai had people asking how a feat like that was even possible. Our expertly designed Ceros experience had all the answers.

15 March 2024

6 mins read

Written by Joe Batchelor

In December 2023 Red Bull’s WakeBASE video dropped on social media and was instantly viewed millions of times around the world.

The project saw long-time Red Bull athlete Brian Grubb wakeskate behind a custom-built drone in an infinity pool 77 floors up in the sky before hitting a jump off the side of the building and BASE jumping to the beach below. Pretty impressive, right?

HLabs were stoked to be involved in a global project of this magnitude and our brief to create an interactive experience that explained exactly how the stunt unfolded and introduced the key characters involved was one the team couldn’t wait to jump (awful pun, we know) into.

For this one we’d be writing, designing, and building the story on our partner platform Ceros in advance with it being published on Red Bull dotcom soon after Brian had touched down and packed up his parachute.

Brian Grubb - Image 1

Brian's quotes, alongside concise and straightforward sentences, bring clarity to this piece

The storytelling techniques on the page showcase Brian's stunt in the most interactive way

Here’s 10 ways that helped us showcase WakeBASE and maximise digital user engagement on Ceros.

1. Making the video centre stage

The first thing you see when you click the link? Brian Grubb leaping off a kicker into thin air. You only get two seconds to engage someone, so we clipped up the key moment into a rolling hero gif. No matter how many times you watch it, it’s still jaw-dropping! To help drive traffic to the full video, we housed it just below complete with a custom play button.

2. Prominent section headers

While the jump only took 40 seconds, it was a decade in the making which meant there was a considerable amount of content and information to include. We broke the story down into clear and digestible sections complete with giant headers to help readers navigate between each part of the page with ease.

‍

Brian Grubb - Image 3

Highlight quotes and headers are good ways to segment the story into clear sections for easy navigation

3. Step by step explainer

The biggest challenge was how to clearly break down every step of the stunt from the drone’s engine whirring into life, all the way to the landing. For this, we worked closely with the Red Bull team to put some questions to Brian so he could pinpoint exactly what would be happening during the 40 seconds. Each of the eight steps had a number, header, image, explainer text, and quote from Brian to really provide the detail on how something that had never been seen before became reality.

4. Concise copy

Instead of long paragraphs, we stuck to short, sharp sentences that were digestible and straight to the point. We also included a bullet point section to clearly explain the initial vision of the project and used as many direct quotes from Brian as possible. Who better to explain the project than the man actually doing it?

‍

Brian Grubb - Image 4

A key factor of the wakeskating success was the drone. It was pivotal in supporting Brian's transition to the BASE Jump

Brian Grubb - Image 5

Interactive elements, such as this quote animated carousel, were strategically placed in parts of the story to elevate user engagement

Brian Grubb - Image 6

Brian Gurbb and Red Bull made history with a stunt combining Wakeskate and BASE Jump for the first time

5. Highlight quotes

Making a selection of really strong and informative quotes from Brian, the drone pilot, and his training partners stand out on the page by putting them in bold with custom quotation marks helps draw attention to some of the really crucial and personal parts of the project.

6. Data visualisation

Continuing on the same path, information like technical data around the drone, athlete bios, training dates and location facts were all displayed separately from the body copy which provided added clarity and made them easier to consume quickly.

7. Hover states and carousels

Easily accessible hover states and rolling carousels displaying key quotes enabled us to include additional vital copy without compromising the length of the page and making it feel cluttered.

‍

Brian Grubb - Image 6

Brian Gurbb and Red Bull made history with a stunt combining Wakeskate and BASE Jump for the first time

Brian Grubb - Image 4

A key factor of the wakeskating success was the drone. It was pivotal in supporting Brian's transition to the BASE Jump

Brian Grubb - Image 5

Interactive elements, such as this quote animated carousel, were strategically placed in parts of the story to elevate user engagement

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.