The CSS of Design Storytelling: Context, Spine, and Structure

By Traci Lepore

Published: July 18, 2011

“What I’m looking for is our interpretation and vision of the story. I’m missing one of the key components of storytelling: the Context, and it’s throwing my experience for a loop.”

I’m working on a new production right now. It’s A Midsummer’s Night Dream. I should be thrilled because it’s one of my favorites, and it was my very first Shakespeare production, so the nostalgia factor is kicking in hardcore. But I find myself having trouble connecting with what is going on and falling behind in my line memorization. This is frustrating because I usually throw myself wholeheartedly into any production I work on.

It’s taken me a couple weeks to figure out why this is happening. But I finally realized that it’s because I’m not clear about the story we are telling through our production. Now, of course, I realize that the obvious answer is Midsummer’s, but what I’m looking for is our interpretation and vision of the story. I’m missing one of the key components of storytelling: the Context, and it’s throwing my experience for a loop.

The Elements of a Good Story

“To be a really good storyteller, you need to understand three basic concepts: Context, Spine, and Structure….”

Storytelling is an age-old tradition, because it’s one that just plainly and simply works. As the book Storytelling for User Experience by Quesenbery and Brooks says:

“We all tell stories. It’s one of the most natural ways to share information, as old as the human race.”

I won’t regale you with research that shows people learn and comprehend better from stories than they do otherwise. Just know that it’s out there! But to be a really good storyteller, you need to understand three basic concepts: Context, Spine, and Structure (CSS). Each is critical and necessary, and all three need to work together.

If we look at Midsummer’s, we’ll recognize that Shakespeare has provided the Spine for us already. The Spine is the basic storyline that runs throughout the play. It gives us the basic plot and characters. If you aren’t familiar with Midsummer’s, it’s basically a story of love, lust, and mischief. Shakespeare has also provided the Structure: There are five acts, with scenes within each act. There is a clear opening to the story, a climax, and a conclusion. Those are the easy parts.

The one thing Shakespeare hasn’t provided is the Context. What is our setting for this production? Our director has told us only that it is to be “traditional.” In most cases, the director has a time period in mind for a production or a particular theme to focus on. Without that, it’s hard to do character development and really give life to the words. Also, we haven’t yet worked with any groups of actors other than those we have scenes with, so we aren’t seeing how all the pieces come together. Focusing on only small parts, without that bigger picture, is challenging to say the least.

Storytelling and Design

“Design is a social, collaborative activity. I believe a UX designer’s role is to bridge all of the pieces that bring a design to life….”

Storytelling is important not only to theater. I agree with Tom Erickson, who says in his article “Design As Storytelling” that design is a social, collaborative activity. I believe a UX designer’s role is to bridge all of the pieces that bring a design to life—from product management, marketing, user research, and design all the way through development. If that is true, communication is critical. Stories become an essential communication vehicle in the user experience world. Every day, we talk to users, bring back their stories, and co-create with them.

Major parts of our work are building personas, creating scenarios, and creating and using prototypes in usability testing—all of which connect our work to real users. Of course, we must also talk with various people within our organization to understand the case for a product’s business value, as well as relevant technical constraints, and negotiate a balance between all of these factors. But, in the end, to get buy in, we need to tell a compelling and engaging story about our design and its value. And we need to evangelize that story. To be successful in design, as well as theater, it makes sense to spend some time on the CSS—the Context, Spine, and Structure.

The Context

“You won’t be there to explain the story when users encounter your design.”

There are some basic factors to take into account in setting the Context of any story:

  • 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

When crafting the story behind your product’s theme and design, consider the basic concept behind the story’s plot. How does your product or site differentiate itself from the competition? What is your key value proposition? It’s also important to remember the current culture and norms that your design must live within. Do your technology and its capabilities match or exceed what is currently available? Do you understand current aesthetic tastes? Be clear about this from the get-go.

The mood you create can be a critical factor in communicating your story properly. This is especially true in interaction design, because you won’t be there to explain the story when users encounter your design. Elements like typeface, color, writing tone—and even things like formality, diction, and grammatical correctness—can all affect the emotional response of users. Other elements of interaction also affect mood, including the kind of animation you use, the speed and fluidity of interactions, and even the sounds you choose to use. The rapid growth of touch smartphones and tablets gives these elements of interaction a new and more detailed focus that can make or break an experience.

Understanding your audience is the driving factor behind doing user research, which spans the full spectrum from gaining a basic understanding of a broad market segment down to learning about the details of an individual user’s work practice. Eliciting information through contextual inquiry and affinity diagramming is a good way of achieving this understanding.

Keeping your product’s story focused and showing users case studies and testimonials from other users also helps to engage them and demonstrates your understanding of the audience. I think it will be interesting to see what challenges we encounter as consumer technology moves into the business space and changes the expectations we must meet. Functionality that merely gets the job done will no longer be acceptable. It will be important to understand how to make business more consumer friendly.

The Spine

“In UX design, the plot must cover the goals and scenarios that dictate what a design solution should be.”

The elements of the Spine are the basic storylines of the overall story, including its

  • 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

In UX design, the plot must cover the goals and scenarios that dictate what a design solution should be. From user research, stakeholder conversations, and focus-setting meetings, we can begin to put the plot together. Scenarios reflect how we intend users to achieve their goals. Fill in the story in accord with its Context and Structure.

Characters are the people involved. Most of us are familiar with personas and user segmentation. These are great tools in helping us to build a story effectively. See my column “What’s My Persona? Developing a Deep and Dimensioned Character” to learn more about developing rich characters. Don’t forget that you also need to understand the people you work with in your organization They are important characters in the story of design. Working well as an ensemble is critical to a product team’s success, as I outlined in my column “The Holy Grail of Innovation: It Takes an Ensemble to Achieve Inspired Creativity.”

Most stories have some kind of climax or big moment—memorable bits and pieces that keep a story in a listener’s mind for a long time. These are great additions to a story’s Spine, but they shouldn’t be the whole story. They help to embellish a story, but there always needs to be a Structure surrounding such moments—as well as reasons for their being. Otherwise, they’re like gratuitous uses of Flash in the intros to Web sites. They don’t really add to the story, do they?

The Structure

“Design patterns that are consistent and help users understand the use of sections and components within page types make it easy for them to move through a site design and quickly understand what’s going on….”

The Structure defines how the Context and Spine play out and become manifest through a story’s

  • patterns—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

Patterns help keep people grounded in a story’s Context and Structure. Design patterns that are consistent and help users understand the use of sections and components within page types make it easy for them to move through a site design and quickly understand what’s going on—without their having to learn everything anew each time. When things work just like something they already know, users can jump in quickly and feel confident they know what they’re doing. Consistent branding reinforces a clear message. It can help people learn, too. For example, if you style all buttons on a site consistently, users can figure out where the actions are on a page, no matter where they are.

The infrastructure you choose may seem to be a silent aspect of the story in design, but it helps communicate the message. If you choose to create a Web application versus a desktop client or a mobile application, that decision affects how you layer the other aspects of the story on top of that foundation. So make sure you understand the choices you are making and how your platform affects what you can and cannot do.

A story’s through-line determines how you fill the spaces in the story’s Spine or create its outline. This includes determining how to get from the beginning to the end and the natural ebb and flow of the story. Remember, there is always a beginning, middle—which usually includes one or more climaxes—and an end, or conclusion, to a story. Without all of these pieces in place, a user can become confused, because the way forward is unclear.

Pulling It All Together

“A good story that covers all of the components of CSS
—Context, Spine, and Structure—is compelling, engaging, and memorable. … The same is true for user experience.”

A good story that covers all of the components of CSS—Context, Spine, and Structure—is compelling, engaging, and memorable. It’s not enough to cover just some of them. The same is true for user experience.

As for that production of A Midsummer’s Night Dream I was telling you about earlier… Let’s hope that, next week, when the cast starts doing run-throughs of the whole play, the story will start to come together for me. Once we get the play’s Context in place, we’ll be able to present a fantastic story.

References

Erickson, Thomas. “Design As Storytelling.” Originally published in Interactions, Volume iii, Number 4, July/August 1996. Retrieved July 17, 2011.

Quesenbery, Whitney, and Kevin Brooks. Storytelling for User Experience. Brooklyn, New York: Rosenfeld Media, 2010.

Join the Discussion

Asterisks (*) indicate required information.