A hero image showing angled versions of the Paper Wings mobile app

website & mobile app

red bull paper wings

2019

CLIENT

AGENCY

The Red Bull Paper Wings event is the largest paper plane throwing competition in the world and happens once every four years!

‍Red Bull wanted an event website and mobile app as training tool to help build hype for the event and get people engaged in this special event. The app would contain tools to help users practice their paper plane folding abilities and their throwing skills in the three main categories.

Two of the categories - Distance & Airtime - are held as events at a total of 404 Universities across 64 countries. The final category was Aerobatics which required the participant to fly their paper plane in a type of performance involving crazy tricks; this category required an online entry via Instagram using specific hashtags.

In addition, the app included an AR component which allowed users to play a fun paper plane AR game containing 30 levels; those who completed all levels were given the chance to win a Red Bull Air Race weekend. If that wasn’t enough, the app also contained personal achievements, a news feed to keep users in the loop on the latest competition updates, and a Team Room ; an exclusive area for finalists of the competition.

Finally, to manage all of the events, an event management system was also part of the requirements in allowing participant tracking from venue check-in to voting and submitting the results to be displayed onto the leaderboard system.

website userflow

Due to the complexity of the competition the first thing to do was create a site map to identify how our pages link together and understand how users are going to navigate around the site. The user could be visiting for various reasons, but the primary reason we have to assume would be to learn more about the competition and get them to compete in an event.

What I love about creating user flows & site maps in this way (borderline low fidelity wireframes) is that it allows me to understand the tempo of the design and how we want to communicate. By sectioning parts off that can then be rearranged I can craft a “voice” of sorts that will build momentum where it needs and encourage user engagement.

Similarly, it was also necessary to map out how to streamline the registration as much as possible which involved other complex factors regarding sign in & account creation.

creative approach

Similar to previous Red Bull events, we were provided a key visual as a guide and given notes from the client as to which elements were okay to take from the artwork. As the artwork consisted mostly of light grey, I decided to use white as my base colour across the site and guide the eye using the plane elements, iconography & strips of colour.

It was also important to keep the main site semi-subdued so that the app could feel like an extension of the web experience with a more premium design, as opposed to having something that felt like just a responsive version of the website.

As the homepage needed to be the most striking, I worked closely with the 3D team at Koffeecup to create a low poly, paper globe that looped with pinned location markers & paper planes circling the globe. This would then lead the eye down to the number of universities involved in the competition and a short introduction on how the competition works.

The Red Bull Paper Wings key visual artwork

A render of the 3D globe created for the website

Styling

To ensure the likeness to the Red Bull brand, it was important to use elements of existing component styling such as fields, buttons and typography, particularly their behaviour. To maintain the integrity of the brand and too help it feel familiar, I utilised the spacing conventions of their guidelines which was similar to the 8-point grid system.

Of course, the colours used were the usual yellow, red and blue Red Bull brand colours, however, there was a heavier emphasis on the red which was used for various key elements such as dividers. banners, navigation and CTAs.

registration process

Once a user has decided to participate, they needed to locate an event.

Events are created in the back office (more on that later) and take place between specific dates, times and locations, so users can search via country and region to locate an event that works for them.

In order to register for an event, they must create an account first before selecting their chosen category/ categories as it is possible to compete in both at the same venue. Once confirmed, there’s a confirmation screen with the details of their registration which is also forwarded to their registration email address. Similarly, they can also find this by logging onto their account which stores all the events they’re registered to.

Two shots from the website showing how participants register for the competition

An animated gif of the category selection button

Three images of the three different categories located on the homepage

competition Categories

Within the competition there were three categories: Distance, Airtime & Aerobatics.

Distance measured - yep, you guessed it - the distance and how far the plane can be thrown, whereas Airtime measures the time it spent in the air before touching the ground. The two categories had strict rules in that the plane had to be made on the day of the event (folding only - no ripping / tearing / glue etc) in a moderated environment. All paper was also provided at the event so that the size and weight are consistent. This ensured a fair competition and kept it exciting in the sense that participants could practice prior to the competition at home etc and get a great result, but on the day it could be vastly different.

The remaining category was Aerobatics which was a performance-based entry where participants can do crazy stunts with their planes. These performances needed to be submitted as an unedited video lasting under 60 seconds and uploaded to Instagram with the #redbullpaperwings hashtag. These were then voted on to determine which entries got to the finals.

Some shots of the website advertising aerobatics & the mobile app

Aerobatics & App Download

Communicating to participants how the competition works was relatively easy, however, what was slightly more complex was breaking down the process of Aerobatics as it differed from the other two categories. The way I approached this was to have a dedicated page which presented the steps needed to participate in this category; accompanying it with a video to provide context of the previous events entrants.

Similarly, folding plays a huge role in the competition, particularly in the Distance & Airtime categories, so breaking this out of the rest of the information was also necessary in order to provide support to the user through the form of the app. This also drove users to check out the app page which showcases all the core features of the app, from folding, flying & the AR Game.

Finalists & winners

The competition had three main stages; Qualifying / Semi-Finals, Finalists & Winners.

Once the qualifying stage was over and the finalists had been chosen, the home page needed to be updated to reflect the beginning of this new stage. Finalists consisted of the number 1 place for each category, meaning that each of the competing countries would have three finalists per country.

Once the Finals had taken place, the homepage would change again to show the winners and their results.

back office

Aside from the main event website there needed to be a way in which competition data can be created and pushed forward throughout the process as it progressed. This was a crucial factor in creating & managing the 400+ venues, the thousands of participants and all the data relating to them, so an Event Management System was required.

Select members from the participating venues were assigned “Event Managers” and it was their responsibility to log in with their credentials to then create their venue which would then make the “event” available on the main website for users to find & register their participation.

This system not only allowed Event Managers to create events, but it also allowed them to check-in participants at their registered venue, submit results for their registered category, move entrants forward to the next round and push data live to the website as well as to the digital signage which was the leaderboard.

paper wings mobile app

As an addition to the main website, Red Bull wanted a companion app which would encourage more user engagement and augment the hype around the competition. The app's primary purpose was to provide various means for the participants to prepare for the competition.

Features of the app included a news feed, a place to fold planes using an AR helper, then a place to practice their paper plane throwing skills for the three main categories; Distance, Airtime & Aerobatics. Aside from this, there was also an AR game which challenged the user to fly a virtual paper plane into a net, avoiding obstacles along the way.

Visually, the app needed to look premium yet still feel like an extension of the website, so using a card based system kept things tidy & contained, whilst the angled dividers & bursts of block colour gave it depth and dynamism.

A single image of the mobile app home screen in an iPhone frame

app user flow

Due to the complexity of the app, it was easier to break apart the requirements and features of the app, and then group the information back together through purpose and intention. Users are visiting the app to achieve a specific thing, rather than just browsing, so knowing this, I created three main tabs.

The first tab was a “Latest” tab to serve as a constant reminder of the ongoing competition. The “Hangar” tab was the middle tab where all the competition tools would sit. And finally a “Profile” tab tracked their current progress and added gamification into the mix.

Having these separate tabs not only allowed me to purposefully separate the features, but it also meant that users didn't have to delve too deep into the app to get to where they needed to be.

app onboarding

The onboarding to the app was kept to just a few screens to highlight the three main categories of the competition and provides an overview of each of them. It was important that I not only used the order from the main website here, but also the people I chose to represent each of the categories to ensure consistency and minimise cognitive load, after all, humans connect with faces more than anything else.

The onboarding screens of the mobile app

An example of the "latest" section of the mobile app

Latest From The Competition

The first tab users see on entering the app is the “Latest” tab which serves as a reminder of the ongoing competition and contains all the information surrounding it such as nearby events, latest results & Red Bull related news.

the hangar

As I mentioned earlier, grouping certain features together was crucial in helping user navigate through the app. The Hangar served as the place all things paper plane related, from the folding AR tool where users can build a plane, to the runway where they would fly in one of the three competition categories. And finally, the AR game where users can challenge the 30 levels for a chance to win a weekend at the Red Bull Air Race.

Below is the main Hangar screen and the single onboarding screens that accompany each feature; Fold, Distance, Airtime, Aerobatics & Flight Academy.

Shots of the instruction screens for the features of the app

hangar: fold

The Fold section of the Hangar allowed users to select one of the five planes to practice folding. These planes were predefined planes using the same paper, weight and specifications that were stated in the rules of the competition. Of course all these were optional and users could create their own, but this was meant as a starting point of engagement.

Each plane had a difficulty rating and had stats pertaining to how they’d perform in each category. Once the user has chosen a plane they want to make, they’re then taken through each step of the process and once completed, the plane is added to their Runway.

Red Bull also used this opportunity to make an exclusive plane available through selected packs of Red Bull where a QR code can be scanned; if successful, the plane would appear as an option to be made.

A collection of the planes you can make in the mobile application

hangar: runway

The Runway served as an inventory of sorts for all the planes the user currently has. Any planes that were made in the Fold section of the Hangar automatically go here for the user to select to then take into either the Distance or Airtime categories. Users would select a category, select a plane - or upload a picture & stats of their own creation - and fly the plane using the related feature.

Once flown in either category, the results were shown on the card for future reference and provides a challenge to the user to beat their own score. Each of these cards show the stats of the plane and any past logs, so only the best score will appear on the front of the card and any progress can be seen inside it.

Aerobatics was slightly different in that plane selection wasn’t necessary as it can be any plane, any number of planes and any size plane.

hangar: flight academy

The final section of the Hangar is the Flight Academy which is an AR game that allows the user to take any of the planes they’ve built inside the app and virtually fly them in any environment as they try to get the plane into the goal whilst avoiding various obstacles.

There were ten levels to begin with and subsequent updates to the app added twenty more to make a total of thirty levels. Players were placed on a leaderboard and those players who completed all the levels they were given the chance to win a weekend at the popular Red Bull Air Race event.

Screen designs for the flight academy section of the app

profile & achievements

The final section of the app was the Profile tab where users can track their app progress. This gave the experience even more of a competitive edge as injecting gamification encouraged users to use the app more and participate in the competition.

Among the gamification elements were stats, achievements and rank badges which changed based on the number of achievements the user managed to collect, so these would range from Attendant (0-2 achievements) all the way up to Captain.

An example of the gamification of the mobile app showing the different ranks

team room

Once the finalists have been announced they’re given exclusive access to a section of the app called the Team Room. This section serves as a hub for various pieces of information related to the finals and the individual finalist such as flight & travel information, live Red Bull updates, an itinerary for the event and cheatsheet for any assistance they may need.

The Event

The finals were held in Hangar-7 in Salzburg, Austria and I was lucky enough to attend this awesome competition. Joining the finalists of the aerobatics competition were three star judges; Air Racing’s Mika Brageot, Base jumping’s Cedric Dumont and B-Boy star "Wing".
‍
What I found so great about this competition was that everyone - regardless of who you are - can relate to it. You don’t need to have a degree or be from a particular background; anyone can fly a paper plane and it's something everyone experienced a child, so for many, this was nostalgia dialled up to 1,000!

Event photo showing a young man throwing a plane into the air

Event photo of all the winners of the competition