The importance of storytelling in a customer experience.

Across the web, there are thousands of websites competing for consumer dollars. And every day, something new pops up to sell them the next great thing, from clothes and accessories to games and collectibles. It’s nearly impossible to keep up with it all—let alone compete with it. Which is what drove Warner Brothers (WB) to get in touch with JK.

They came to us looking for a design system that would help them create a consistent (and engaging) look and feel across all of their global ecommerce sites. But as we gained a thorough understanding of their position in the market, their ambitions for the organization, and the opportunities for improvement within their customer experience, we discovered a deeper need at the heart of their ask—a reinvigorated customer experience that would help them stand out in a very crowded space.

First things first: finding the whitespace.

We began by digging into the dozens of WB intellectual properties (IPs) to get a sense of the commonalities or differentiators that would help them rise above the noise—no small feat with the number of IPs in their portfolio. Ultimately, we discovered the single, powerful thread that ties each one together: Fandom.

Being fans of the different WB properties ourselves, we share the inherent human desire to be closely connected with stories we have come to love. Talking about our favorite characters and immersing ourselves in their worlds. Proudly displaying our posters, and figurines, and coffee mugs, and shirts. And sharing that love with other, like-minded people.

And so our mission was to create a new and immersive customer experience that would enable the connection between fans and fandoms.

Asking the right questions.

We worked closely with the teams at WB to define what that connection might look like in the form of an ecommerce site. 

We considered how we might bring to life the worlds the fans are so passionate about and how we could leverage new content from each property to expand those universes. Most importantly, we considered how we could do all of that within one universal design system that would work across each of their individual sites.

Our approach was to transform the typical ecommerce experience into a story-driven customer journey by speaking our fans’ language and giving them a place to shop online that would mimic a themed shopping experience at a brick and mortar store. We’d give them the opportunity to immerse themselves in their favorite worlds and share their excitement with others. 

This was not going to be another out-of-the-box e-commerce website. This would be a fandom destination.

A design system grounded in insights.

As we got to work on the design system, we focused on a few key insights to keep us on the right track:

1. Storytelling is the key to differentiation.
2. Fans will seek out new experiences connected to the properties they love.
3. Shoppers will spend more time with an engaging customer experience.
4. Fandoms cross over, so there will always be opportunities to encourage exploration.
5. The expected solution isn’t always the right one.

In general, when developing a design system, it’s important to look at the entirety of the digital product—whether it’s an app, utility, or website—and find the common pieces that can be used as the foundation for the overall experience.

Christopher Holewski, JK’s Creative Director of UX, explains the unique process at the start of every design system: “Typically we define the brand colors, font styles, button styles, and any other common components that will be used across the entire website for a consistent experience. However, since this system needed to work for dozens of different properties with dozens of different visual identities, we had to take a different approach. 

We started by looking at what types of stories we wanted to tell—regardless of the IP. Then we mapped out the story beats from the top of the page—where you first grab a fans’ attention—to the bottom of the page, defining the storytelling experience and weaving in different opportunities to discover and explore throughout. We also made sure to incorporate areas for different types of calls to action that would keep the visitor engaged and scrolling.”While not the typical approach to building an ecommerce design system library, we felt it was the best way forward to create an authentic customer experience with a contextual relationship between the stories and the merchandise.

Strategically developing the components.

With our approach firmly in place, we began to develop the design system. We created interchangeable, themed components that could be tailored to the style of each IP. For example, Game of Thrones has a darker, grittier aesthetic than something like Looney Tunes, which is colorful and a bit chaotic. Creating adaptable and flexible design components was a huge priority for us because it took the guesswork out of creating a page architecture that would allow art teams to stay on-theme while also maintaining a consistent experience across IPs. 

As different as each property looks, their stories are just as varied. So by using these customizable components, each team can really set their attention on crafting unique narratives that speak directly to their fans. 

“Of course, many of the pages focus on the products. But we wanted to make sure that the components of the design system worked equally as hard on pages that showcase more story-driven content—such as trailers, behind the scenes footage, character profiles, and more. We also put high value on the opportunity to use headlines and call to action text as a way to further tap into the voice of the movie or show and ensure an authentic experience for fans shopping in their worlds,” says Christopher. 

Again, this is not the standard approach to this type of engagement. But the further we got, the more strongly we felt that this was going to be the key to unlocking an authentic and unique ecommerce experience for WB fans of all shapes, sizes, and fandoms.

A collaborative and fruitful partnership.

Throughout the entire process, the teams at WB were highly collaborative and involved every step of the way. They trusted us to guide them through a shift in mindset—one where we focused on narrative and put products second. It was refreshing to work side-by-side with client-side marketers and creatives who were equally as enthusiastic about the new story-led approach as we were. 

“It’s really exciting to see how the WB team has taken the design system and used it to promote featured properties. Their team was able to build a brand new landing page and merchandising experience for the Day of the Dragon to promote the upcoming Game of Thrones spinoff series, ‘House of the Dragon.’ It’s great to see that all of the thought and hard work we put in early on is paying off—enabling WB to expand their online shopping experience and give their fans what they need” adds Christopher.

At JK, we believe there are always more stories to be told—whether you’re a major ecommerce retailer, a B2B service provider, or somewhere in between. To learn more about how we work with brands like yours, take a look at what we do and who we’ve done it for.