From IRL to URL: Creating Immersive Digital Experiences For A Global Audience With Complex Networks

complexland

Imagine two days of streetwear pop-ups, live shows and performances, appearances by fashion and music influencers, exclusive product drops and releases, and gourmet tastings held in an iconic venue. It's impossible to experience everything—and that's part of the draw.

ComplexCon, brought to life by the modern entertainment company Complex Networks, has delighted millennial and Gen Z audiences since 2016. This highly hyped, multisensory convention merges pop culture, commerce, and community to create big impact for brands and attendees. 

The pivot

Then 2020 happened. With physical experiences of all kinds being delayed then canceled due to the COVID-19 pandemic, Complex Networks needed to adapt. The media company reached out to Jam3 to create a new immersive digital experience. They wanted to create a virtual environment where attendees could explore, consume, engage with brands, and have fun.

ComplexLand was the solution: a single-player, browser-game experience with commerce at its core. William Chen, Technical Director at Jam3, reached out to Shopify Plus agency Riess Group connected with Founder Mike Riess of Riess Group to strategize how to create a seamless experience without compromising on its core functions. With many of the featured brands already selling through Shopify storefronts, the team decided to explore what capabilities, endpoints, and services they could leverage from Shopify's platform. 

"One concern we had was can we make this work in a way that we're not duct taping it together," says Agency Founder Mike Riess.

Can it withstand extremely high volume? The brands involved here are high-profile, so it has to work seamlessly the first time. It's not like we can roll out an MVP and see how it goes for three months and then continue to build on it. We have three days and it has to work perfectly every minute."

The plan 

Rather than linking out to various Shopify storefronts, the team agreed to keep users within ComplexLand as much as possible. The Storefront API would be the main point of integration, pulling in data for products and their descriptions. Only when users decided to check out would they be linked to the Shopify checkout page to complete their transactions. Shopify's platform would therefore handle payment processing and the related security concerns.  

As a Shopify Plus agency, Mike and his team were familiar with the Shopify admin, and conceptually envisioned ComplexLand as a channel like the Online Store. Even if brands had products listed in both their individual storefront and ComplexLand, the team didn't worry about whether or not the inventory was correct because Shopify's platform managed it. 

"We're aware Shopify is a developer-first platform," Mike states.

It's not a platform that has also tacked on some APIs but has really been built, and continues to be oriented toward the builders and creators who use it. Shopify absolutely is going to scale with you—they can take pretty much anything you can throw at the platform. And it's actually architected in such a way that we can do something like a headless build when considering ComplexLand, as a channel of sorts."

The process

In order to connect between the managed Shopify stores and CMS that handled ComplexLand, Riess Group needed to build a tool to aggregate and filter an incredible amount of information. Andrés Smerkin, Riess Group's Lead Developer, tackled the task of building a unified API. This centralized hub would connect the Shopify stores, validate all calls received from Shopify, process that information, and duplicate it for ComplexLand. This meant ComplexLand could be sure they were receiving data only once and not sending data multiple times, which could overload the system. 

The API, coined SPS for Shopify Proxy Service, worked to filter the entire Shopify ecosystem, only providing the ComplexLand CMS with the data it needed. Built for speed, the SPS received information almost in real time. With its help, ComplexLand could manage a high volume of orders with very low latency. It was a lot to manage but achievable. Andrés used Shopify's schema to add information to products and orders in a way that worked well for ComplexLand to then identify and filter. That extra layer of information in the Shopify to SPS connection wasn't palpable for ComplexLand attendees, and it enabled the inventory and product management to run smoothly. 

The peril

With so many limited-edition products and hyped releases, the team knew they needed to tackle bot attacks head-on. They wanted to ensure regular attendees would get access to products before exploiters could clean out limited inventories. The team created a CMS flow to orchestrate the product data that needed to be displayed on the front-end without exposing the product ID. After a product drop happened, attendees needed to opt in for their intent to purchase then were added to a queue. That way, the team could select who in the queue would receive the private product ID, shared using a WebSocket. 

The payoff

The result of the thoughtful approach to creating the headless build: Jam3, Riess Group, and Complex Networks successfully pulled off a boundary-pushing, future-forward virtual convention. Throughout the five days, 174 different countries experienced ComplexLand with 1.3 million total brand and commerce-related engagements. Some brands completely sold out of their inventory. Overall the event was a hit, receiving positive press and attendee feedback.

Leveraging Shopify's platform helped the team cost-effectively and efficiently plug commerce into this digital landscape. "Shopify helped us make sure our strategy was going to work both from a velocity standpoint and for checkout, inventory issues, bots, and queuing," says Mike. "We had really expert advice from Shopify to make sure the event was a success. It was a great collaboration."

Making the decision to use a headless architecture directly contributed to the event's scalability and performance. The team was able to quickly spin up a serverless infrastructure, leveraging multiple APIs to manage a large amount of information and traffic—without compromising the attendee experience. 

The gamification of the experience paid off too. Attendees were engaged, exploring the 3D map to discover and compete for exclusive product drops, while brands were promoted in a uniquely digital way. William from Jam3 agrees: "I think one of the highlights from ComplexLand is that a great shopping experience is at the same time entertaining and engaging. It connects users to a community with similar interests. The event gamified community-centric shopping experiences and showed us what those could look like."

The prophecy

Born out of necessity but met with resounding applause, innovative and experiential solutions like ComplexLand are here to stay. In fact, the future of the event could benefit from what happened in 2020. "Now it's more like, how do we bring it full circle and have both IRL and URL living simultaneously and seamlessly," says William. "So next time, we might have ComplexCon on top of ComplexLand. Having a more unified front to orchestrate the experience both virtually and physically is something that I'm definitely trying to do."

For Andrés, the future is unlocked by the power of new tools, "Using headless, I can build anything. I'm not limited by the classic digital store or application restrictions. I feel like now the control is back to me. And buyers don't even need a screen anymore. You can buy with just your voice." 

Having a headless platform allows brands to build for shoppers who expect a legacy storefront and for those who are excited to log in to a video game and buy products.

According to Mike, with a platform enabled for headless, both types of users can shop how they want and those experiences don't have to be two separate, cumbersome systems. He adds:

Being able to make commerce happen without the user having to go through the clunky steps that they've been doing for the last 30 years, that's the future of commerce. For us that means figuring out what steps we can remove. I think whatever is removing barriers, removing friction, and allowing customers to just shop is huge."