Storytelling frameworks in UI: Hero’s Journey vs. Pixar

Storytelling frameworks are narrative structures utilized to write good stories. UX designers can leverage these storytelling frameworks to discover and understand user problems, plan their approach to solving them, present compelling value propositions, and ultimately deliver good user experiences. The end-result is a script made up of notes, wireframes, storyboards, and whatever else helps you to pitch compelling value propositions, plan streamlined user flows, and present good content design that resonates with user needs and wants.

When applied to UX design, storytelling frameworks help us to put real user needs first, leaving any features and content that users don’t truly care about behind. That results in more engagement, more conversions, and better user experiences overall.

Two of the most powerful storytelling structures for UX design are The Hero’s Journey and Pixar’s Storytelling Framework. While they share similarities, their nuances can lead to different design outcomes. Let’s explore and compare them.

Hero’s Journey storytelling framework in UX design

The Hero’s Journey, also known as the monomyth, focuses on a protagonist’s transformation. In UX, the ‘hero’ is the user, and their journey unfolds as they navigate problems, seek solutions, and engage with a product.

I’ll take To Kill a Mockingbird (a book and film) as an example.

The story is told by Scout, aged 5-9. As the reader, you empathize with this little girl trying to make sense of some very adult concepts in 1933 Alabama, something that she does by the end of the book. If we were to frame the story from a third-person perspective, however, this would put more focus on the characters of Boo Radley and Tom Robinson, who both have sad, plot-driven endings. With a storytelling framework that doesn’t prioritize personal development, Scout doesn’t grow up, or at least we don’t feel it or understand it from a first-person perspective — the story is just plot, which isn’t what we want for our users. We want them to feel transformed in some way.

The Hero’s Journey is a 12-step storytelling framework. Adapted for users instead of readers, it looks something like this:

1. Ordinary world — Who is the user and what’s their life like? You’d essentially be creating a user persona in this step
2. Call to adventure — The problem arises. How does it make them feel? What’s their reaction?
3. Refusal of the call — What stops them from finding a solution? For example, maybe they’re reluctant to try new things, or their predicament isn’t uncomfortable enough?
4. Meeting the mentor — How can we help them right now? A course? A sales demo? A free trial? What would make them feel comfortable taking that leap?
5. Crossing the threshold — How do they embark on this journey? What steps are involved? Product reviews? Content marketing? What’s their game plan?
6. Tests, allies, and enemies — What concerns or challenges do they face at this time? Who or what is an ally that steers them towards our product? Who or what is an enemy that steers them away?
7. Approach to the inmost cave — The point of no return, where users reflect upon their goal and decide whether to fight (e.g., check out) or flee (e.g., abandon checkout). What makes them continue on their journey? What makes them turn back? At this stage, do any new roadblocks appear?
8. Ordeal — This is when the user first uses the product to slay a real challenge. How do they do that, and what are they reborn as? In what way do they level up?
9. Reward — The moment of initial success. On Airbnb, for example, this is the “You’re all set for [destination]” email
10. The road back — Encouraging continued engagement and progression. Let’s say that the user has paid for a course and taken the first lesson. They’ve become reborn as a padawan gardener who has potted their first Azalea. How do we push them towards becoming the master gardener that they need to be to save their home, and meet their ultimate goal?
11. Resurrection — The final boss, typically characterized by a series of setbacks and triumphs, followed by the ultimate reward and/or vindication
12. Return with the elixir — People don’t want to buy cars, they want to get to places, so this step is about ensuring (or just checking) that the user’s true needs and wants are being met. It’s also about reaffirming that the journey was worth it, perhaps enough to embark on another journey or encourage others to embark on it, and also recapping how far the user has come since step 1

As you can see, the 12 steps don’t just clarify the problem and solution. They allow you to develop and communicate a compelling value proposition for users.

As a UX designer, you’ll also do UX research along the way, learning more about the user’s journey across different touchpoints, enabling you to script a streamlined user flow and good content.

This storytelling UI framework is a very complete UX process (it’s almost a product design process!) compared to, for example, Pixar’s storytelling framework, which is only six steps.

However, the Hero’s Journey can be complicated at times. Let’s see how it compares to Pixar’s storytelling framework.

Pixar’s storytelling framework in UX design

Pixar’s Storytelling Framework, or “story spine,” is a streamlined six-step narrative structure:

1. Once upon a time — Who, where, and when? This is essentially the demographics part of a user persona
2. Every day — Goals, motivations, and behaviours; the rest of the user persona
3. Until one day — The problem arises. How does this make the user feel? What does the arrival of this problem mean for them? How does their life change? What are their initial thoughts?
4. Because of that — The user’s journey toward a solution. How do they try to solve the problem? What do they search for (if anything)? Where do they seek advice (if they do)? What other issues do they run into, and if they attempt to fix them, what happens?
5. Because of that — The discovery and adoption of the product. How does the user discover our solution and ultimately solve their problem?
6. Until finally — The resolution and how the user’s experience evolves. How does the “Every day…” equilibrium get reset, and also, how does the user’s persona change? How do they level up? What are their goals then?

As you can see, Pixar’s storytelling framework doesn’t neglect UX research — acquiring the same insights is certainly possible. However, since there are only six steps, you aren’t necessarily prompted to do so (although I’ve tried to mitigate this for you by prompting you with a lot of questions).

---

Over 200k developers and product managers use LogRocket to create better digital experiences

Learn more →

---

For example, there’s no ‘refusal of the call’ step. So you’re not explicitly prompted to figure out what might prevent users from seeking out a solution to begin with. We could say the same thing for the ‘crossing the threshold’ step — Pixar’s storytelling framework doesn’t have something akin to this step, so you might not learn about the user’s mindset and behaviours as they seek out a solution to their problem.

With Pixar’s storytelling framework, it can feel as if you’re barely scratching the surface in terms of insights when compared to the Hero’s Journey. It’s practical focus on the problem and solution can feel superficial and impersonal.

Imagine reading To Kill a Mockingbird in the third-person — it’d be a much shorter book, very to-the-point, but plot-focused and not very thought-provoking or transformative. But, to reiterate, very to-the-point, which is certainly a positive.

Another positive is that Pixar’s storytelling framework is super simple, unlike the Hero’s Journey whose stories can feel stuffy at times. I couldn’t even tell you how many times I’ve scripted a step just for the sake of sticking to the framework.

Pixar’s storytelling framework is also chronological, whereas with the Hero’s Journey, some steps actually happen at the same time (at least when the framework is applied to UX design). This can be confusing when scripting the story.

All in all, Pixar’s storytelling framework is more vague but simpler and less rigid, which as an added bonus makes the script more digestible to other cross-functional teams (e.g., marketing teams) that can use it (e.g., for marketing campaigns).

Comparing Hero’s Journey vs. Pixar

In any case, they’re both awesome as it’s easy to miss certain user insights when approaching UX design from a non-storytelling perspective.

Personally, I like The Hero’s Journey because it forces me to really think about the user’s needs/wants and journey and what their user flow should look like, but those 12 steps can be tough to script. This is why I prefer to think of the steps as prompts for UX research, and instead script the user experience using Pixar’s storytelling framework.

They work really well together.

Conclusion

Storytelling frameworks such as the Hero’s Journey and the famous Pixar storytelling framework can help UX designers tackle UX design creatively and methodically. This ensures that users get an experience and not just a product; that they leave feeling fulfilled and not just nudged into an optimized conversion funnel.

However, each storytelling framework is different in its approach and you must understand these differences in order to choose the best storytelling framework for your product. In a nutshell:

• The Hero’s Journey storytelling framework is best for leaving no stone unturned, doing lots of UX research, and planning as well as presenting an excellent user experience that meets user needs
• Pixar’s storytelling framework is best for creating simpler, summarized scripts that are friendly to all cross-functional teams that might want to utilize them

For best results, utilize The Hero’s Journey storytelling framework to script a killer user journey fueled by UX research, then translate those insights into a more digestible script using Pixar’s storytelling framework. You can do this with wireframes, storyboards, plain words, or any combination of those. It’s just a planning exercise, so try not to overthink it too much.

Problem-Agitate-Solution (PAS), which is a copywriting framework, is worth mentioning as well. While not actually a storytelling framework, PAS can address a user problem and then present the product as a compelling solution using narrative techniques. You’d use it when turning scripts into actual apps and websites.

Got a tip or question? Comment below. And thanks for reading!

LogRocket: Analytics that give you UX insights without the need for interviews

LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.

See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.