The hero’s journey: who is the hero on your site
Why:You’ll meet the best-known pattern of stories, Campbell’s and Vogler’s hero’s journey, and its main use for a site: the visitor is the hero, and the project is the mentor. Afterwards you have your client’s path laid out in this pattern.
25 minutes
Read by speech synthesis (Qwen3-TTS); the voice is not a person’s.
The hero’s journey is Campbell’s pattern of stories, in Vogler’s twelve steps: a hero leaves the familiar world, faces trials and returns changed.
The monomyth
In 1949 the American mythologist Joseph Campbell published The Hero with a Thousand Faces. He compared the myths and legends of many peoples and noticed one shared movement: the hero leaves the familiar world, passes trials in a strange one, wins a prize and comes home changed. He called this common form the monomyth (“one myth”). It has three parts: separation, initiation and return.
Campbell wrote about myths, not screenplays. But filmmakers and writers were captivated by the book, George Lucas among them, who has said it helped shape Star Wars. In the 1980s Christopher Vogler, a story analyst for Hollywood studios, retold it for film: first in a memo for colleagues, later in the book The Writer’s Journey. He kept twelve steps. Many films and novels are now analyzed with them, and after them, so are the texts of brands.
Check yourself: what are the three parts of the monomyth?
Separation from the ordinary world, initiation (trials and reward), and return.
The twelve steps
The steps fall onto the three acts from the last lesson.
Act one: the ordinary world and departure.
- Ordinary world. The hero lives as they always have. We see what they lack.
- Call to adventure. An event happens that makes the old life unworkable.
- Refusal of the call. The hero hesitates, or is afraid.
- Meeting with the mentor. Someone appears who has experience, advice or a tool.
- Crossing the threshold. The hero decides to take the first step.
Act two: initiation. 6. Tests, allies, enemies. 7. Approach to the inmost cave. Preparing for the hardest part. 8. The ordeal. The deciding moment. 9. Reward. The hero gets what they set out for.
Act three: return. 10. The road back. 11. Resurrection. The last test: the hero proves they have changed. 12. Return with the elixir. The hero comes home changed, and brings something of use.
Press the circles on the diagram: each step has a meaning in a story and a place on a site. At the bottom of the diagram, the hero and the mentor from your brief are filled in.
1. Ordinary world (act 1)
In the story: The hero lives as they always have, and we see what they lack.
On the site: The first screen: the visitor’s recognizable situation.
The hero of this story: The people it is for. The mentor: Your project.
Check yourself: which step matches the main-action button?
Crossing the threshold: the moment the hero decides to take the first step.
Who is the hero here
For a site, this pattern holds one valuable idea, and it concerns roles, not structure. The most common mistake in company stories is making yourself the hero: “We founded, we grew, we won an award”. But readers look at the world from the position of the hero of their own life. They need a story with a place for them in it.
So a sensible casting looks like this.
- The hero is the visitor. They have a problem or a goal.
- The mentor is your project. It knows the way and can help. It doesn’t have to win itself: a mentor has few scenes in a story, but each one matters.
- The elixir is what the hero takes home (a result, peace of mind, freedom).
Donald Miller’s book Building a StoryBrand, which you met in the StoryBrand lesson, uses the same casting; in the lesson on the page skeleton it becomes the order of sections. Here it is enough to take away this: write about what happens to the client, and enter the story when they already need help.
It’s easy to be a mentor in only two cases: you show that you know the path (a fact, a document, experience, not adjectives), and you give the hero a clear first step. The rest they have to walk themselves, and that is not your weakness: nobody likes a story in which the mentor does everything for the hero.
Check yourself: how can you tell you’ve cast yourself as the hero?
The text is full of “we” and “our company”, and the visitor appears only at the end, or not at all.
Practice
Take the hero from your brief: your audience is already filled in on the page. Fill in their path.
- Before they meet you (three lines, no “we”): ordinary world, call, refusal.
- Meeting and path: a mentor line that names your service or product, a threshold line with your button’s label, the reward and the elixir.
Write in short, lived-in sentences. You don’t have to invent drama: an ordinary case is enough.
What next
The pattern is beautiful, but it has many critics. In the next lesson you’ll meet a simpler version, Dan Harmon’s story circle, and find out what people object to in the hero’s journey and which stories are built differently.
Practice
Preparing your page…
Test
Question 1 of 6
Cards
These cards go into your review once you finish the lesson.
What is the monomyth?
Answer
The shared pattern of myths that Joseph Campbell described in 1949: leaving the ordinary world, initiation through trials, return with a gift.
Vogler’s twelve steps, in brief?
Answer
Ordinary world, call, refusal, mentor, threshold, tests, approach to the cave, the ordeal, reward, road back, resurrection, return with the elixir.
Who is the hero on a site, and who is the mentor?
Answer
The hero is the visitor, who has a problem and a goal. The project is the mentor: it knows the way, gives a plan and helps.
What is the most common mistake in using the hero’s journey?
Answer
Making yourself the hero (“we founded, we grew, we won”). Then the visitor finds no place in the story for themselves.
Sources
- Hero’s journey (Wikipedia) CC BY-SA, in English
- Monomyth (Wikipedia) CC BY-SA, in English
- The Writer’s Journey, on Christopher Vogler’s book (Wikipedia) CC BY-SA, in English
- The Hero with a Thousand Faces, on Campbell’s book (Wikipedia) CC BY-SA, in English
Videos
What makes a hero? (Matthew Winkler, TED-Ed)
The video loads from youtube-nocookie.com only when you press play.
Next
You now know: the hero’s journey.