The Client

A Bad Think is a musical project from career producer and musician, Michael Marquart. Marquart received a Grammy nomination in 2020 for his 5.1 surround sound album “The Savior,” in the Best Immersive Audio Album category. The prolific singer-songwriter-producer mixes whiskey-bar vocals with poignant lyrics and ambient, three-dimensional audio production. “Lifelike” was the follow-up album, and the first to be released in Dolby Atmos. Marquart’s studio album “X” signified his tenth overall, and was released August 2022. In promotion of that album, we ideated and executed an exciting stunt marketing campaign.

The Goal

As an agency, we had been working with A Bad Think for quite some time - since we first engaged in 2019 with the album that we helped get nominated for a Grammy Award in the Best Immersive Audio Category, The Savior. When his new album, X, came around in 2022, we were asked to try something fresh, new, and exciting! Our mandate was to think of something creative to celebrate this being the 10th album (hence its title) and honor the longstanding career of Michael Marquart that preceded this. Of course, the tangible goals were to increase new listenership, boost engagement with existing fans, and attract Grammy attention from the voting committee. But we were also excited to just think of something no one’s ever done before and generate some buzz around it! It took a few ideation sessions, but we finally settled on what we would propose: a scavenger hunt.

The Strategy

We were just coming out of the Covid-19 lockdown - with many countries still on restrictions - so our first instinct was to see what was working for other artists in this new reality. Traditional music marketing involves in-person events and tours, especially if you’re looking to garner Grammy attention. But if in-person is out, how do we still engage audiences?

A “north star” for our inspiration was Steven Wilson, prog rock English musician with a passionate following for his genre-bending musical talents and proclivity for high-quality immersive sound. For his solo album release at the time, his team set up a microsite that was an immersive virtual shopping experience. Especially given that our client’s music was mixed and mastered in Dolby Atmos, the ultimate immersive audio format, we decided to lean into this concept of “digital immersion” - both in terms of auditory and visual experience. Combine that with the knowledge that everybody loves free things, we decided we would gamify the immersion and create an online competition that would reward fun prizes to fans.

The inspiration behind the name of the album, X, came from its being the tenth album of Michael’s career - but also the existence of an “X” he discovered carved on a sidewalk near his home. Learning that tidbit got us excited about a scavenger hunt, wherein our audience would find the album, X, at the end of the competition (X Marks The Spot!).

Our strategy snowballed from there - we looked at domains that we could purchase to create this unique microsite (.site was available and a better domain than .spot), and we researched ways to make a scavenger hunt “digital” rather than “physical.” One of our team members recalled a trend on TikTok where artists were sharing their “infinite zoom” pieces like this one - and inspiration once again struck. If you can’t dig through real-life bushes to find a hidden treasure, how else can you “dig”? Well, by peeling back an online world-within-a-world.

A bit more research took us to ZoomQuilt, an infinitely zooming art that’s been on the internet since 2004, and we had our answer for the best way to deliver an online scavenger hunt in one place!

The Challenges

As one might expect with a unique idea like this, the biggest challenge we would face was “we don’t know what we don’t know.” No one else had done something like this before. Sure, there were a few versions of infinite zooming art, either online or on TikTok. But as far as we could tell, no one had made that art interactive, featuring clues and puzzles and challenges designed to be found and played. We were ultimately merging two concepts together: a great piece of art to look at, with an embedded competition demanding user participation.

We approached these uncharted waters step-by-step. We needed an artist that could accomplish creating a unique zooming art, featuring references and call-backs to the artist’s life and career. We vetted a few artists from Behance, and worried that we wouldn’t find a person with the right skills and enough availability to create the art (and at our price point) as many artists balked at the sheer scale of the art we were looking for. Until finally, we lucked out and met @knotpaolo, an impressive collage artist with a zeal for the surreal. We communicated what we were looking for, and it was something he had never done before - so he was thrilled to work with us! With detailed creative briefs for every frame of the zooming infinite art, we collaborated over the span of 8 weeks to produce all the art to be featured.

All the while, we worked to create the “challenges” part of the zooming art. What exactly counts as a puzzle to fans of immersive audio music? Our client’s biggest fans are audiophiles who appreciate high-quality Dolby Atmos music, who all come with a set of specific skills and qualities - i.e. knowing what a WAV file looks like, and how to differentiate sounds coming out of different speakers. We worked with ImmersiveAudioAlbum.com’s head of audio, Jonathan Cornell, and Deviate Labs’ own head of technology, Cameron Tham, to create audio-specific, tech-specific puzzles and challenges that could appeal to audiophiles.

This was definitely easier said than done. The real challenge with creating challenges is that you never want to make them too challenging. Otherwise, you risk discouraging and disengaging users. We went through many iterations of challenge creation, even modifying several after we had already gone live so that we could include hints and make certain puzzles easier to solve.

Another challenge we faced was deciding on and securing the right prizes to incentivize engagement amongst users. We wanted to use the prizes as a way to continue promoting our client and his music, but also knew that the average consumer wants high-value prizes as well. We chose to have a mix of various prizes depending on how many challenges people won - there was no single winner or prize, but a variety to keep everyone hopeful!

In addition to these competition logistics, the biggest challenges we faced were on the technical side. And our fantastic tech team have always been eager to meet (and solve) new challenges, which they did here with alacrity. Read on below for more specifics on these challenges:

Page speed

We made the site with the React library, which lets you build complex front-end websites. React works by sending a bundle of javascript to the client containing instructions on how to render the site into html. This has the drawback of taking a few extra seconds to load before the user can interact with the site.

To get around this, we used NextJS, a framework built on top of React that pre-renders the website before serving it. So instead of the client receiving instructions on how to render the html, it receives the actual html itself (plus a bundle of React code). The client can immediately display the html while it executes the React code. Once the code finishes running, it connects to the pre-rendered HTML and then you get the best of both worlds — the lightning-fast loading of a static html page, plus the complex interactivity of a React page.

NextJS also does a lot of other optimization work by default:

• minifies both JS, CSS, and HTML
• tree shaking (removes unneeded libraries and code)
• inlines core css (to display above the fold; the rest of the page's css loads later)

To deal with the large image sizes, we resized each image into four sizes (500px, 1000px, 1500px, 2000px) and then loaded the correct one based on the viewport size. Unfortunately, this was still a lot of data, especially when combined with the Canvas-based game engine we used (PixiJS, lightweight but still several hundred kb). We ended up having to implement a loading bar so users would at least know how close the site was to being ready.

Except for the homepage, all our pages scored 90+ on Lighthouse Page Speed Insights. If you've ever tried to optimize a website for Lighthouse's audits, you'll know first hand how big of an achievement that is.

Zoom direction

The infinite zoom works something like this:

• Image 1 shown at 50% scale,
• Expand image 1 slowly,
• When image 1 reaches 100% scale,
• Insert image 2 above image 1 at 50% scale,
• Start expanding image 2.

Repeat this 20 times, and you have one iteration of the infinite loop, in zooming-in mode. Once you run out of fresh images, you recycle the old ones by resetting their scale and changing their z-index (which controls which image gets shown if two images overlap)

However, if you're running the loop in reverse (zooming out of the image instead of in), you have to do it like this:

• Image 1 shown at 200% scale,
• Shrink image 1 slowly,
• When image 1 reaches 100% scale,
• Insert image 2 underneath image 1 at 200% scale,
• Start shrinking image 2.

Even with just this pseudocode, you can see that zooming out isn't as simple as just running the zoom-in animation in reverse. In fact, the actual code doesn't have a single "animation" — each image is animated independently of the others, and it only looks like a single animation because all of the timings are carefully calculated to be just right. It's an intricate illusion and changing from zoom-in to zoom-out required a near-total rewrite of the core animation logic.

While writing the code for the zoom, we discovered an interesting phenomenon: scaling an image at a linear rate creates the illusion of changing speed. Check out this demo to see what we mean. On the left is an image that's scaled at a nonlinear rate to simulate a constant speed, while on the right the image is actually scaled at a linear rate but appears to slow down the further you zoom in.

Scavenger hunt UX

The initial version of the infinite art had clickable objects but no indicator that they could be clicked. We built it like this because we thought users would enjoy the challenge, but we ended up having to make it easier since people were struggling to find the objects. So we did the following:

• Added a static blue glow to each clickable object by editing the raw PNG images directly,
• Added a pulsing gold hotspot to the center of each object,
• We couldn't use HTML since the infinite art is done with Canvas,
• We created the hotspots out of PixiJS Graphics primitives (squares, lines, circles, etc),
• Animated with Greensock.

These improvements resulted in a 10x increase in objects clicked, a testament to the power of good design.

Database management

We built the database with Strapi (a headless content management system). Strapi also supports user accounts (users can register and sign in, etc.).Strapi lets you define whatever fields you want on each datatype, so for xmarksthe.site, we just added fields like

challengesCompleted (an array of the challenges that the user had solved)

challengeUnlocked (an array of the challenges that the user had unlocked)

and so on.

All in all, from start to finish, our design and development took about 2 months to get everything into production and ready for inbound traffic, with a lot of behind-the-scenes work to get it looking infinitely smoother.

The Results

Our xmarksthe.site campaign ran from August 1 to October 15, 2022, and yielded impressive results despite various challenges along the way that necessitated adjustments - such as lowering the difficulty of certain challenges, making the hidden objects in the scavenger hunt more visible, offering hints to encourage more engagement, and optimizing our ad targeting to users most likely to participate in the challenges.

With a total promotional spend of $2,500 (not including the dev and designer costs paid by our retainer agreement), the campaign achieved significant engagement and exposure. Meta Ads, costing around $1,500, along with a $1,000 investment in a Puzzle Effect email list, resulted in a global reach of approximately 88,642 unique visitors over the campaign period, with a notable spike occurring in the final two weeks following an extension of the campaign's end date. This influx brought in 20,000+ additional visitors in those final two weeks alone, emphasizing the campaign's growing momentum and the importance of adding urgency and time-scarcity to competition-based campaigns.

The campaign's impact extended beyond mere visits. It garnered 1.2 million ad views on Facebook, with an additional 102,900 views and 4,400 likes on TikTok, thanks to a targeted influencer collaboration. Out of the total visitors, 2,731 were returning users, and 600 registered their emails, resulting in a cost-per-lead of $12.50. Engagement was high with 2,058 challenges unlocked (an average of ~3.4 per participant) and 1,203 challenges attempted, showcasing the interactive appeal of the experience. The challenge completion rates were particularly striking: 366 users completed at least one challenge (over half of the participants), 34 users completed five or more, and six users achieved the impressive feat of finishing all ten challenges. This level of interaction underscores the campaign's success in creating an immersive, engaging experience that resonated deeply with the audience.

The TL;DR

In the world of growth marketing, we dare to take risks. With our xmarksthe.site campaign, we helped Grammy-nominated musician Michael Marquart, known for his musical group A Bad Think, boost his fanbase with an innovative online scavenger hunt that demanded participation while simultaneously honoring his career and past works. Running from August 1 to October 15, 2022, the campaign attracted 88,642 unique visitors, garnered 1.2 million ad views, and generated 600 high-quality leads. With a total promotional spend of $2,500, we achieved a cost-per-lead of $12.50. Engagement was high, with 2,058 challenges unlocked and an average of 3.4 challenges attempted per user. The competition campaign's success in creating an immersive digital experience led to significant fan engagement and heightened visibility for Marquart's tenth album, X. Not to mention, it resulted in a great work of digital art that will live on at xmarksthe.site. Check it out now!