Implementing the CSS of Design Storytelling: Real-World Theatrics Meets Internet Theater

Dramatic Impact

Theater and the creative process of design

A column by Traci Lepore
November 1, 2011

“You are a 14-year-old boy who lives on a farm in Maine in the early 1800s. Or maybe you’re a farmer who makes little money for demanding physical labor. Perhaps you’ve never been outside your town, and you ache for some adventure. Then you hear about whaling expeditions leaving Nantucket, and your head fills with stories of wine, women, song, and, of course, whales.”

This was the beginning of a fantastic story I heard at the Nantucket Whaling Museum recently. We sat in a gallery that housed a whale skeleton, a whaling boat, spears, lances, media, and other artifacts—evocative props for the presentation we were about to experience. We learned about the rich history of whaling in Nantucket—from the perspective of a 14-year-old boy on a whaling ship.

Champion Advertisement
Continue Reading…

An hour later, we heard the next story in the Candle Factory section of the museum. This one was about the famous whaling ship The Essex, the inspiration for Nantucket’s most famous story, Moby Dick. Here the most intriguing prop was a list of the crew on The Essex and their fates. It listed the fate of the cabin boy on the crew as executed, and I couldn’t help being on pins and needles, waiting to hear the story behind his execution. Wouldn’t you be curious, too—gruesome as it might turn out to be? And savvy stagecraft placed that part of the story close to the end, so I was hooked the whole way through. That was all it took.

Why am I now telling you this story of my experiences at the Whaling Museum? Because it helps to illustrate the concepts I began discussing in my last Dramatic Impact column, “The CSS of Design Storytelling: Context, Spine, and Structure,” and how successful a story that fully coordinates the context, spine, and structure can be. From the setting, to the props, to the storytellers, and the wonderfully consistent through-line, keeping the focus on whaling, that came across in everything the museum does, Nantucket’s Whaling Museum epitomizes good storytelling.

Recapping Context, Structure, and Spine

To refresh your memory, there are three key elements to good storytelling: the context, structure, and spine. Each has defining elements, and together they make up a cohesive story. Let’s review quickly. There are some basic factors to take into account in setting the context of any story, as follows:

  • theme—the setting of a story—including it’s physical location, time in history, geographical place, and other elements of the world
  • mood—the emotional aspects of a story—things like style, tone, rhythm, and intonation
  • audience—understanding and reflecting the audience in a way that engages them

The elements of the spine are the basic storylines making up the overall story, including the

  • plot—the what, where, when, and how of the story—the basic outline
  • characters—who the story involves
  • climaxes—the story’s big moments and spectacular experiences

The structure defines how the context and spine play out and become manifest through a story’s

  • patterns—in a user experience, these include page types and components, visual design, and even sound
  • infrastructure—the technology platform and content on which a story sits
  • through-line—the way a story’s goals come to their conclusion—from the beginning to the end of the story

As I’ve said, the Whaling Museum covered all of these elements very well. They admittedly had it easy with the setting and props at their disposal, but putting a good story together for your user experience may be a little more challenging. I’m currently in the midst of helping to wrangle these elements for a great UX story, so I thought I’d share something about my experience with you.

Developing an Internet Story

Recently, I started a new job, making a big move from consulting to internal team, and it’s been great. The domain is exciting and fun. The products are industry household names. The users are passionate and vocal. The story and characters are very solid and well understood. Even so, there are still many elements of context, structure, and spine that we need to pull together to create a truly exemplary story for the Web user experience. For me, that is the fun part of the challenge!

Don’t think the team has done anything wrong in crafting the Web site story. This is a complicated story that my company is trying to weave, and few companies could achieve what this team has. The Web site must reach multiple segments, or audiences, and communicate different storylines for the different domains the company’s products address. This is not a simple, little Web site. The site presents a range of products, across a spectrum from consumer through to the highest-end, professional systems for the sound, music, and film industries. The internal challenges of addressing such a broad range of products sometimes show when there are disconnects or incoherence in the story the Web site communicates. However, those disconnects do not accurately reflect users’ experiences with the products themselves.

One advantage we have is that, as a company, we understand each segment very well. But, communicating to all of them individually is never going to be easy. Of course, we understand that we shouldn’t try to communicate the same story to all of these different audiences, but in the heat of the moment, we may sometimes forget. For example, the latest marketing campaigns attempt to address all audiences through one landing page.

Trying to maintain our storylines across a vast Web site can be an overwhelming endeavor. And I’m sure every large company with an extensive product catalog, ecommerce capabilities, and multiple marketing channels faces these issues. So, how do you attempt to pull together a cohesive message across all of the elements of context, structure and spine? Here is the beginning of the story about how I am helping our team achieve this right now.

Setting the Context Clearly

One issue my team confronts is how to clearly define the context for an audience—wherever they may be in the story, regardless of where we want the audience to go next and even where they came from. Currently, the company is addressing this challenge by playing with mood and theme to tailor the Web site to an audience. How this plays out is in the use of imagery and themes in visual design. The more professional the audience for a particular product, the darker and more serious a visual theme becomes—which makes sense, since this is a creative realm, and we all know the appeal of slick black. The more consumer-oriented the product, the lighter and more playful the visuals become. Insert your Apple reference here. It is a little predictable, but I get it.

In theory, playing with mood and theme is a good strategy. It worked well for the Whaling Museum, where the darker story of the Essex took place in a darker, more ominous setting. But where this approach falls down for our site is in making the transitions between moods and themes clear and articulate for users—especially because there is crossover between the professional and consumer audiences for our products. As we learned from our user research, without a clear articulation of the boundary line between the products for these audiences and the context users were experiencing at any given moment, the resulting impression users were getting was that the visual design was inconsistent, and people were quickly getting lost as they moved around on the site. The transitions between the imagery for different themes were not clear to users, and they did not recognize what we were trying to communicate to them through these themes.

A few possible ways of dealing with this confusion about mood come to mind. The first is to create clear markers for context—beyond just changes in the visual content. We could provide other cues like clear signifiers of a particular section of the site and associating specific colors or icons with particular audiences and topics. Another thing to consider is consistently iterating clear elements of a theme across every different path of the story, providing a stable base overall and clarifying the bigger picture. Though I would caution you that there is a fine line between maintaining a stable base and being redundant. Tread carefully. The other thing to consider is the pace of your transitions and whether they need to be a little slower and smoother. This becomes especially important when your boundary line is not crisp and clear cut.

Another idea we’ve toyed with is structuring the product catalog from the perspectives of consumer, professional, and enterprise audiences from the navigation system on down. Again, the crossover between audiences poses problems for this concept. This approach forces users to segment themselves, which is not only difficult for them, but may potentially be insulting to aspiring users. Supporting this approach might also be organizationally challenging, because it may require more versions of our content.

The Whaling Museum was successful in playing with mood and context because they understood that the foundation of everything they created was the whaling theme that is a rich part of Nantucket’s history. They reiterated its being built on the traditions of the island and its adventurous spirit, out-of-the-box thinking, and enterprising outlook. They consistently went back to the root need to find a way to forge an economy for the island—where farming and sheep raising had been unsuccessful.

Maybe, one day, we’ll be able to create truly unique experiences for our different market segments, but right now, it seems to make more sense to base our site’s structure on product domains. (Remember, I said we have products for sound, music, and film.) Because there is much less crossover between these domains, it becomes much easier to maintain distinct stories within these worlds. Slowly layering on this structure will help greatly in our effort to tell an amazing story.

The Stable Spine

Our team is already excelling in our storytelling endeavor when it comes to understanding the elements of plot and characters. My company has a solid understanding of what we do, how we do it, and who our various audiences are. That’s a great accomplishment. I’ve just come from the consulting world, where companies often hired us to start at the beginning, because they were not able to understand these story elements. So our team is already a step ahead.

The one thing I struggle with is the need to capitalize on the climaxes and avoid diluting them with too many calls to action. As I said in my previous column, climaxes need to be supported by what surrounds them to resonate. Otherwise, the danger exists of their getting lost in the noise or seeming gratuitous. Our team is working hard on getting this message across and implementing much stricter rules of thumb for calls to action. Remember, you should try to tie the end of every story to just one follow through. Otherwise, you risk confusing and losing your audience. We also continue to work hard to implement, track, and analyze Web site metrics to help us refine our calls to action, or climaxes, in the next iteration of our design solution.

The storyteller who brought The Essex to life understood this well. He kept us completely centered on one through-line at a time, even though he wove back and forth between them. And we had that crew list as a constant reminder of the bigger picture of the overall story.

Solidifying a Structure

Where my expertise really comes into play is in solidifying structure. Currently, structure is our weakest link—the deficiency users notice most quickly. My major challenge lies in helping my team to set out a solid base of patterns, not only at the page-type level, but also in how to carry the story through, from beginning to end, as users move through the site. This includes how those different page types interact with each other, as well as consistent structure and flow that gives a story its beginning, middle or climaxes, and end or follow-through.

This is no easy chore on a site with such breadth and depth—as well as ever-present technological constraints. Setting clear purposes for pages, providing consistent structure for page types and components, and keeping our awareness of the bigger view—the flow through interactions and pages—will help us to solidify a structure that makes navigation and tasks effortless for users. With multiple sites for the parent company, acquired companies, ecommerce store, and marketing-campaign areas, we have many considerations to take into account and address. But I’m confident that, with a brand new UX team to devise the right structure, we’ll make headway quickly. In fact, with every launch, we have already begun making small changes that are helping us to move in the right direction.

Finding a Conclusion

So, have you been wondering what happened to that cabin boy on The Essex like I did? He heroically gave his life to save the lives of others who were stranded with him on a whaling boat. They had been without any food or water and faced death when they had to desert their ship. Oh, and in case you wondered, the whaling life wasn’t as glorious as it was cracked up to be in the mind of that 14-year-old boy. In fact, he might have been much better off staying on the farm. But then, we wouldn’t have had such a great story would we?

On my new job, I know we won’t have to go to such extreme lengths in the course of telling our Web site’s story. We are just beginning our adventure, and I am very excited to find out where it may take us! Stay tuned to find out more! 

Principal User Experience Designer at Oracle

Boston, Massachusetts, USA

Traci LeporeWith over fifteen years of experience as an interaction designer and user researcher, focusing on user-centered design methods, Traci has experienced a broad range of work practices. After ten years of consulting, Traci transitioned to working on staff with product teams at companies such as Avid and Oracle. Through her UXmatters column, Dramatic Impact, Traci shares how she infuses aspects of theatrical theory and practice into her design practice to bring a more empathetic, user-centered focus to her work. Traci holds an M.A. in Theater Education from Emerson and a B.S. in Communications Media from Fitchburg State College. She is a member of the Boston chapters of UXPA and IxDA and has spoken at conferences such as the IA Summit and Big Design. She is also a nominee for the 2016 New Hampshire Theatre Awards in the best supporting actress category.  Read More

Other Columns by Traci Lepore

Other Articles on UX Strategy

New on UXmatters