Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

UX Storytelling For A Better User Experience – Part One

Stories have defined our world. They have been with us since the dawn of communication, from cave walls to the tall tales recounted around fires. They have continued to evolve with their purpose remaining the same; To entertain, to share common experiences, to teach, and to pass on traditions.

Today we communicate a bit differently. Our information is fragmented across various mass-media channels and delivered through ever-changing technology. It has become watered down, cloned, and is churned out quickly in 140-character blurbs. We’ve lost that personal touch where we find an emotional connection that makes us care.

Further Reading on SmashingMag: Link

Using storytelling, however, we can pull these fragments together into a common thread. We can connect as real people, not just computers. In this article we’ll explore how user experience professionals and designers are using storytelling to create compelling experiences that build human connections.

ux storytelling
Image credit: guldfisken5

It Begins with a Story Link

In 1977, a simple story set the film industry on its side. The special effects technology used to create this story had not been created or used in filmmaking at the time of its writing. The author disregarded what was popular and marketable at the time (apocalyptic and disaster movies) to create his own vision. The film starred unknown actors and the genre had mainly been seen in 1930s serial movies. It was turned down by many film studios and at one point was almost shelved.

Article Cover
Image credit: Wired (Courtesy of Ballantine Books)

The movie, if you haven’t guessed, was Star Wars. The author was George Lucas. Star Wars went on to become one of the most successful films of all time and turned into a pop culture phenomenon. It gave birth to the blockbuster and the trilogy, and completely changed the way movies with special effects were made. Many of today’s most influential film companies were spawned from the success of these movies: LucasFilm, THX, Industrial Light & Magic (ILM), and Pixar.

Star Wars wasn’t a new story though. It drew from mythic archetypes of stories told over thousands of years.

Revealing the Design in Stories Link

The creation of a story is often viewed as an almost magical or random process. The author sits in front of their canvas, the blank word processor, and begins to type whatever inspires them at the moment. Great stories, though, don’t just happen randomly; they are designed. There is a pattern at work here. In order to be entertaining, have the right dramatic cues, and tap deep into our collective psyche, a specific method is used to build the story. A story that fails to pull the audience emotionally and keep their attention may not have used enough of these patterns as a guide, as shown in the typical story arc below.

Story Arc6
The story arc is widely used in screenwriting and novels.

The structure of the story has been around since long before screenwriting was taught. There was a point that it remained simply an unnoticed rhythm in the background of every story. Some aspects of this structure — like the hero’s journey and comparative mythology — were first popularized by Joseph Campbell7. He wrote about his discovery in the book The Hero with a Thousand Faces8. Campbell was a student of Swiss Psychiatrist Carl Jung9, who believed that we are all born with a subconscious idea of what a “hero”, a “mentor”, and a “quest” should be.

Campbell studied the structure of religion and myths across many cultures. What he discovered is that, consciously or not, every story (or myth) told had been created with the same basic formula. This is why great stories transcend even language barriers. It was this conclusion made by Campbell through his research that created large ripples in the waters of myth and religion.

Story Pattern
We find the blueprint for “The Hero’s Journey” in films like Star Wars and The Matrix (via Star Wars Origins10, Unofficial Site)

The stories we have seen on the silver screen or read about in novels have been able to captivate us by continuing to use these patterns. We talk about dialogue and certain scenes at the water cooler as if they had happened to a mutual friend, rather than some fictional character. All because we became emotionally invested in the characters and the story.

This type of emotional investment is something that brands strive for every day. Starbucks doesn’t want to just sell us a cup of coffee; they want customers to become invested in their story — the ambience, the aromas, the community. The goal is to become the “third place” for people (work, home, and Starbucks). They say, for them, “It’s really about human connection.”

The Power of Emotion Link

When speaking about stories, we describe the experience in a certain way. It tends to be more of an emotional experience, sometimes affecting us more on a personal level in how we relate to the story. This is much different from the way we traditionally describe the experience with products like websites or applications. Those are seen as more utilitarian and task-oriented.

If we are able to accomplish what we came to do, say transfer some money in a banking application, then it has been a good user experience. In order to achieve our goals, the interface should be usable and function the way we expect. This view is preached by many usability experts including Donald Norman11, a professor of cognitive science and usability consultant for the Nielsen Norman Group12.

Levels of Processing

After hearing that if people followed his rules “everything would be ugly,” Norman decided to explore people’s relationship to design. The result was the book Emotional Design13. Through his research, Norman found that design affects how people experience products, which happens at three different levels, and translates into three types of design:

  • Visceral Design This design is from a subconscious and biologically pre-wired programmed level of thinking. We might automatically dislike certain things (spiders, rotten smells, etc.) and automatically like others (“attractive” people, symmetrical objects, etc). This is our initial reaction to the appearance.
  • Behavioral Design This is how the product/application functions, the look and feel, the usability, our total experience with using the product/application.
  • Reflective Design This is how it makes us feel after the initial impact and interacting with the product/application, where we associate products with our broader life experience and associate meaning and value to them.

Amusement Park
Image credit: D. Alan Harris Photography

There is a lot more to emotion than can be covered here, but understanding those basic levels of processing gives us some insight into why storytelling is so powerful. Consider how the levels of thinking play off each other in an amusement park: People pay to be scared. At the Visceral Level we have a fear of heights and danger. At the Reflective Level we trust that it is safe to go on the ride, and we seek that emotionally charged rush and sense of accomplishment (overcoming that fear of heights) after the ride is finished. Knowing that emotion is so vital to how we think makes it more important to create not just a functional and usable experience, but to seek and make a meaningful connection.

The Basics of Storytelling for User Experience Link

At a basic level, storytelling and user experience have common elements — like planning, research, and content creation — that can be utilized for effectively developing an experience. Storytelling offers a way for the team to really understand what they are building and the audience that they are creating it for. Stories allow for the most complex of ideas to be effectively conveyed to a variety of people. This designed product/experience can then offer meaning and emotion for its users. The professionals that are currently using the power of narrative in their projects are doing it in vastly different ways. The following sections attempt to outline some of the current usage and benefits of modern storytelling.

Bring Teams Together Link

User experience professionals typically have to work with people from many different backgrounds. Depending on the type of experience, it might require the effort of everyone from an engineer to a user interface designer. Also, in many cases, the approach in creating websites or applications is to consider the technology, or limitations of that technology, first. Finally, to make matters more complex, larger teams tend be split with concerns regarding their domain. For example, the marketing person is going to focus on their directives and motivations based on their initiatives. This is not always in the end-user’s best interest and results in a diluted and poor experience.

Disciplines of User Experience14
The Disciplines of User Experience15 by Dan Saffer

The infographic above depicts the many different fields that make up the disciplines of user experience. The user experience team selected to create an iPhone application for the masses would be quite different from one that is developing a medical device used by doctors. As described earlier, the individuals that have been involved in crafting stories have been successful in tapping into a way of communicating that has been around for thousands of years. Utilizing storytelling, user experience teams can also inject emotion and value into the end product for users.

User-Centered Goal Link

In reading through the storytelling approach, it might seem that the story is just another way of saying “strategy.” With storytelling, though, tied to the story the interactions should communicate is a more user-centered goal. Companies like Apple have used similar methods in their design process to really define what they are building.

Cindy Chastain16 refers to it as an Experience Theme. She says this theme is “the core value of the experience” being created. Christian Saylor refers to it as finding the Lead Character. Without this user-centered goal, he states, we are just “designing for the sake of designing.”

Uncoordinated Elements of Web Experience17

By centering around a specific theme, or character, the uncoordinated elements of an experience all have a clear goal and purpose. With storytelling, a diverse team creating a website or application can collectively link together the tangible elements and create something that is a meaningful experience and is more than just bits and bytes.

Defining the User Link

There is a lot of discussion and articles about usability and functionality of websites and applications. Functionality, of course, is important. For example, what good is an airplane if the engine isn’t powerful enough to get it off the ground? If you take a step back though, the more important question should be: How far does the user need to go? If it’s only a few miles down the road, then it really doesn’t matter if the plane is functional, it’s the wrong solution altogether. So, discovering what we really need to build is a key in the initial phase of building the user experience.

Image source: Mishka18

When research is finished, we typically move on to create personas19 as a way of understanding the user and can be looked at as part of creating the story. By building a fictional representation of the user that is based on real research and observation, we are able to empathize with them and really understand their needs. Using the created personas and then creating stories about them, we are able to cast a more meaningful vision of the project.

Disciplines of User Experience20
Persona Sample21 by Fuzzy Math

The UX storytelling approach allows us to transfer this research in an anecdotal way. This has shown to have a better recall rate of information. In addition, being able to empathize with users through stories allows for better understanding of the emotional side of the experience. Films and video games deliver successful experiences that impact people on an emotional level. This is something people will begin to expect more from websites and applications that they use everyday. We can evolve the focus of creating a simple task-driven and functional website/application into a valuable human connection. We are, after all, a “global campfire” as Curt Cloninger22 refers to it. He goes on to say, “But the web is not a global network of connected computers. The web is a global network of connected people. And story-telling is still the most effective way to emotionally impact people.”

The Benefits Link

Most projects have a lot of documentation outlining their goal and strategy. These come in a set of business requirements, functional documentation, and any other pieces of supporting research/information. Using storytelling can help improve the overall product/experience:

  • Puts a human face on dry data
  • Can simplify complex ideas for a team
  • More efficient team collaboration and purpose
  • Insight into the key users
  • Setting a project direction faster
  • Better communication within large agencies/organizations
  • Experience delivers meaning and value to users

Yahoo Personals Case Study23

Storytelling can help teams focus their efforts on everything from the content on the website to understanding the business problem in a new way. For example, you can define the scope of a project quickly without designing or wireframing screens. Dorelle Rabinowitz24 shows how The UX team for Yahoo Personals created a story around how a fictional dating couple would go through some specific scenarios. Using this, the team was able to come to a better understanding of what the website should do and the type of experience the users go through. It opened it up from very task- and strategy-based steps to the more real and emotional experience of dating. It is a powerful way to really get the team talking directly to the experience rather than creating documentation that only talks around it.

Happily Ever After: The Reality Link

Fallen Princesses - Dina Goldstein
Image source: Fallen Princesses by Dina Goldstein25

There are many different opinions on what the ideal user experience process should be. Many of them stem from the fundamental approaches developed by Alan Cooper26, a pioneer in building software with user-driven experiences. But as technology evolves, so do the approaches and processes to create solutions that meet users’ needs. The variety of approaches in UX are akin to the number of frameworks available for developing software. Much of the time it comes down to what is best for the type of projects a team typically works on.

Your ability to adhere to a process is dependent on many things, like timeline, budget, and business goals. In reality, it’s not always possible to do everything as specifically outlined. UX Storytelling is a way to connect teams quickly, and gain insight and understanding. The experiences we create communicate with those elements through the design, content, and user interaction. Storytellers have successfully been communicating for much longer than websites have been around — which makes it a valuable tool from the business side of design.

To Be Continued… Link

In the second part of “Better User Experience Using Storytelling”27 we will hear from creative professionals leading the way in this relatively new world of combining the craft of UX storytelling with user experience. We’ll also look at how storytelling can be applied to more than just interactive experiences — we find it in everything from packaging to architecture.

Resources Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33

↑ Back to top Tweet itShare on Facebook

Francisco Inchauste is an interaction designer at Universal Mind, helping clients create great Web experiences. He regularly contributes to Web design blogs, magazines, and books. He recently served as Editor of Smashing Magazine’s UX Design section. You can connect with him on Twitter, or read more on his blog.

  1. 1

    Mike Paciello

    January 29, 2010 6:31 am

    Fantastic blog! Much needed. Have been promoting Storytelling as a usability methodology in the area of accessibility to ICT/Software for people with disabilities. Designers and developers seem to have a difficult time understanding the reasons supporting well established technical standards in this arena. Storytelling is bridging the gap — it’s making the connection between user requirements and user experience by emphasizing the latter.

  2. 2

    Indeed a very useful and inspiring «cross-over» article. I am looking forward to part II. Thank you very much, Francisco.

  3. 3

    Not my cup of tea, but maybe some one likes it…

  4. 4

    GREAT article. Thanks for pulling the sources and the great visuals.

  5. 5

    Patrick Cohen

    January 29, 2010 6:38 am

    I really like this article! And I strongly believe storytelling is the x-factor for everything.

  6. 6

    Johnny Rocket

    January 29, 2010 6:44 am

    It’s great how we can apply other insights and principles from other fields to improve user interaction. Nice post.

  7. 7

    this post is amazing! thank you!

  8. 8

    Whoa! I feel like I’m back in college… this is a pretty intense cognitive, and design deconstruction and evaluation. This level of discussion is pretty impressive for Smashing… you are actually encouraging a greater understanding above and beyond simple compositional design and color theory (also important info) as you delve into the narrative of web experiences. To bring up Joe Campbell, Jung, and Star Wars in the discussion of the UX is very encouraging!
    Thanks and I, for one, look forward to more articles that are so rich in information!!!

    • 9

      Agreed. Good article.

      And Smashing needs more articles like this – as soon as the community understands that design today is about solving business problems, and should be driven by a deep understanding of our user’s needs, goals, desires, fears, hates, etc., then we can move beyond the “cool colors!!!!” level of discourse, and actually discuss how to create effective designs from a conversion and customer satisfaction perspective. The IA and IXDA communities have been engaged in this type of deep discussion for years…

  9. 10

    Expanding Root Art Garden

    January 29, 2010 7:55 am

    I am an artist trying to communicate my view of the world. I have recently started using storytelling as my vehicle to get out my message. Thanks for the article. It is a great break down of the design of a story and the impact a story can have.

  10. 11

    I must say that this is the best article I’ve seen this year! Can’t wait to see the next part. Great job.

  11. 12

    I really enjoyed your article. I thought the graphics really helped push the reader forward and created a sense of interest.

  12. 13

    Alexander Babich

    January 29, 2010 8:43 am

    Amazing article! I’m just can’t wait to read next part!:-)

  13. 14

    I love the picture Fallen Princesses!

  14. 15

    Really like the article. Basically the “Revealing the Design in Stories” part.

  15. 16

    The awesome post….

  16. 17

    Pete Skenandore

    January 29, 2010 9:28 am

    Wow, what a nice surprise on SM today!

    Looking forward to part 2!

  17. 18

    Very well done! It is good to see you guys diving deep into UX. :) Narratives are so important to persona development, yet so often overlooked. Looking forward to the next one.

  18. 19

    Nice article about user experience, this field is like the future of design world. I am also planning for some research work in user experience and interaction design. Thank you such nice article.

  19. 20

    Dorival Teixeira Neto

    January 29, 2010 10:11 am

    Excellent article! Waiting for the part two :)

  20. 21

    once again, its like I have a spy from smashing sitting on my shoulder, VERY RELEVANT to what I am working on now.. =)

  21. 22

    Great article!!! Very interesting information. This kind of knowledge is usefull for designers. It helps us build better design pieces.

  22. 23

    Generally speaking, the message of this article is right on par. But…

    When research is finished, we typically move on to create personas as a way of understanding the user and can be looked at as part of creating the story. By building a fictional representation of the user that is based on real research and observation, we are able to empathize with them and really understand their needs.

    I disagree. Personas should definitely not be fictional in any way. The names may be changed, but the motivations, experiences and disciplines of people should not be averaged into a fictional character. When measure how real people interact with your design, you should keep people as real as possible.

    Looking forward to Part 2.

    • 24

      Francisco Inchauste

      January 29, 2010 11:58 am

      In referring to Alan Cooper’s book “About Face 3” it describes building and expanding on your personas. In creating this narrative (based on the research relevant to that persona) you would also include some fictional pieces: situations about their job or lifestyle, photograph’s of what they look like, etc. This is to make them as real as possible to engage the UX team. So it’s a balance of real research with a bit of fiction to create a holistic image of a persona.

      That is my take from the definition and how I use them. Thanks for reading and the comment Josh.

  23. 25

    Tom - Airopia

    January 29, 2010 1:22 pm

    This was pretty interesting!

  24. 26

    Thanks for this. Especially the reference to “Fallen Princesses.” I have never seen that before, and it really inspired me (I’ve been writing a story called “Divorcing Prince Charming” with the very same theme) So thanks! The article was great, well thought out insight and great tid bits!

  25. 27

    Whitney Quesenbery

    January 29, 2010 8:07 pm

    Great article. Sums up many of the ways that connecting to elements of stories and storytelling can connect our work to deep human cultural values.

    As Mike Paciello says, it’s an effective way to help a design team understand the user context, and then turn that understanding into an excellent user experience.

    Storytelling in user experience design has so many uses. Nice to see all these perspective brought together. Can’t wait for Part II.

  26. 28

    The art of telling story really connects the people…thats what suggested in this article…

  27. 29

    Quality article,
    First time since ages, I read full article on SM without skiping and scroling ;)
    Good reaserch, looking forward for next part.

  28. 30

    This is a great article. Informative and clever. Thank you :)

    • 31

      January 19, 2009 dniemo niya sa akin paano palabasin ang blade ng cutter at kung paano i-lock ang doorknob na parang nabuhay na something something for dummies. nakakatawa siya actually, bukod sa nakakainsulto. hahaha.

  29. 32

    Eddy Kindermans

    January 30, 2010 4:24 am

    I used to work for many years as a scriptwriter AND ux expert and never understood the strange looks of people when I told them. This articles proves the combination wasn’t crazy at all. By the way, especially for the comics lovers, a nice add would be the works of William Eisner and his pupil Scott McCloud on how stories and comics work. You will also notice a lot of similarities between film and comics. After all, everything is a story…

  30. 33

    Nice article!

  31. 34

    Nice, guys. Anyone who’s interested in furthering their understanding of storytelling should definitely own Campbell’s books. You may also want to check out The Writer’s Journey, especially if you ever work in media that’s more straight storytelling. Finally, if you ever do screenwriting of any kind check out the late great Blake Snyder’s book Save The Cat.


  32. 35

    Great article, Smashing! Definitely looking forward to part 2…

  33. 36

    great article, really informative and something everything should be doing but unfortunately doesn’t do enough. thanks for the great post!

    Concept Genius – Become a concepting Genius!

  34. 37

    Good post. Thanks for writing!

    I plan to use storytelling throughout my new media project.

  35. 38

    Awesome post. As a writer and designer, I definitely appreciate this article and understand where you are coming from.

  36. 39

    that’s the right way, less contents and more content quality.

  37. 40

    Veeery nice!
    Thanks for sharing!
    It is indeed usefull.

  38. 41

    Great article, next part please!!!

  39. 42

    Many thanks for your posting. I’m thinking about those connections for a long time, too. Can’t wait for part 2 – it’s a good story ;-)

  40. 43

    it was useful to read this, and to try experience some of this tips in my future writings :)

  41. 44

    Sanchit Thakur

    January 31, 2010 9:25 am

    Dear Francisco,

    Please keep on writing about this..

    Waiting for next part!

  42. 45

    Great article – thanks!

    We ( uses storytelling on our homepage as a way to illustrate what the software provides to our customers. Check it out at

    The Streetfolio team

  43. 46

    Great post!! really very informative for a new bee like me..looking forward for the 2nd part.



  44. 47

    Very much looking forward to the second part of this paper.

  45. 48

    When will you be posting part 2? We are looking forward to it!

  46. 49

    Very informative article. Great analogy of the Hero’s Journey. I like it and plan on using this methodology in designing user interface and UX for my future web projects. I believe story telling is a great way to connect human, emotionally, as it has been for thousand of years.

  47. 50

    UPA is hip to this as well …

    Eagerly awaiting Part II

  48. 51

    wow…its a great assimilation of color…:-? :D

  49. 52

    Great article! For further information about Joseph Campbell – you can obtain books and videos from the Campbell Foundation at The links into the film industry are great ones and I would add:
    Story by Robert McKee
    The Way of Story by Catherine Ann Jones
    Inside Story by Dara Marks
    Both Jones and Marks attended Pacifica Graduate Institute which Campbell helped form and the school offers many workshops on story that might be of use. The Campbell archives are also housed at Pacifica if you are interested.

    I really enjoyed how you linked all the various silos together to support the use of storytelling as both art and science. Looking forward to part two. thank you!

  50. 53

    This is very interesting, and I can see its application in all aspects of design.

    For example, in motion design, every transition, movement and wiggle should be there to help tell a story. Instead, too often, we get “eye candy” thrown at us.

    Don’t get me wrong, there are times when “this looks cool” IS the story, but when it’s not, the story may get confused. So instead of wanting to buy a hamburger, I think “wow, that’s funny.”

    Where’s the beef indeed.

  51. 54

    good article

  52. 55

    Business Sprouts

    February 15, 2010 9:05 am

    Thanks for the article! Very useful!

  53. 56

    I need to print this out. Seriously impressive. User experience has never really gotten its moment in the limelight it deserves. What is sad is that there is a lot more assuming that there is real research. Everyone has a opinion, their own experience being a user of functionality however I think the tides are beginning to turn and most marketing professionals are now begging for their leadership to start doing research. One of my favorite quotes is “If I had asked people what they wanted, they would have said faster horses.” – Henry Ford. I take it as if we don’t formulate our research and just ask we are not going to get the “right” answer. This is where marketing professionals should be required to take real science classes. Time to break out the real passion for designing, coding, writing and presenting something that is user centric, based on real data whether from analytics or research.

  54. 57

    Storytelling is definitely relevant to the design process. I wrote an article that shows the elements of storytelling can help you create a successful user experience.

  55. 58

    Tiffany Harrison

    August 2, 2010 7:26 pm

    The article gives a great break down of the expectation of the end user or viewer. It is important that your audience walk away with a personal and emotional investment to your work. What good is your work if you can’t engage your audience.

  56. 59

    Jagannath Joshi

    October 8, 2010 3:39 pm

    Awesome article, thats my theory fall in circle (brings team together) to improve user experience. Also, impressed with “Fallen Princesses.” Thank you!

  57. 60

    Loved the article.
    I have always wondered weather it is fair to call the profession of designing of interactive products as user experience design. Experience is such a elusive aspect that depends on the context (a term that contains all real, imaginary and unaccounted possibilities). How can someone design experience?

    But movies is what made me believe that indeed it is probably possible to create moments and experiences that all can share.

    i would say it again …loved the article

    Have got lot of ideas flowing but cant write it through phone ….
    Thanks francisco

  58. 61

    Hello ,

    I heard about a great MOOC (free university online courses, for everybody) entitled “The future of storytelling”, and I wanted to share the good news with everybody interested in storytelling.

    The MOOC will be about :
    • storytelling basics,
    • serial formats (on the TV, web and beyond),
    • storytelling in role-playing games,
    • interactive storytelling in video games,
    • transmedia storytelling,
    • alternate-reality gaming,
    • augmented reality and location-based
    • the role of tools,
    • interfaces and information architectures in current storytelling.

    The course starts on October 25th, 2013, so don’t waste time to enrol and don’t forget to share the good news with your friends :)

    You can follow this URL to to discover the course and/or enrol :

    May be I’ll meet other readers of smashing magazine in the MOOC?! :)


↑ Back to top