How to Harness the Power of Storytelling for Compelling WordPress Websites

How to Harness the Power of Storytelling for Compelling WordPress Websites Brenda Barron July 27, 2016

#storytelling

#web design

Once upon a time, we lived in a world where websites had screaming neon colors and an overabundance of text to entertain and educate us. The Internet (think Geocities…) was a bright and shiny new place for us to play and, as web developers, we did the best we could, considering the circumstances: HTML, low screen resolution, limited color sets, and nothing to really work from aside from real-life print examples and our imaginations.

Fast forward to 2016 and our story has come a very long way. Computers, mobile devices, smart TVs, and even some cars now keep us connected to the Internet 24/7.

And as the technological devices we use to access the Internet have developed, so too has our ability to create beautiful, effective, and unique websites. If you're too young to remember what it was like in our not-so-long-ago and what it is like in our present day tale, take a look at this:

Google then and now.

While Google's look has always leaned toward the simpler side of things, you can see what a world of difference nearly 20 years has made. Whether it's Google's website or someone else's, there is much more thought and planning put into the design of every piece of a website now… because we have the ability to do so.

For businesses, a website serves as its online identity and is often the first point of contact they have with prospective customers. To have a website come across as an afterthought or something shoddily thrown together could be just as detrimental as a marketing director answering a client's call with "What do you want?" When executed the right way though, a website can be a highly effective marketing and sales tool.

With two decades of amazing advances in web design and development behind us and amazingly helpful CMS like WordPress at our disposal, businesses no longer have any excuse to not have an awesome-looking or well-functioning website. But is it enough anymore to just have a well-made website?

No!

Your audience expects a lot more from you these days. You may be able to draw them in with a perfectly executed web design, but if the content doesn't resonate with or intrigue them, you might lose their interest all the same. That's why websites need to tell a story. What story, you ask? Well, that depends. What do you offer? How can you put your audience into the seat of the story, to make them relate to the story, to yearn to find out what happens (to them) in the end? The story is yours and you'll need to find the best (and most creative) way to tell it through design.

PERFORMANCE Super speed and performance with WP Hummingbird

Lightweight and fast, Hummingbird caches, minifies, combines, defers and compresses, making optimizations in line with Google PageSpeed, and turning your website into a lean, mean, speed machine.

FIND OUT MORE How Does Storytelling Work for Websites?

There are many reasons why an author may write a story, but there is always one goal they hope to achieve: to get the reader hooked. It could be a bloody tale of revenge or a story about a little girl and her puppy walking home from the beach. It doesn't matter what the underlying plot is, the author simply wants the reader to feel something about the story.

Businesses are no different when you think about it. Their goal is to sell a product or service that can help improve their customer's lives in some way. You know this. That's why you believe in your brand. But it can often seem difficult to get that point across to an online audience when all you have is a bunch of words and images on a website to work with. Those words and imagery can be extremely powerful in telling your story though, especially when carefully constructed.

Find Your Story

Many businesses may see this and think, "I'm not a writer and we definitely don't have a story to tell. We sell dog ice cream." But that's not true. Even the simplest of business models—from the independent freelancer to the large enterprise—have a story to tell. It just might not be their own.

Let's say you are in the business of selling ice cream for dogs, you can think about your website's story in a number of ways:

Story #1: You share an illustration of Mr. Bear, a German Shepherd puppy. Mr. Bear is playing in the park with his friends when the ice cream truck comes by. His parents tell him he can't have any because that type of ice cream isn't good for him. Then you see Mr. Bear look sad as he watches his friends get their ice cream cones. But wait… you have a solution! [Insert image of a happy Mr. Bear eating your ice cream here.]

Story #2: Infographics are a great way to tell a story without having to create an official narrative. You can use oversized statistics and strong, but simple imagery to move your site's visitors through a their journey. Basically, this is what your dog's life would be like without dog ice cream (e.g. 25% less responsive to commands) and then this is what your dog's life is like with dog ice cream (e.g. 10% increase in energy and less visits to the vet required).

Story #3: You could also tell this story as your own. Maybe Mr. Bear really is your dog and maybe you felt really bad that he couldn't eat ice cream like his other puppy friends because he was lactose intolerant. That's why you were inspired to create your own brand of dairy-free dog ice creams.

No matter which angle you take, it's all about making a connection with your audience. That's why businesses have websites: they want to virtually connect and communicate with their audience in the hopes of selling their brand. With the right story in place and with the proper design executed to tell it, you can bring your visitors out of the passive reader role into something more interactive.

Focus on the Benefits

Let's take a moment to review the benefits of a storytelling approach for your website's design:

Create a Clear Vision: In order to tell your business's story, you have to truly understand who your brand is, what it aims to accomplish, and what your audience will really get out of it. If you don't understand your brand's value, developing a story for your website is definitely going to help you refine that vision.

Develop an Identity: Once you begin storytelling, you're never going to want to stop. Having an interesting and consistent brand identity isn't something that will stop with a single animated video or homepage storyline. This is something you'll want permeated through every part of your business's identity, virtually and in the real world.

Foster Real Engagement: Calls-to-action are used in web design in order to call your visitors' attention to what you want them to do. Contact us. Download this. Fill out this survey. But storytelling allows you to insert them into your story and, in a way, more genuinely engage with them.

Set Yourself Apart: Everyone has a unique story to tell, but not everyone knows how to translate it to their website (or their brand's identity, in general). By using storytelling principles to build your website, you are setting your website and business apart from the competition.

Enhance the Overall Design: When applying storytelling principles to a website's design, you're required to plan everything out in advance. Without that clear vision, it'll be difficult to effectively share your story online. So by taking the time to plan and prepare, your website will ultimately be more thoughtful and intentional in its delivery.

Of course, all the benefits above can only be achieved if you're willing to put in the time, effort, and creativity in order to create an interesting story that your audience can relate to.

If your website and/or brand doesn't have a clear vision…

If you're confusing "storytelling" with "pull out all the stops"…

If your business is too young and doesn't quite yet know its audience…

Then the storytelling approach might not be right for you. And that's fine. Just hold onto this article for future reference and jump back into it when you're ready to go.

How to Use Storytelling Principles to Build a Better Brand Story… and Website

Any great writer, teacher, or even movie critic will tell you that there are five critical stages in a story's plot. Regardless of whether you'll be telling a traditional "story" (like in Story #1 above) or conveying your brand's story through another approach, the goal should be to hit each five of these goals—and in this order—as your visitors traverse through your website.

We're going to explain what the stages are, provide you with some tips for how to create your story in that stage, and also give you some real-life examples that execute this stage well.

Ready?

Talent Garden is a coworking network for digital and creative professionals. In the Beginning…

"In the beginning," "Once upon a time," "In a galaxy far, far away"… These are all ways you've seen stories start out before. This is what is known as the Exposition or the setup of a story. You meet the characters, discover the setting, and realize that there's something more going on than meets the eye.

For websites, this is where you will establish the conflict. While the word "conflict" may have a negative connotation to it, that's not always the case in storytelling. Basically, it all depends on what you're trying to solve for your visitors. Whatever it is, your website's story needs to start there.

1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free! Subscribe

An Example:

Talent Garden's website is shown above. You can see that what they're offering is a coworking space. For their website's story, they've chosen to rely heavily on background imagery that speaks well to their audience: the freelancing community and other work-from-home individuals who want a place to work alongside others. They then use messaging that is very simple and clearly explains the "conflict."

Execution Tips:

Your story should start right away, not tucked away on some internal page.

Use very strong and clear copy to set up your story. There should be no confusion about what you do or why visitors should be interested in learning more.

Use big lettering to put the emphasis on what's most important.

Let the background design, color, or image set the tone of your story.

Utilize negative space in order to bring focus to the story you're telling.

Select color choices that will invoke the right emotions from your audience.

Consider creating a brand "mascot" to guide your visitors through the story.

…There Was a Problem…

The next part of your brand's story should deal with the actions arising from the conflict. Since the very beginning of your website (the top of the home page or the first part of a parallax scrolling site) dealt with the setup, it's now time to build the tension around the conflict. This is what's known as Rising Action.

When it comes to using design to tell this part of the story, it's all about action cues. Whether you have an actual story to tell or you're simply presenting your site's visitors with a logical set of information starting with "This is the problem you face" to "This is how we can fix it," you're going to need to guide them through the storyline visually.

An Example:

The National Geographic Channel's Killing Kennedy website. The site's design uses colorful sliding icons and text boxes to share the growing plot points and build up tension. You already know how the story between Kennedy and Oswald ends, but this site has done an amazing job in using design to guide the reader downward through the story and into the thick of the action.

The Killing Kennedy site uses interactive elements to engage readers.

Execution Tips:

Jump right into the action as soon as you've established the setting. Action, for most websites, is going to come in the form of movement and colors rather than actual action-packed dialogue.

Use simple navigation so your story is easy to follow and logical. Each scroll, section, or page should serve as a new "plot point." Don't try and stuff too much into a single space.

Keep tight control over the pace of your story with less text and more emphasis on visual cues.

Use bright CTAs or animation to move the readers through the story.

…And Out of the Blue Something Happened…

The very middle of your story should be the climax or high point. So in the case of Mr. Bear's story from earlier, you could reveal that dogs who receive ice cream during training remember commands 33% better than dogs who only receive biscuits. That stat should provide some sort of turning point in your story where visitors should feel surprised or shocked by the discovery.

Physical or emotional, you want the climax to elicit some sort of response from your audience, and you'll want the design of your website to reflect that too.

An Example:

From start to finish, the Make Your Money Matter website does an amazing job of telling the story of their audience's pain. It's in the climax though that they really outdo themselves.

The tension builds so wonderfully from the moment you start scrolling, that by the time you get to the climax, you might feel too nervous to fill out the calculator. But it's a simple request—simply fill out two fields. And then all they ask of you is to click a button (with an ominous looking color). The resulting screen tells you how much money the bank made off of you. Whatever your resulting emotion, you won't be able to help but feel compelled to continue through the journey to see what happens next.

Execution Tips:

This is your big reveal. It doesn't need to be earth-shattering, but it needs to be something that makes your visitors stop and wonder what this means for them.

Use a surprise action to engage visitors at this crucial moment. Play a video, use sound effects, include a shocking color, or interact with them through a form of gamification (like the calculator Make Your Money Matter uses).

…But Then They Started to See That Things Were Changing…

Think about your website (or your story) like a mountain. The exposition would be the base of the mountain. The rising action would be your climb to the top of the mountain. The climax would be the peak. And then you've got to make your way back down to complete your mission. That is the falling action.

In the case of your website's story, this can be any sort of action or steps that will logically direct visitors from your big reveal down to the final goal. Some websites lose it at this point and just start throwing random testimonials or social media feeds into what was previously a logical flow of information. Don't interrupt your visitors' train of thought. Make sure to keep them on track with the falling action.

An Example:La Moulade's website is the epitome of minimalistic design. And to top it off, it has one of the best examples of falling action I've seen.

After quickly stating who they are and then bringing visitors to their climax (a bicycle bell rings to let you know you're there), they guide you through snapshots from their creative portfolio. That's it. Their falling action is just a portfolio. No words. All images. And it works! Whether you're compelled to click on any of them to see more or just scroll to the end to find out what's at the bottom, they've found a simple and creative way to hook you.

Creative studio La Moulade's website is minimalist with lots of fun interactive touches.

Execution Tips:

Whatever you use in the rising action to guide visitors through your website, the falling action should mirror those same movements, designs, or CTAs.

There should be a simple flow from the climax to the conclusion of your website.

Keep the falling action to a minimum. Once you've hit the climax, your visitors are going to hope for a speedy payoff.

Use strong imagery or typography to keep the interest there, but don't overdo it.

…And That They Had a Solution to Their Problem All Along

The final stage is the end of your visitors' journey and the resolution of your story. Once your visitors have reached this point, there shouldn't be any remaining questions. They understood the story, they realize why it relates to them, and they feel compelled to now take the action you're requesting. The design piece of this will translate simply enough: give them a clear call-to-action that wraps up the journey and gives visitors an action they'll want to pursue now.

An Example:

Zensorium has a very simple product to offer, but that doesn't prevent them from sharing their story through well-crafted imagery, simplified text, bright swatches of color, and a logical progression of information. You can see this very clearly in the structure of their home page.

There is a rotating banner that takes up two-thirds of the left side of the page. It goes through bright and yet calming imagery that takes you through the basics of who they are. On the right-hand side, however, the images stay put (unless you scroll downwards). That is their resolution. Their goal is for you to purchase their products. So by engaging visitors with a simple timeline on the left, the static imagery on the right becomes the most logical final step.

Zensorium uses storytelling to sell its health and fitness trackers.

Execution Tips:

The resolution needs to be simple. Either a call-to-action box or landing page that lets visitors know: "This is where this journey ends. It's your turn to take the next step."

Make sure the action requested is simple. Fill out this form, purchase this, call us now, etc.

Wrapping Up

Developing a story for your website and brand doesn't necessarily mean you need to create some off-the-wall character whose adventures your visitors will follow through the site–though that might be pretty cool, too. Storytelling is about creating a unique journey for your website visitors—a journey that reflects the experience they'll have when they engage with you as a brand.

So take some time to really think about who you are and what story will be the most effective at getting visitors (and prospective customers) to relate to you. Then you can put all of these storytelling design principles into play.

Now it's your turn: What is your brand's story and how did you go about telling that story through your website's design? POST the first comment

Share on Facebook

Share on Twitter

Share on Google+

Brenda Barron

Brenda Barron is a freelance writer from Southern California. She specializes in WordPress, technology, and business and founded WP Theme Roundups. When not writing all the things, she's spending time with her family.

Source: How to Harness the Power of Storytelling for Compelling WordPress Websites