This essay originally appeared on Wong.Digital’s agency blog.
We communicate in stories. Storytelling has been around as long as our species has existed. From paintings on cave walls in Lascaux, to hieroglyphics in ancient Egypt, to radio dramas like “War of the Worlds” that cause city-wide panic, to the fantastical Game of Thrones television series on HBO, stories impart culture, history, information, and ideas. Stories are primal so we are receptive to them, and we remember them.
Today when we think of storytelling, we think of our modern day’s Golden Age of Television or the Marvel Cinematic Universe (“MCU”) movies. Comic-Con in San Diego is the Mecca of pop culture storytelling, and this year brought an estimated 135,000 fans from over 80 countries. Attendees packed over 2,000 panels and screenings and lined up for more than 250 autograph events from their favorite actors, writers, and artists. Fans lined up for hours, often overnight, for a chance to get into the infamous 6,500-seat Hall H where they were able to get a glimpse of their favorite star talking about their latest film or TV project. Many came to the con dressed as their favorite characters, often constructing their own elaborate costumes. That is fandom, otherwise known as brand loyalty.
What lessons for design and branding can we learn from Comic-Con and its pilgrimage of rabid fans? Storytelling has power, and design is storytelling.
In this article we’ll take the primary elements of storytelling and apply them to design, namely branding, marketing, and product design:
- Worldbuilding: Where does the story take place?
- Main characters: Who are the people we’ll care about?
- The plot: What will happen in the story?
PANTONE Colors and Worldbuilding
Stories have to exist in a self-contained universe, one that follows its own defined rules. Sometimes that world is familiar, reflecting our reality, and other times the environment is foreign, futuristic, or magical.
Internal logic is essential to building a believable world. In other words, it’s about defining the rules and consistently following them. For instance in the Star Trek universe, transporter technology exists—being able to teleport a person or thing from one place to another—but there are rules around its use. It has a limited range, i.e. you can’t beam a person from one end of the galaxy to the other; it cannot be used to or from warp-moving vehicles; and there are certain materials the technology cannot penetrate. And while there are faster-than-light-traveling vehicles in the show and aliens with extra capabilities, humans remain human and don’t have any extraordinary abilities.
I believe that branding, specifically brand identity is the world a brand builds for its customers to live in.
Target has built a world of red, white, and Helvetica. Its customers know that world and trust it. But if Target decided to suddenly throw in blue, straying from the rules they’ve consistently followed, its customers would scratch their heads.
When creating your own brand, your customers need to see consistency. They need to feel they are in the right place when they interact with your brand. Use brand identity guidelines to document your brand world’s internal logic. Every touchpoint a customer sees should have the same colors, typography, and art direction.
The Hero and the Guide
Our world has been established, so now we need characters to be in our story. All stories have a protagonist, the main character. Many stories pair that character up with a guide or mentor. For our purposes we’ll call them the hero and the guide.
Donald Miller in his book Building a StoryBrand: Clarify Your Message So Customers Will Listen, says that the hero is not the brand! Instead the hero should be the customer, and the brand should be the guide. This makes sense when you stop to think about it: customers seek out new brands to buy from because they have a problem to solve. And by playing the part of the guide, brands have the opportunity to be the mentor, the facilitator.
In fiction we all want to be the hero, not someone who is the helper to the hero. We want to be Captain Marvel who has Nick Fury to show her around Earth in the 1990s, or Luke Skywalker who is mentored by Obi-Wan Kenobi who introduces him to the ways of the Force. The guides are characters the heroes trust and look up to.
Plotting User Experience Design
All stories have a plot, something that happens. Sometimes those plots are thin, simple, or dense and convoluted. But the best, most popular stories can be distilled to a very simple formula. Miller in his book outlines this structure as follows:
- A character
- Has a problem
- And meets a guide
- Who gives them a plan
- And calls them to action
- They avoid failure
- And end in a success
Let’s apply it to one of my favorite movies, Star Wars:
- Luke Skywalker
- Wants to defeat the evil Galactic Empire
- Meets Obi-Wan Kenobi, former Jedi Knight
- Who teaches Luke to trust the Force
- Luke helps deliver the Death Star plans hidden in R2-D2 to the Rebels
- Without the plans the Rebels would be obliterated by the starbase
- With Luke trusting in the Force, he’s able to destroy the Death Star, thus saving the Rebels
While Miller’s StoryBrand framework is geared towards marketing and messaging, I believe we can extend it to user experience and product design as well. Remember that the hero is the customer or the user. And our product is the plot through which our hero can solve their problem.
For fun, let’s apply this framework to Dropbox:
- An information worker
- Has multiple devices and often can’t access her files when she needs to
- Meets Dropbox
- Whose product can sync and store all her files in the cloud
- Encourages her to sign up and install their product
- So she can stop forgetting to email herself files to/from work
- And access her files instantly from any device anywhere, impressing her bosses
For the user to trust Dropbox with her files, Dropbox’s brand identity needs to be consistent from its advertising and marketing, to its landing page and website, and finally to its application. Remember their world needs to stay internally logical by using the same color, fonts, imagery, and even brand voice.
Using Design as Storytelling to Create Fans
In 2008 Marvel began their incredibly ambitious MCU movies with Iron Man. But from that very first movie, they started to build their world. They introduced us to new characters with subsequent films and wielded familiar story beats while bringing something new. Ultimately over the course of 23 interconnected movies, they created millions of fans worldwide who collectively spent more than $22 billion at the box office.
We’ve already mentioned Nike, Apple, Target, and Dropbox, but what about a newer brand that’s doing this right? Slack.
From day one Slack built personality into the design of their product. Their quirky plaid pattern and colors in their hashtag logo made its way to the product, allowing users to customize their own workspaces with themes. Their UX copy is charming, personable. In other words, Slack’s brand from the colors to the fonts to the brand voice is infused from their marketing website all the way into their product. And this attention to design as story has helped drive Slack to over ten million daily active users, and propelled the company’s valuation to $20 billion when they IPO’d.
Design as storytelling is an incredibly powerful tool to build a brand, create a better product, and promote fanaticism. As young startups enter an increasingly crowded marketplace, they need to differentiate through memorable and consistent branding. And they can by incorporating storytelling in their design.