Connecting a world-class music artist with his fans through an unforgettable website

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

Introduction

With popular songs reaching close to a billion streams in total, DJ, and music Dutch producer Martin Garrix' name and brand ring a bell to most people.

Although the official Martin Garrix 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.

They approached us to create a new website and bring it to the next level.

Martin Garrix logo

Challenge

After taking over the world with his music, it was time for his website to catch up with his success; To create an environment for music video releases, a glimps of the person behind the artist, all wrapped in an unforgettable website experience while staying true to his brand.

Deliverables

We delivered an awesome website where fans can get to know 3 sides to Martin Garrix, together with an environment to discover new releases and upcoming shows. Our codebase was setup flexible, combined with a CMS to give the Martin Garrix team freedom to create their own content. This allowed the website to stay up to date with Martijn's dynamic lifestyle in a consistent manner.

Behind the scenes

Here we'll break down the pieces of the puzzle we connected to create the website.

Unpacking our UX tool belt

We kicked off 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.

Brand Concept

With Martin Garrix already being an established and matured brand, the client's style briefing and preferences were pretty straightforward. Our main focus revolved around breaking the Martin Garrix brand out of the electronic dance music genre confinements and create a totally unique feel. 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 three layers concept; from world class performer to Martijn

If you know anything about us as a digital agency, it's that for every project we aim for stunning visuals to be the absolute minimum. So was the case with the Martin Garrix website and we saw an opportunity to go beyond the obvious. 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.

Transforming wireframes into design; 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.

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.

The UX team always thinks everything through in a lower fidelity in order for the visual design team to be able to focus completely on making that pretty. Here you can see how this transformation takes place.

Turning complex design into real code

In order to bring across the designed experience as accurate as possbile with a working website in code, we needed a solid foundation. Supporting the complex animations, multi-directional scrolling and plenty of parallax presentations aimed to enhance the 3-layered concept, we suggested a state of the art tech stack including Next.js, Preact, GSAP, Scrolltrigger, Prismic. This allowed us to turn the incredibly complex design ideas into reality.

The impact of our project

With the new website, the Martin Garrix brand transcends out of the confinements of a music genre and, just like in his music productions, created a league of its own. It offers a great extension of the Garrix experience fans know and love from the shows and music.

Easily build unique content for each tour or event

With a CMS that was set up just right, the team at STMPD is able to create custom content with a few clicks for each new show or event. Sharing the excitement before a show is now even stronger. Our responsively build pages translate amazing to any device and give you an immersive experience anywhere.

Make your project our next obsession.

Let’s talk

We can't wait to talk about your ideas, goals, needs and dreams. Let's set up a call.

Start a project