Telling Stories for better design

Storytelling is a very old human tradition one that can be traced back thousands of years over all different cultures and languages throughout the world. It is perhaps a cornerstone of human existence to relate and empathize with others. For this reason storytelling is a key part of design and vice versa design is essential to storytelling.  

Whether a story is spoken, visual, or written; harnessing the power of emotional connection is imperative to getting an audience to respond to a call to action. 

Two of the ways that storytelling can be utilized in design are through user experience and user interface. These are outlined in this article. 

Storytelling for User Experience 

UX or user experience is the overall experience that a user has when coming to a site and interacting with it. A way for designers to incorporate storytelling here could be a timed visual or a discoverable with narrative elements. Effective storytelling in this area should result in users that are delighted with the effectiveness of the site, and how their needs were predicted and accommodated for. 

Storytelling for User Interface 

UI includes all the visual elements on a page that a user interacts with while navigating a site. This includes icons, colors, typography, buttons, imagery, and animation. Storytelling in the user interface could be as simple as the white space used between elements to distinguish them, or complex as the copy text about the goals and personality of the company behind it. Effective storytelling in this area should cause users to be satisfied by the visual aesthetics of the page. 

Key Elements of a Story

For both user experience and user interface the elements of a good story are the same, as outlined in this article the key elements are:

  1. Simplicity
  2. Emotion
  3. Truthfulness
  4. Realness/ Believability 
  5. Validity for a universal audience

Visual Storytelling

Including all of these elements into the design of a page seems like a challenging feat however the process can be broken down into 3 parts. 

1.) Set-up: and scene setting: this should be an introduction of the user to the values and aesthetic of the site. For example a perfume company who has a mission to give a portion of the profit to charity could include pictures of just the product; however a better set-up would explain the mission statement without words. A picture of the charity/organization that they sponsor would be more effective in setting the scene for their company.

2.) Conflict: This should be the longest part of our users story experience, and creating a design to evoke the correct emotional response is pivotal. For example if the goal of a site is to get their audience to buy something then the design story should include visuals and headings that convince the user of the value of their product. Say a perfume company had in their mission statement that a portion of proceeds goes to charity, then a picture or animation of the charity’s work could be helpful in convincing the audience to buy their product.

3.) Resolution: generally this is the interactive part of the storytelling process. After the emotions evoked by the conflict section the users should want to engage with the page to create a resolution. User interface comes into play here, and designers should include buttons that allow the user to interact with their page at this point in the story. In the example of the perfume company a buy or donate now button would be an appropriate example of creating a resolution. 

The Model of drama

Fretag’s pyramid of dramatic structure outlines the rising and falling actions necessary for a compelling story. It is composed of 5 different parts. 

1.)The inciting moment introduces the characters, mood, and back story. 

2.)The complication should be a force that creates rising tension toward the climax. 

3.) The climax should be a turning point for our character, the goal is to change the tides of luck from bad to good in this stage. 

4.)Reversal should be shorter than the rise and may contain a final moment of suspense.

 5.)Denouement in this part the hero(whether they are good or bad) should meet their end according to Fretag. This part is not essential to design since our hero usually is the user of the page.

Image shows Fretag’s pyramid of dramatic structure From.

The power of a good story

Stories have been proven to trigger powerful emotional responses in the brain. Cortisol the stress hormone will increase during the rising action of the story, but the oxytocin from a satisfying ending should balance out the stress created.

Harnessing these emotional reactions are the key to success for some charitable organizations. For ASPCA they utilize sad music and visuals of dogs to create a rising action in their audience, their desired action comes at the end of the commercial when they ask you to donate to their cause to help said animals.

Similarly stories about the dangers of cigarette use and vaping are told through public health commercials. They utilize shame instead of empathy to paint nicotine in a light that won’t be appealing to younger audiences. Their desired action is to stop kids and adolescents from smoking. 

What to do for a good story

As outlined in Jen Massaro’s 5 Tips that will make you a better storyteller, there are some well defined steps to be taken in the pursuit of your best story. 

  1. Understand your main idea: what do you want your audience to remember from your story? Hone in on this aspect, there can be off-shoots of the main idea, but all of these should connect back to your mainpoint. 
  2. Get outside your comfort zone: Don’t let fear discourage or dictate your decisions. Jen asks readers to question if they are truly scared or just uncomfortable. Pushing yourself and your audience outside of this can be very beneficial. 
  3. Become a sculptor: This is maybe a nicer way of saying “kill your darlings”. Do not become overly attached to any part of the story that doesn’t further the main idea, because unless you can tie it back to the main point it probably won’t make the final cut. 
  4. Empathize with your audience: Save your internal monologue for a journal entry, focusing on the universal parts of humanity that a story contains will evoke more empathy in an audience. 
  5. Practice: Storytelling is a nuanced skill that will be unique to each person, practicing this will help define and develop your skill and technique.  

A framework to follow

All good stories have a rhythm and pattern that may be unique to them but the bones of a good story can be applied universally. In this article the principles of a good story and the frame they follow is laid out by Niklas Goke. His framework is laid out like this.

It is similar to Fretag’s pyramid, but the further breakdown of each act is helpful to understanding the purpose of each one. Mainly the breakdown of ACT-2 is helpful here. Escalation should be the villain’s crescendo, All is lost should be the hero’s lowest moment, and the breakthrough should be when the hero understands their path. 

How to apply this to design?

Using these traditional techniques on the design of a web page seems like a difficult task, but Jesse Weaver in this article analyzes how each of these Acts might look if you are designing a webpage.

  1.  Setting the context: at this stage you need to be explaining why spending time on this site is important, honing down the least amount of information that is necessary to keep your users engaged and on the site. 
  2. Showing the solution: at this stage the audience should be interested enough in the cause of your site to want to help or join. Showing users how to get involved should be contingent on what the goal of the site is. 
  3. Defining success: this act should be parallel to the climax in the dramatic structure. It should provide the user with a sense of satisfaction and resolution. Users should understand that the end of the “story” has come and be encouraged to engage again. 

Combining these skills is an advanced move for web designing, but the benefits are worth the while for controlling the emotional impact that your site will have over users invested in the story.

Storytelling web design: some key techniques with great live examples

The Seven Deadly Sins of Storytelling

5 Tips that Will Make You a Better Storyteller

The Irresistible Power of Storytelling as a Strategic Business Tool

Use This Storytelling Framework to Craft Amazing Narratives

What is storytelling in design?

Fretag’s Pyramid

This Post Has 5 Comments

  1. Hey, Maddie! Storytelling is becoming increasingly important in design, so I’m really happy you touched on this topic. I thought it was interesting you used the concept of Freytag’s curve, since I’ve only ever seen it applied to fiction. I recently learned there are many other shapes a story can take. Look those up if you’re curious! I appreciate how you connected storytelling to UX/UI. Users want to be satisfied both visually and through the effectiveness of the website. I like that you broke down the elements of visual storytelling, although I wish you used images that showed the examples you gave in the text. Conflict and resolution make the most sense to me, since users come to a website with a problem they want solved (or questions that want answered).
    I think the most important element of storytelling is the way it evokes emotion and asks users to be more actively engaged. I recommend you check out “The Fallen of World War II.” (http://www.fallen.io/ww2/) It uses techniques such as movement, data visualizations, and photographs to convey the sheer number of lives lost in WWII as well as the hope for a brighter future. Not only does it create an emotional appeal, the website is also interactive. Users can mouse over the data to read the stories more in-depth. On our own websites, we can use the principles of design not only to tell a story, but to create an emotional appeal. We can also use interactive elements such as buttons to keep users engaged. Check out this article (https://inkbotdesign.com/emotional-storytelling/) about emotional storytelling and examples of the different emotions you can evoke. Great job with this post 🙂

  2. Hi Maddie, I really appreciated how you made a clear distinction between storytelling for user experience and storytelling for user interface. Your examples of ASPCA and anti-smoking campaigns really helped me understand how storytelling can influence user experience. This made a great connection to your analysis of Fretag’s pyramid of dramatic structure. I was prompted to do a bit of my own research to find out how designing with narrative can be applied to different personas – how to tell one story that relates to every member of the target audience. This article: https://blog.optimalworkshop.com/from-exposition-to-resolution-looking-at-user-experience-as-a-narrative-arc/ says, “It might be useful to check stats to see if users leave early on in the process, during the exposition phase. A high bounce rate might mean a page doesn’t supply that expositional content in a way that’s clear and engaging to encourage further interaction.” I thought it was really interesting that analytical data may be extracted from a narrative, which allows for better integration of narrative design. As you said, this is why it is important to hone down the information in the exposition stage, to quickly appeal and encourage further exploration. Great post!

  3. Madeline, I really like all of the pointers you made in your blog post regarding storytelling as a form of essence around user experience. I especially how you provided a layout to the “model of drama” and then broke down each characteristic into easily identifiable information. Your blog post really got me thinking about the different aspects of storytelling with usability, and why applying such components correctly is essential in order for users to have the best overall experience possible. In Mariana Berga’s blog (https://www.imaginarycloud.com/blog/storytelling-improve-user-experience/) she goes on to talk about user experience being so much more than just the product or services that a company provides. It all goes back to their story, what they’ve been through as a company, and where they with progress further in moving forward into the future. “Companies may have similar products or services, but in the end, it’s their story that truly defines them”, expressing your story and what you do in the proper manner is important for a number of reasons. If your story is bland, or even too overwhelming and drowns on, it can affect how users will feel going forward when interacting with your website. This ties back to our lecture regarding Ethos and “emotional morals”; if you can get audiences to feel a certain way toward you (hopefully to a positive degree), how can you possible begin to stand out against the vast competition? Overall, this is a great post, well done!

  4. Hi Maddie! I really appreciate your explanation of the storytelling technique and how that connects to web design! I like how you first explained traditional storytelling and then explained how it can be applied to web design to keep readers engaged. I found a great article that connects to a lot of the points you made in your blog post! (https://torquemag.io/2018/12/storytelling-content-marketing/) This article explains the importance of storytelling and how it is effective in marketing. Like you mentioned, storytelling allows us to elicit an emotional response from our audience, and as we previously learned, people pay more attention to emotions than facts. These emotions compel our audience to take action and interact with our website and business. As web designers, the most important part of our storytelling is the relatability and call to action.

  5. Hey Maddie! Your post is awesome, and I found it really fascinating! I also think that using Fretag’s pyramid of dramatic structure is a great way to analyze and design stories on websites, and it has helped me and my team with ideas for our website! I liked how you pointed out that emotion is an extremely powerful tool when storytelling, and can make the difference between a story that users just consume and a story that they digest and remember. Here’s an article that talks about emotional marketing, its effectiveness, and includes the rhetorical triangle in its discussion: https://www.spiralytics.com/blog/emotional-marketing-what-it-is-and-how-it-works/
    Companies use emotions all the time to popularize their brands and engage consumers. Learning about storytelling and its multiple uses is interesting and I enjoy thinking about different ways to apply it!

Leave a Reply

Close Menu