Hoonigan Racing Division Case Study

Case Study by René Engelhardt — Jun 6, 2017

read

01. The myth and fascination Hoonigan and Ken Block

If you are a motorsport or racing fan in general, it is very difficult to not know who Ken Block is. It’s "this guy driving and doing donuts in the city and in parcours"! With Gymkhana, a multi-million viewed series about making unbelieveable stunts with his car, Ken Block created and further developed the franchise Hoonigan. Hoonigan stands for ‘Hoon’ and ‘Hooligan’, which really fits the lifestyle of the whole genre.

02. Hoonigan Racing Division

Originally coming from a north american Rally background, Ken founded the Monster World Rally Team, in partnership with Monster Energy, back in 2010. After the years he decided to rename the team, simultaneously to the growing popularity of Gymkhana and Hoonigan. Now in 2017, Hoonigan Racing Division (or HRD in short) is partnered by multiple well-known companies, such as Monster Energy, Ford and Toyo Tires.

03. The marketing tools & social media

With Gymkhana and Climbkhana, Hoonigan and Ken Block created a big marketing brand all around lifestyle and motorsport. It is without a doubt, that Ken Block knows how to aquire fans all over the world. With millions of views over social media he truly enjoys making content for his fans.

As important as social media is, a website with focus on usability and channeling of all social media outputs is just as valuable. The main goal of this Hoonigan Racing Division (HRD) website is, to let fans and users know what happens in-front as well as behind the scenes of each event. Together with his team mate Andreas Bakkerud, Ken Block posts a lot of personal and engaging content over social media, which should be displayed on the website as well.

04. The Frontpage

Coming up is a full screenshot of the complete frontpage. I will go into more detail in the next sections of this study. My goal was to unify the feel of HRD and the social media outlets of Ken and Andreas, while staying true to the colors and style of Hoonigan itself.

04A. Header and Navigation

The header is a bit translucent to give the featured image section even more emphasis. This allows announcements to be as visual as possible, as it should be. All navigation items are a bit offset from the center, to create space for a sub navigation as shown in the image.

The pre-header is very small and held in a greyscale so it is not as prominent as the other elements surrounding it. It features the most important brands to the left, as well as social media and a search button to the right. Upon hovering, the icons turn into their original color respectively.

04B. News & Stories

The news section is all about telling stories to the fans. These can be news and updates about a certain event or simple personal posts about things the team enjoys. Another example would be Andreas Bakkerud’s #BakkerudLIFE on YouTube. Upon hovering the colors invert so the user gets a visual response to what’s happening. On the far right is a box for advertising new merchandise, promote giveaways or a brand new product placement from one of the partners. Clicking on ‘Show more Hoonigan Stories’, the page expands and loads another set of 4×2 news tiles.

04C. Upcoming Hoonigan Events

This section showcases the next round of the FIA World Rallycross Championship. To the left is the track layout with basic information about last years event. To the right is the official name and date of the event. Below is the 2016 performance of both drivers. A click on either of the blue buttons slides towards the next round of the championship.

04D. The Hoonigan Garage

A big phenomenon about Ken Block and Hoonigan are the cars. Pure power and raw looks make all of the stunts and videos so amazing. Seeing as cars almost overcome physics. No wonder people are interested in the parts going into such a build, it is necessary to showcase these race cars with their specifications. At the very top of this section we have a system that let’s users filter for a specific car. What’s so good about this system is, it is infinitely expandable because the content below the selection changes. For example: If 10 new cars would be announced the new cars would just push down the older entries in the system, while still maintaining the default height of the section.

Down below is the actual information for the car specified above. A regular title with some Hoonigan flair (the 3D distort / glitch effect), paired with a description and the logo of the partner building the car or sponsoring the event in which the car was showcased (Gymkhana for example). To the right are expandable accordions with advanced information about the parts. Finishing this section, we have an image rotation that can handle multiple images and / or videos. A second edition with a video can be seen below.

04E. Social Media

Mentioned at the very beginning of this study, social media is key for both Ken Block and Hoonigan. I covered the whole aspect by having a large area dedicated to posts from Facebook, Instagram and Twitter. All posts are inside a masonry grid and flow with each other. Clicking on ‘Load More’ expands the grid and loads older posts and tweets from Ken or Andreas.

04F. Footer

To round up the whole page, the footer is in greyscale with the HRD and Monster Energy logo being flashy. A lot of attention went into the footer items’ spacing and layout. I searched around and found some items that will benefit from being linked in the footer, such as the Gymkhana Series and additional stores, even though they are not specific pages on the website. Therefore, the sitemap is followed by the logos of sponsors and partners, and has room to hold even more than the exisiting website. Once again, Social Media is a huge part in this, so i included all icons once more. Consequently the end of the page is featuring basic links to disclaimers, contact forms and copyright notices.

05. Customized Driver / Personality Page

This page centers around the personality a user clicked on. It is quite different from the original and actual website over at Hooniganracing.com. I tried to still implement everything that is shown, so i had to come up with a unique way to showcase everything in a small area, while still maintaining all the details and the same information provided.

The biggest feature is the ‘Biography Slider’, which holds both a Biography paired with Accomplishments, and a slider for highlighted images. The page also features more personal information than before, as fans really want to know the in’s and out’s of their idols. In this case, the information provided does not give away too much personal information, but still provides the fan / user with enough ‘undiscoverd’ news, such as a personal Spotify playlist that could be run through Hoonigan. Another example would be a playlist for the Gymkhana soundtracks. To end the page, we once again show a social stream with filters to turn off certain social media platforms.

05A. Page Content and a closer look on the Biography Slider

Down below is a close-up of the new content available on this specific page.

Following, i have some more images and a small video on how the animations work and what colors certain elements get when hovered on.

06. Final Thoughts

I really enjoyed creating this project! I’m a huge motorsport fan ever since, so it is only natural to finally work on some motorsport projects. I’m always amazed by the work and dedication that goes into each project Ken Block has built, and HRD is no different. Thank you very much for reading this and taking your time! If you have any questions on how i approach certain things, please don’t hesitate and ask me.