Our friends of MrBeast called us. It was big, they said, they were to lead the new merchandising campaign for MrBeast, and we were to design and develop the store front where his huge fanbase would shop.
With almost 200 million followers across social channels, we knew we could handle traffic, but we had never handled as much as MrBeast would bring.
Keeping the site up was not an accomplishment in itself. We needed to give every visitor a delightful shopping experience. A first-class experience in terms of design and performance, with fun mini-games to make it feels like a MrBeast video, and most importantly, direct users to buy.
WE TOOK IT TO THE LAB
While designing the site, we had both concrete requirements and more abstract ones. The client proposed us a sitemap and content structure, but we had to come up with fun stuff: “we want people to have fun on the site”, they said.
“We added a layer of entertainment while keeping the BUY flow as the star of the show.” - Mateo Zaragoza - Designer
After sessions of brainstorming, Lambo Jump was born: an infinite runner with similar mechanics to Google’s famous "No Internet Connection T-REX Game", but with MrBeast style.
We also knew that we couldn’t compromise the site’s performance because of this, so we loaded Lambo Jump’s JavaScript right when the user pressed the “PLAY” button.
“An arduous task; from development, testing, debugging, and solution architecting; each feature worked on a required prior analysis to assess its impact on performance. Having the MrBeast team with strong QA helped us achieve greatness.” - Nacho Mandagaran - Developer
The game was a huge success, with MrBeast fans sharing their scores on Twitter, and some of them even shooting YouTube videos about their experience playing it. What’s your high score, btw?
Lambo Jump
While Lambo Jump was a good idea, we wanted something more. Inspired by the “Cookie Clicker” game, we came up with “Slap to Win”: a game where visitors would “slap” members of the MrBeast crew. They loved it, and they suggested the rewards could be actual products! This was a perfect way to engage visitors: a fun little game that had real rewards to redeem.
Social Media
OUR BIGGEST CONCERN
Tech-savvy folks could hack it (which they did), but we were giving away real products! We couldn’t just give away real stuff to hackers. We raised this issue to the MrBeast team and suggested putting in some rules to the game: prizes would only be redeemable alongside other purchases, and you would be able to redeem only one prize per purchase.
We solved the game’s logic server-side. With the help of Shopify’s Admin API, we created discount codes for the products that users redeemed, and luckily for our developers, Shopify’s Discounts API has fine-grain controls that allowed us to set rules exactly as we wanted to.
DEVELOPMENT & PRE-LAUNCH
Vercel, Shopify, Axiom. These tools were the heroes of this story.
Vercel not only helped us iterate faster and deliver the site to all of our users; their Customer Success team worked alongside us to make sure everything was set up correctly from our side and theirs. MrBeast's team asked us if we’d be able to keep the site up despite all the traffic (and the unpredictability of it), and we relied on Vercel to do so. We actually set a record on the Vercel platform for the most requested site in the span of a week. Scary stuff, but still, a great achievement!
Shopify is our go-to e-commerce provider, and their wide range suite of features covered all our needs. We leveraged their Storefront API, with a library built by us to connect to it in a type-safe manner: react-dropify. They served all of MrBeast’s traffic just fine!
Axiom is a newcomer to “the basement stack” ™. They provide observability at scale, which allowed us to monitor everything that was happening on the site at all times.
We created a “Launch Dashboard” which observed different metrics and errors and gave us the confidence to know everything was fine.
THE BEAST & 100 MILLION SUBSCRIBERS
Nerves? Nah, we’ve got nerves of steel. Remember that thing we say about making cool sh*t that performs? This wasn’t any different; we were ready, but let's not talk too much and allow our work to speak for itself.
Company Info
We’re a boutique studio with a committed team working on selected projects for startups and companies, bringing what they envision to life through: branding, visual design & development, motion and 3D of the highest quality.
We’re a small team of like-minded individuals whose purpose is to create visually compelling and non-standard brands and websites, focusing not only on their looks but also on their performance.
As we like to say: we make cool sh*t that performs.