An unforgettable website experience for Martin Garrix

We created a brand new official artist website for world-class dj and music producer Martin Garrix. From research to style direction to design and development; the whole nine yards.

Introduction

Garrix; a dj and music producer in a league of his own

With popular songs reaching close to a billion streams in total dj and music producer Martin Garrix' name and brand ring a bell to most people. Although the official martingarrix.com website met the basic needs of its audience, the team over at STMPD RCRDS, Martin Garrix' very own record label, was aware of the opportunities they were missing out on. It lacked the depth in experience that was desirable for an official artist website for fans and even potential partners to lose themselves in the world of Martin Garrix.

Overview of the Garrix albums.
Persona of a Martin Garrix fan.

Audience

Designing for fans

The STMPD RCRDS team shared incredibly valuable insights into the typical Martin Garrix fan. It allowed us to paint a super complete picture of potential website visitors resulting in one persona. The reason for using 'just' one persona was because all other fragments and types of audiences had the same needs in common; being submerged into the world of Martin Garrix.

Research & UX

Unpacking our research and UX tool belt

We kicked of our research and UX process with our trusty ecosystem analysis. Subsequently we mapped out overlapping interests amongst different user groups in a tension model. The insights these brought along, together with a thorough study of the old website's analytics, led to a new and improved sitemap. This made way for us to create the content core which is one of our favorite ways to match content to pages and connect the dots between the pages. Together with an extensive flowchart for the contact page and form we had the basic ingredients to move on to the next part in our process.

Styleboard for the Martin Garrix website.
Styleboard for the Martin Garrix website.
Styleboard for the Martin Garrix website.
Styleboard for the Martin Garrix website.
Styleboard for the Martin Garrix website.

Style direction

Extending the Garrix brand

With Martin Garrix already being an established and matured brand the client's style briefing and preferences where pretty straightforward. There was also a desire to make sure the style would break the Garrix brand out of the confines of the electronic dance music genre. We created a style board based on their wishes and added additional imagery to this collage to propose an extension to the current style.

The collection of images above serves the mere purpose of displaying the style direction and inspiration. Yummygum is not associated with images shown in the collage above nor do we claim to have created them.

Yummygum team working on Martin Garrix
Yummygum team working on Martin Garrix
Yummygum team working on Martin Garrix

Website concept

Uncovering the three layers to Martin Garrix

If you know anything about us a digital agency it's that for every project we take on we aim for stunning visuals to be the absolute minimum. So was the case with the Martin Garrix website. However, we saw an opportunity to do more than that. After a few creative team session we landed on a concept for the website that would incorporate the existing Martin Garrix brand while meeting the audience's needs and desires. The concept was: 'Layers' — The three layers to Martin Garrix.

All content would trickle down to either layer 1: 'On stage', layer 2: 'off stage', or layer 3: 'Martijn'. On the website this would feel as if you would peel of layers and get closer to the person behind the boards or the wheels of steel as you would scroll down. Each layer would get its own designated style alteration, typeface and color hues. On top of that we incorporated the concept of layering through masks. The three layers also touched on the brand value we were given by the client.

Layer 1: The On Stage layer represents Martin Garrix; the icon & the artist performing on different stages around the word. Impressive amounts of fans and perfectly coordinated stages and light shows are well represented in this layer.
Layer 2: Off Stage represents Martin Garrix from the moment he steps off stage. Martin Garrix becomes Martin, approachable and socializes with is friends/artists and fans.
Layer 3: The deepest layer is all about Martijn; the essence of the man that is the artist Martin Garrix. Stripped of all glitter, glamour you find Martijn in his purest form. A person who get's inspired by the world around him, having fun, being more vulnerable. This is what sparks and fuels his creativity.

Wireframes

Layer concept through layout

The wireframes went hand in hand with the layers concept. While creating wireframes at a low fidelity we paved the way for motion animation opportunities at a later stage. For example ways visitors would transition from one layer into the next, especially on the homepage.

Analytics insights of the old website showed us how significant the amount of mobile visitors was. Because of this we knew we had to pay close attention to making sure our proposed desktop layouts would also work on a smaller viewports.

Consistency

Immersive navigation

One of the many creative ways to turn the website into an immersive experience was to go all out on the navigation. Rather than having an ever present set of menu items we chose to go with a full screen navigation. Of course with just the right amount of animations.

Templating

Telling a story in a consistent way

While the Tour page and Music page would give fans a clear overview of tour dates and new releases, their respective detail pages would go into depth. For these pages we create two templates that would enable the content creators, through a CMS, to tell the story of a new music release or an upcoming tour or event in a consistent way . Both on desktop and mobile.

Visual design for the Martin Garrix website.
iPhone visual design for the Martin Garrix website.

Development

Turning complex design idea into reality

To be able to make the website experience work in code we needed a solid foundation. The designs required multi-directional scrolling and plenty of parallax scroll animations to enhance the concept of layers. We suggested a state of the art tech stack (including Next.js, Preact, GSAP, ScrollTrigger, Prismic) that would allow us to turn the incredibly complex design ideas into reality.

Yummygum team working on Martin Garrix
Yummygum team working on Martin Garrix
Yummygum team working on Martin Garrix

Before-and-after

Presenting: The new official MartinGarrix.com

With the new website Martin Garrix fans from all over the world are provided with everything they could wish for. From new music of music video releases, the story behind them, a glimpse of the person behind the artists to, wrapped in an unforgettable website experience. All of this while staying true to the Martin Garrix brand. A side by side comparison shows exactly that. Go to the official Martin Garrix website and lose yourself in the world.

Looking for an unforgettable website experience yourself?

Want to learn more about our process or how we can create an unforgettable website experience for you? We'd love to know more about your business and help you and your team take your website to the next level.

Get in touch