Finding the Hero Before the Layout
Before any interface work begins, there is a more fundamental question than “what should this page look like?” — namely, “who is this experience for?” In storytelling terms, the protagonist is never the product itself. The story belongs to the user, and the product is simply the vehicle that carries them through it. For the Smart Interface Design Patterns landing page, that meant first identifying the audience in concrete terms: UX and UI designers from beginner to advanced levels.
The frustrations of that group are largely temporal. Beginners lack the time to research and internalize design patterns, wanting quick explanations of why one pattern outperforms another. More seasoned designers struggle to stay current with best practices between client projects. Both groups share a core problem: finding time to learn without sacrificing production work.
That shared pain point shapes the story’s entire why. Aristotle’s ancient three-act structure — beginning, middle, end — has survived since 300 BC precisely because audiences, whether reading a drama or scrolling a landing page, need a narrative that clearly serves them. Perhaps the best-known demonstration of this principle in technology is Apple’s shift in communication direction when Steve Jobs returned from Pixar, where his exposure to professional storytellers led to a hard pivot toward customer needs — a move that drove the company’s later success.
Step 1: Know Your Protagonist and Your Purpose
In this case, the course creator, Vitaly Friedman, had already gathered audience insights through workshops and conferences. Existing products allow for more formal research tools like usability tests and heat maps; for this project, reviewing the video course chapters provided the necessary clarity about who the design would serve.
Once the protagonist is understood, the story’s purpose follows. The audience stays engaged only when the narrative resonates, so the intention must be explicit from the start. Recasting Simon Sinek’s Golden Circle for this project yields three layers:
- The why confronts the protagonist’s lack of time. The story communicates, first, that learning is an investment and, second, that the course’s curated research will save both time and effort.
- The how speaks to the audience’s learning goals: if they are hungry for knowledge, they will be satisfied.
- The what is the natural consequence of both: subscription to the video course. This only works after visitors evaluate the benefits and sample the material through free previews, extra gifts, and persuasive elements such as testimonials.
The protagonist and their purpose set the stage for the next narrative element: the plot. A story that lacks this foundation is hazy and irrelevant; one that starts from the audience’s actual constraints has somewhere concrete to go.
Act II: Structure The Narrative
Storytelling structure has roots in Aristotle’s observation that effective stories form a chain of cause-and-effect moments, where each scene leads naturally into the next. Applied to product design, this translates into a narrative with a clear beginning, middle, and end. A useful framework for this is the StoryBrand Structure popularized by Donald Miller, which describes a protagonist with a goal who encounters a problem, meets a guide who offers a plan, and is invited to take action — ultimately avoiding failure and achieving success. Combining this model with Aristotle’s three-act format provides a strong backbone for any product narrative.
Act I: The Setup
In the first act, we establish the situation. In UX terms, this is where we introduce the hero of the story who has challenges and objectives. At the end of this act, the protagonist meets the guide — who is not another hero, but a helpful presence that shows the way forward. The guide’s defining traits are empathy and authority; they must be someone the audience trusts and wants to follow. This trust should be reinforced across every brand touchpoint.
Looking at the landing page example, the guide is Vitaly Friedman. Examining his background reveals a history of contributing skill and insight to Smashing Magazine, as well as leading workshops and conferences. His established reputation within the UX community confirms that he embodies the necessary credibility and expertise.
For the narrative in The Neverending Story, the child-protagonist Bastian is the hero with a problem: he feels neglected and bullied. The guide in this setup is the bookseller whose book Bastian takes. Through the book, Bastian learns of the struggle in Fantasia against “The Nothing.” He then realizes his role in the plan — giving the Empress a new name — which forms the direct call to action that prevents the failure of his hero, Atreyu, and leads to the ultimate success of saving the empire.
Act II: The Confrontation
The second act is where the transformation of the protagonist takes place. At this stage, the guide answers the question “What do you want me to do now?” with a clear plan. The plan should lay out the specific steps and remove any sense of ambiguity or risk. For the landing page, Vitaly lists the course content in detail, lays out the subscription process, and points to the unique value of each plan.
Part of the guide’s role at this stage is to communicate what specific action the hero needs to take next. This goes beyond a straightforward command. Rather, the users need to be invited along on the journey. The action in the landing page takes two forms:
- Direct: Prominent “Buy” calls to action.
- Transitional: Access to free video episodes, newsletters, and content samples.
Other forms of encouragement include testimonials and unlimited access to a deck of 165 UX checklists that help users learn and recall design patterns.
In The Neverending Story, Bastian must bridge his disbelief to act. When moved by the Empress’s plea, he runs to the window and calls out, “Moon Child.” This is the analog to what we ask of users in our designs: To visibly move forward with the information we’ve provided.
Act III: The Resolution
The final act brings the story to its climax, making clear what’s at stake if the hero does not engage. We should frame the negative consequences in a balanced way that motivates without paralyzing the user with fear. In the film example, the Empress taps into Bastian’s deep desire for belonging, explaining how his inaction will result in the loss of Atreyu and his dragon. Similarly, the video course landing page serves as a reminder that achieving UX expertise self-taught could take many years, in contrast to following the “bulletproof design patterns” of a 15-year veteran like Vitaly.
As a rule, the goal of our story’s ending is to urge users toward their better selves. A list of resolutions gives them something tangible to aspire to:
- Self-improvement: Gain more influence, knowledge, and the validation of a UX certificate.
- Networking: Get hands-on instruction, personal feedback, and collaborative work with Vitaly in an advanced workshop.
- Improve the web: Be a part of improving web experiences for all.
Act III: Connect To A Wireframe
Once the story elements are clear, they need to be woven together on a page, and each page can be treated as a single “shot.” Many shots create a scene, and a series of scenes makes up the complete site or application.
Sketches on plain dotted paper work best to start this process, mapping out plot points. In dramaturgy, plot points drive the narrative forward. Plot points in UX play the exact same role through actions like buy buttons, barriers like logins, delights like free samples, system events like confirmation messages, and triggers like notifications. Contrary to methodological concerns, consistency with the story comes before adapting to specific screen sizes; the journey must be flexible enough to fit a phone, a desktop, or a leaflet.
Opening Scene
In the first shot of the landing page, the goal is to pique the protagonist’s curiosity. The content should be persuasive and engaging enough to lead the visitor to scroll into the heart of the narrative.
Middle Scene
The middle scene carries the bulk of the narrative by introducing the guide, the plan, and the action. This area describes the full detail of the course, including samples. Content in this section should build authority and trust through testimonials from experts, presenting a case that moves the visitor beyond curiosity toward the moment of engagement.
Closing Scene
The closing scene is the resolution of the plot and present the two plans without distraction. The options personalize the end of the narrative by representing different aspirational outcomes for the visit. Here, the “Buy” button must be the sole focus to avoid breaking the user’s decision-making.
Supporting elements include the navigation and the footer; the former facilitates the journey while the latter offers alternatives and additional context for those who need more time before committing.
Emotional Connection: Making the Story Stick
With the journey mapped and content structured, the next concern is making the page unforgettable. Emotional connection is what separates a functional layout from a compelling story. It is delivered through design elements—color, imagery, animation, and sound—that give the user's actions meaning and intent.
To identify the emotional center of the page, I built a keyword map to force connections between disparate concepts. This technique pushes toward original, disruptive ideas by pairing elements that do not naturally belong together. The exercise produced a useful metaphor:
- User need (hungry learner): quick absorption of UX lessons; a craving for knowledge.
- Setting (kitchen): an informal, welcoming space.
- Instructor (chef): Vitaly as expert guide and teacher.
- Tools (recipes): the course's real-world examples, slides, videos, and notes.
The concept clicked: a thoughtfully prepared meal, delivered on demand. Hungry users follow Vitaly's recipes—the video lessons—on their own schedule. Each "dish" is packed with tips, tools, and examples, assembled for maximum impact.
The palette came from three sources: the blackboard that opens each course episode, the red of the Smashing Magazine brand, and the palette of Guillaume Kurkdijan's course artwork.
From the wireframe, I moved to richer sketches that clarified the visual field and served as the blueprint for the final illustrations.
Opening Scene
The first scene works as an appetizer, introducing patterns taught in the course—accordion UX, reviews, cookies, and menus—in a food disguise. The metaphor invites the user in with the surprising pairing and mirrors the user's initial curiosity.
Middle Scene
The center section shows Vitaly teaching, with course chapters presented like cookbooks on a shelf, browsable in a carousel.
A personal favorite is the interactive Buddha Bowl, used to break down what the course contains. Each ingredient—from ravioli to a bottle of oil—reveals a deliverable, satisfying the user's need for specifics about the offering.
End Scene
The final section holds the available plans, introduced with small, restrained illustrations tied to each pricing tier so as not to interrupt the user's focus at the decision point.
An image of an emptied bowl suggests partial consumption of the content at this stage—and hints there is more should the appetite remain.
Animator Cassie Evans gave these small elements subtle motion, keeping the page playful without sacrificing clarity.
A Narrative Review Before Launch
Before showing the work to users, I run the design through a checklist that measures it against the story defined earlier. The goal is to ensure the visuals and structure still serve the narrative.
What is the intended primary action?
This aligns with the story's action component. The page must offer enough plot points—buttons and triggers—to move the user through her journey at each stage.
What is the intended secondary action?
Secondary actions are the transitional invitations that keep the user engaged beyond the main call-to-action. They build the relationship before the final click.
Is the content supporting the need to scroll?
Scrolling is a narrative device. I check whether the scene order follows the logic set in the wireframe, ensuring enough plot points exist to carry the user along for the full story.
Is anything distracting the user from the task?
Clarity is critical. Each page should answer one central question, and anything that muddles the message or spreads focus across multiple outcomes must be removed. Here, every section ties directly to one of the three promised resolutions.
Can the user reach the climax quickly?
Users should have a path to jump directly to the main action—the pricing plans—just as readers skip to the final chapter of a novel. The navigation included a persistent "Buy" button that keeps the third act of the story available from the start.
Conclusion
Storytelling is a structured method, not just a creative buzzword. When applied deliberately, it gives brands a means to stand out—not through noise, but through a clear, user-focused message. It is a core competency for any designer, regardless of specialization.
The approach breaks down into five actions:
- Define the protagonist's frustrations and goals;
- Map a user journey that supports the protagonist's problem;
- Convert the journey into a wireframe;
- Create memorable visuals that engage the user emotionally;
- Audit the narrative against a set of strategic questions.
Just as in film, a coherent narrative structure allows for the creation of scenes and content that keep to the user's own story. That scaffolding also makes it easier to extend the world—to build the sequels.
The same underlying plot that powered this landing page has already informed other design work, proving the technique's repeatability.
The finished page is live at Smart Interface Design Patterns, and it benefited from contributions by several talented people:
- animation by Cassie Evans,
- chapter illustrations by Guillaume Kurkdijan,
- front-end development with Eleventy by Trys Mudford,
- promo art by Ricardo Gimenes,
- photography by Marc Thiele,
- and testimonials contributed by users worldwide.
Exemplary work from a dedicated team.
