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:

1. Worldbuilding: Where does the story take place?
2. Main characters: Who are the people we’ll care about?
3. 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.

In Star Trek, transporter technology allows the teleportation of a person or thing from one place to another.

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’s advertising lives in a world of red, white, and Helvetica.

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.

Captain Marvel has Nick Fury to show her around S.H.I.E.L.D. and Earth in the 1990s.

Luke Skywalker is mentored by Obi-Wan Kenobi who introduces him to the ways of the Force.

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.

Nike’s ad campaigns celebrate the athlete within each of us.

Apple’s “Think Different” campaign wasn’t about how they had the best computers, but about celebrating geniuses like John Lennon and Yoko Ono.

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:

1. A character
2. Has a problem
3. And meets a guide
4. Who gives them a plan
5. And calls them to action
6. They avoid failure
7. And end in a success

StoryBrand Framework by Donald Miller.

Let’s apply it to one of my favorite movies, Star Wars:

1. Luke Skywalker
2. Wants to defeat the evil Galactic Empire
3. Meets Obi-Wan Kenobi, former Jedi Knight
4. Who teaches Luke to trust the Force
5. Luke helps deliver the Death Star plans hidden in R2-D2 to the Rebels
6. Without the plans the Rebels would be obliterated by the starbase
7. With Luke trusting in the Force, he’s able to destroy the Death Star, thus saving the Rebels

StoryBrand framework applied to Star Wars

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:

1. An information worker
2. Has multiple devices and often can’t access her files when she needs to
3. Meets Dropbox
4. Whose product can sync and store all her files in the cloud
5. Encourages her to sign up and install their product
6. So she can stop forgetting to email herself files to/from work
7. 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.

Yesterday Apple announced its third-generation iPad, simply named “iPad.” Buried in MG Siegler’s excellent take on the press event is this statement:

What’s more likely — 5 years from now, your primary home computing device is a PC? Or 5 years from now, your primary home computing device is a tablet? Just two years ago, this question would have been an absolute joke. Now it’s a joke to think it will take a full five years.

In the post-PC world, tablets are becoming the new normal more and more. In just the two years since the iPad was first introduced, we’ve seen it pervasive on airplanes to entertain children, many executives in Silicon Valley walking around with them instead of lugging laptops, and even the President of the United States receiving his Presidential Daily Briefing via iPad instead of a sheet of paper.

How We Really Use Tablets

Rosetta—the agency for which I work—released a study last month around how we consumers use tablets. Consumption and entertainment are still the primary uses of tablets today, but here are some interesting points to note:

• 33% of tablet users (who owned one 12+ months) prefer to read/check email on their tablets
• 38% of them prefer tablets to read e-books, magazines or newspapers
• 34% of them use their tablets at work
• 45% on the go

In other words we’re witnessing the trend of users either adding to their repertoire of connected devices or in some cases shifting away from traditional PCs to tablets. As MG Siegler said in the quote above, tablets are poised to become the primary computing device at home.

But I would argue that place is a misleading distinction. Yes, PCs will likely still be a primary computing device at the office, but maybe it’s the wrong way to put it.

Work/Life, Life/Work

PCs today are not stationary. Almost every workplace I’ve come across in recent years outfits its workforce with laptops. Those laptops are often taken home so that work can be done at home. And here’s the thing: as much as we’d like to draw a hard line between work and home, it’s too fuzzy. It’s too gray.

Workers check their personal emails and Facebook while at work, on their work machines. They IM their friends or watch funny cat videos on YouTube in the office. Conversely they check their work email on their personal smartphones and catch up with industry-related reading before bed.

The workforce of today achieves work/life balance by seamlessly blending the two to get things done. Wherever they are.

Responsive Web Design

Out of this notion of users being connected constantly and wanting access to information all the time, wherever they are, the responsive web design movement was born. Essentially it’s a set of techniques to enable a single codebase to deliver multiple layouts for different screen sizes. The redesign of BostonGlobe.com has become the poster child for this modern and forward-looking approach to designing for the web. It’s about letting users access content from whatever devices they have, wherever they are. And with this approach, content creators are also saving money on operating expenditures because they only have one site to maintain, not two or three. No longer should you need to write a different headline for mobile.

The Impending Future Is Here

With all this data staring at them in the face, it amazes me that when it comes to digital marketing, many corporations still have the traditional view of developing for mobile. They are still stuck on starting with the desktop experience and then dumbing it down for smartphones and tablets. The old way of thinking made sense at the time (three, four years ago?): users on the go have different needs, and the screen real estate is too small to do anything significant.

However, as we’ve become used to having the Internet in our pocket and as we’ve found a place for the tablet to live in our lives, that four year-old thinking is sadly out of touch with the impending future.

432 million users use Facebook on a mobile device every month. Facebook partially attributes the 76% increase from 2010 to the release of its iPad app. With Apple selling more iPads in Q4 2011 than PCs sold by any PC manufacturer, and with annual tablet sales projected to be at over 45 million by 2016, tablets are here to stay and will become more and more prevalent.

Additionally 472 million smartphones were sold in 2011, 46% of the U.S. adult population have smartphones, and 69% of smartphone owners use it for business. Last, but not least: 81% of smartphone users browse the Internet. The mobile web and the notion of content anywhere cannot be ignored.

The workforce of tomorrow will read their work emails on their smartphones and tablets. They will do research and consume work-related content on those devices. And they will go beyond consumption and produce work on those devices.

As designers and marketers, to ignore this is ignoring the inevitable.

This post was originally published on Bow & Arrow from PJA (my employer) on February 3, 2011.

The New York Times recently published an article about how apps and web services are enabling consumers to customize how they read their online content. From apps like Flipboard and Pulse to services like Readability and Instapaper, users are increasingly demanding to consume content whenever, wherever and however they want.

When Apple introduced the iPad a year ago, many print publishers saw it as a panacea for their dwindling readership. By creating digital editions, they hoped to recapture some of the eyeballs lost to aggregators and RSS feeds. One of the pioneering publication apps was the WIRED Magazine iPad app. Because of its novelty, its debut issue sold 73,000 digital copies in nine days, almost as much as on newsstands. There is a clear desire from users to read magazines on their tablets.

What that first generation of attempts miss though, is they are trying to replicate 20th century print experience on a 21st century device. The magazine apps feel very one way. But the iPad is an Internet-connected device and users on the Internet demand more interactive experiences. They want to copy and paste passages to put on their blogs. They want to share articles via Facebook and Twitter. Using Adobe’s Digital Magazine Solution, Condé Nast is starting to address some of these issues.

Meanwhile apps such as Flipboard are aggregating content and repackaging it for their users. Flipboard presents news items according to a user’s social graph, creating a personalized and highly relevant news stream. Additionally, the app presents this content in a unique way: as a paper magazine. The visual is striking, yet it still holds familiarity with users since it loosely mimics the experience of reading a real-world magazine, with the benefits of interactivity. And so far it has been a hit with users, even earning an [App of the Year](http://www.businessinsider.com/apple-calls-flipboard-ipad-app-of-the-year-2010-12 “Apple Calls Flipboard “iPad App Of The Year"") award from Apple.

Different kinds of content demand different kinds of packages. For example as a designer, I—along with most designers and art directors—flip through magazines such as Communication Arts and Print, and peruse blogs and websites like LovelyPackage.com and SmashingMagazine.com. Seeing something cool usually sparks an idea for whatever we’re currently working on.

To get through the hundreds of design-related sites out there, I use RSS feeds to aggregate this content for myself in Google Reader. Unfortunately, because I am so busy, I am not able to keep up with all my feeds. I may manage to check it only every few days. And I dread seeing that “1000+†number next to my unread items.

So last year, when the iPad was introduced, I decided to find a solution as an independent side project. I knew that an app on this large dedicated canvas could be created to serve this need of efficiently consuming visual inspiration. I teamed up with a developer friend and we started work on DesignScene.

We set out to create something that designers would enjoy using and become part of their daily ritual. We had two primary objectives:

• The UI must serve the content and the audience. It has to be beautiful and show off visuals well.
• The content must be relevant. There’s a glut of design-related websites and blogs on the Internet. Let’s help designers navigate through them.

The UI we designed is sparse—a simple grid that takes advantage of the screen real estate afforded by the tablet. Users flick through the various grid cells to see an assortment of images. They can enlarge the images to fill the screen or read the accompanying text from the original source via the built-in web browser. DesignScene surfaces up the latest inspirational images of not only design, but also architecture, photography, art and so on. The content is a curated list of sources and—as a whole—has an editorial point of view to enhance discovery.

It’s been two weeks since DesignScene launched. [This was originally posted three weeks ago on the PJA blog.] So far we’ve had great response from users and media. We built social sharing into the app and we can already see hundreds of discoveries being shared on Twitter. Our users are interacting with content in a way that was not possible just a year ago.

Customer and user experience is not always about the website, the phone call, or person-to-person interaction in a store. It can also come through the form of packaging.

I just bought a Mac mini recently (for a living room media server) and was blown away by the unboxing. Apple has always been really great about their packaging. Having worked at Apple, I’ve seen the extreme extent of explorations that go into creating the outside of the box (over 500 comps were created for the Power Mac G5 box). (Incidentally, I worked on the second generation iPod package that featured musical artists like Jimi Hendrix.)

What really impressed me about unboxing the Mac mini was not the outside (although nicely designed), but the inside. The package anticipated my every move. How? Let me illustrate.

After removing the slip case, the typical “Designed by Apple in California” copy is printed on the thin box of manuals and DVDs. This box sits flush with the larger box. Nicely protruding from the right side is a tab to pull the manual box out. The tab also acts as a closure for the box. Multipurpose.

Removing the manuals reveals the Mac mini. What most companies would do in this situation is force you to turn the box upside down and shake the product out. I’ve done this many times and have found it to be quite maddening.

Instead, Apple thoughtfully supplies two plastic tabs that allow you to lift the mini out of the box. Also very cool.

For the bottom of the box, another cardboard layer hides the power supply and cord. Again, there are pull-tabs here built in to help you lift it out of the box. Did you notice the graphic design pattern here? The tabs are all in the same place and of the same size and shape.

After being so impressed, I thought that surely Apple would fail on the one thing that companies always fail at: tape around the power cable would be impossible to remove. Nope. They read my mind and included a little tab to unwind the tape.

Nice work Apple. You had me at first tab.