fbpx

METALLICA —

A definitive content, community & commerce platform for one of the all time best-selling rock bands.

Pattern-Metallica-Marquee

THE CONTEXT —

Preserving a legacy while designing dynamically for the still-being-written future is a huge task for anyone to take on. With over 40 years of archives, thousands of performances, millions of active fan club members and a still expanding catalog of original music, media, live entertainment experiences, brand partnerships and merchandise, taking on this challenge for Metallica was one of our most challenging engagements ever, but also one of the most rewarding.

TECHNOLOGY PLATFORMS  —

Salesforce Marketing Cloud
Salesforce Commerce Cloud
Amplience
Algolia

 

IMPACT —

+180%

200%

200%

200%

+45%

200%

200%

200%

+62%

10%

10%

10%

Overall revenue

Increase in
conversion rate

Increase in
conversion rate

Increase in
conversion

Overall AOV

Increase in
conversion rate

Increase in
conversion rate

Increase in
conversion

Overall conversion rate

Increase in average order value

Increase in
average order value

Increase in
average order value

Increase in
AOV

+187%

30%

30%

30%

+42%

30%

30%

30%

+66%

30%

30%

30%

Mobile revenue

Increase in mobile revenue

Increase in
mobile revenue

Increase in
mobile revenue

Increase in
mobile revenue

Mobile AOV

Increase in mobile revenue

Increase in
mobile revenue

Increase in
mobile revenue

Increase in
mobile revenue

Mobile conversion rate

Increase in mobile revenue

Increase in
mobile revenue

Increase in
mobile revenue

Increase in
mobile revenue

AWARDS & RECOGNITION —

AWARDS & RECOGNITION —

awwwards
cssda

"Pattern has been nothing less than a perfect partner. I think that I can speak for all of us when I say that it was an absolute pleasure working with everyone on your team, and we are thrilled that people are finally able to see your work."

Dan Nykolayko
Director of Digital Content
Met Club & Metallica.com

Pattern-Metallica-iPhoneISO

THE ASK —

As the world of Metallica expanded over the years into almost every possible vertical and media type, the band and their team turned their attention to their digital presence. Part historical archive, part fan club, part store, part publishing platform and part band outlet, the structure and UX had been stretched to its limits and was hindering the bands ability to share, publish and communicate at the pace they desired.

With multiple collaborations and a rumored new album on the horizon, the time was right to take the existing site down to the studs and completely rethink the entire experience from top to bottom. Metallica's team challenged us to break some rules and go big to create a world-class destination that showcased their past and present while while giving the band a modern digital canvas for the future.

KEY ACTIVITIES —

User & Customer Research
Content Strategy
Information Architecture
UX Design & UI for Salesforce Marketing Cloud & Salesforce Commerce Cloud
Design Systems
Interaction & Motion Design

Pattern-Metallica-FullPageDesktop1
Pattern-Metallica-Double-Left2
Pattern-Metallica-Double-Right2
Pattern-Metallica-Double-Right

OUR APPROACH —

We kicked things off at the bands HQ, talking with their team and taking a deep dive into the technology, operations, logistics and data to get a 360 view of the global Metallica operation and how the band runs its enterprise. We also conducted an in-depth analysis of user behavior data on-site across various journeys including navigation, merch shopping & digital downloads, fan club sign ups, giveaways, contests, streaming and video traffic and used the insights to build a set of KPIs and goals to measure success.

Stepping into the realm of design, we began exploring UX design models and visual UI styles that served two main purposes — scalability across every type of content, product and language imaginable, and a design style based on Metallica's core visual language that felt both modern and timeless without being tied too closely to one era or release.

Working directly with Metallica's leadership team, we evolved our initial concepts into a set of high level page templates and design system components that were wireframed, iterated, designed and prototyped in an extensive process to ensure that each interaction was intentional and that the whole of the system could power everything that exists today while being flexible enough for anything that might come in the future.

Pattern-Metallica-StyleGuidePages
Pattern-Metallica-mobileScreens@2x

KEY CHALLENGES —

Metallica fans love digging into and exploring every aspect of the history of the band - no piece of information is too small or nuanced. Based on that, a key goal was creating an experience where every type of content was linked relationally in every context.

That meant that every song, show, set list, album, image, video, tour poster, live recording and product had to be connected with each other by metadata that includes release date, release type, category, media type, date last played, location last performed and the total number of times a song has been played live. As the Pattern team designed each aspect of the experience and its interactions, the Amplience team worked with Metallica to transform everything into atomic content models and create the content relationships necessary for it all to work together. It's the largest, most complex and most deeply interconnected content model we've ever worked with.

Additionally, the band retains all rights to all of its music and live performances and records all of it, making it available for purchase only a few weeks after any given show. So a seamless connection between content and commerce - connected via a custom Salesforce Marketing Cloud and Commerce Cloud implementation - was necessary in order to let fans easily find and purchase the recordings and live videos of their favorite shows.

Through a system of powerful dynamic filters, advanced content model definitions, contextually-driven UX and globally scalable design components, we were able to design an experience that provides the best of both worlds: easy to find the exact thing you want, but fun to get lost in the history and the lore of one of the most successful musical acts ever.

Pattern-Metallica-Double-Left
Pattern-MetallicaTourFilter-LocationSelected
Pattern-Metallica-ConcertDetail-quickview
Pattern-Metallica-Double-Photos
Pattern-Metallica-Double-TourDates

WE'D LOVE TO LEARN MORE ABOUT YOU—

Let's explore new ways of working together. Get in touch and start your next project with us today.

PROJECT HIGHLIGHTS — 

Seamless connections to content, community and commerce to enable real-time fan interactions and instant purchases via Salesforce Marketing Cloud and Commerce Cloud

Digitally-native design system for the Metallica brand that scales and flexes with each release & era

Ability to find, explore and share any piece of content the band has in its archive going back over 40 years

Updated content publishing and personalization through refreshed editorial design and Amplience implementation

Immersive album and song detail pages that tell the story of each release and feature detailed credits, live performance counts, tour data, detailed notes from the band, and more

All around badass design and UX

Pattern-Metallica-FullPageDesktop2
Pattern-Metallica-Double-Left-3
Pattern-Metallica-Double-Right-3
Pattern-Metallica-Navigation_Mega-Menu
Pattern-Metallica-Navigation_Shop-Dropdown
Pattern-Metallica-Navigation_Band-Dropdown
Pattern-Metallica-Navigation_FansDropdown
Pattern-Metallica-Navigation_MediaDropdown
Pattern-Metallica-Navigation_News-Dropdown
Pattern-Metallica-FullPageDesktop3

LET'S TALK —

It's time to make something great together.

Pattern-Metallica-LifestyleBreaker@2x

Visit us:
2611 Eighth Street

Berkeley, CA 94710

Talk to us:
Let's make something awesome together.

Get in touch —

Talk to us:
Let's make something awesome together.

Get in touch —

Talk to us:
Let's make something awesome together.

Get in touch —

Talk to us:
Let's make something awesome together.

Get in touch —

Talk to us:
Let's make something awesome together.

Get in touch —

Work with us:
Join a culture of stoke, diversity & inclusivity.

We're hiring —

Work with us:
Join a culture of stoke, diversity & inclusivity.
We're hiring —

Work with us:
Join a culture of stoke, diversity & inclusivity.
We're hiring —

Work with us:
Join a culture of stoke, diversity & inclusivity.

We're hiring —

Work with us:
Join a culture of stoke, diversity & inclusivity.

We're hiring —

Copyright © 2018-2021 Pattern Design, LLC. All rights reserved.