Wireframing a Landing Page using The Hero’s Journey
By: Dave Deboom
Tags: Landing Pages, Heros Journey, Sketch, Wireframe, Storytelling

1. The hero

Your user is the hero of the story, not you.

A lot of products and services struggle to engage their audience because they begin speaking about themselves and not about what their user needs. Who you are is not important for your audience, what lives in your head about what your product is and what your logo means couldn’t be less important for them. It doesn’t matter how great that story is if you don’t let your users know how can you help them get what they want.

2. The villain

The problem you are trying to solve can be personified as a villain.

A villain is what defines a hero, think Darth Vader to Luke, the Joker to Batman, Goliath to David, and so on. Your user has a problem, it may be extra-weight, a long boring commute, existential despair, etc. You can personify this problem as a villain to make it more approachable, and to insert your product in their lives as a relevant piece of a story.

There are several levels for problems, although most of them (if not all) have deeper connotations and roots. For example, people don’t buy organic yogurt to “solve the problem” of keeping themselves alive, they buy it to serve a particular self-image and seek validation within a particular peer group, organic yogurt is solving a problem of identity, not of nourishment.

There are countless examples, particularly interesting to me are the behavioral triggers powering Elon Musk’s companies, such as Tesla and Neuralink. I suggest you read this series of articles on Wait But Why and his biography by Ashlee Vance.

3. The Guide

Your product or service is the guide that helps the hero defeat the villain

I think there is a clear distinction to make, you (as a brand) don’t “solve” the problem of your users, you enable them through your products to solve them for themselves, ultimately empowering them and creating an even more significant connection.

However, you must position yourself as the guide before they are willing to let you help them. There are two main questions in the mind of your users that you must address, “can I trust this guide?” and “can I respect this guide?”. You must create a deep sense of empathy (trust) by letting them know you are deeply invested in their problem (you have walked their path) and a sense of respect by letting them see how you have vanquished the same enemy and why are you posing now as the guide.

4. The Plan

The guide always comes up with a plan or gives the hero an artifact to defeat the villain, this is your product or service.

Luke receiving the lightsaber, Ironman building the ultimate suit, Hercules overcoming the twelve tasks, all heroes have to go through this transformation process to find the tool that will ultimately help them win. Your product should be the same, it should make your users feel as they are acquiring super-powers.

There are two kinds of plans, the process plan, and the agreement plan. The process plan tells the story about how your product works, like the plan to bomb the core of the Death Star, it lays down the process and the reasoning behind your product or service to help them see how it works. The agreement plan describes the compromises you acquire when they choose to do business with you, it can help ease out any remaining fear that is stopping your users from buying, for instance a free trial, a satisfaction guarantee, or a refund policy.

5. The call to action

After the hero has acquired the artifact, it “takes action” and by defeating the villain is transformed, your product is the driver of that transformation.

Some users need more motivation than others to walk forward and face their dragon, you can ease up this process providing a “transitional” call to action, for instance letting them book a demo or a consultation call. Also, providing your users with additional content strengthens your position as the guide, free programs, papers and studies are a great way to keep building that image. And of course, helping people is a reward on itself.

Of course, there is much more to design an effective landing page but I hope this frawework can help you get started. You can download a Sketch or Figma file containing a wireframe kit and a design library that can cover a wide range of prototyping tasks. I hope to keep this file updated as see fit and as I have the chance. Meanwhile, I hope you find it helpful, and if you have any sort of question or request I can be found at davedeboom.com

Thank you for reading. Happy wireframing.