user experience & design

Storytelling Through Web Design

June 22nd, 2017

Narrative has long been ingrained into the DNA of web design. We organize and design by what we know, and everyone knows the layout of a story. A protagonist, a conflict; a beginning, a middle, an end.

What’s less understood is just how many ways there are to leverage narrative in your web design. A few weeks ago I wrote about the UX honeycomb, a model UX design companies use that depicts the key characteristics of a platform with an optimized user experience.

Storytelling Through Web Design

The UX honeycomb

It’s a lot to account for, but the best design practices often cover most of these characteristics at once. Enter: the storytelling technique. It’s the Swiss Army Knife of web design—a versatile tool you can employ to tune-up your website wherever it’s lacking.

Below I’ve listed just a few of the different ways you can inject narrative into your website, no matter your platform’s size, function, or budget. Take a look and discover how to upgrade your site with a compelling, engaging story.

As A Tutorial

A website that offers a product or service, of any kind, must answer a fundamental question asked by every user interfacing with their platform: what does it do?

There’s a few ways to accomplish this, whether it’s catching, bold copy, a bulleted checklist, or even a video, but by far the most engaging method is to present the information through a narrative.

This is one of the more typical applications of storytelling, largely because of its effectiveness. Take a look at Nest’s page for their high-tech thermostat. It features a parallax scrolling box that spins a timestamped story about you, the user, and your significantly improved life now that you’ve installed Nest in your house.

Storytelling Through Web Design

It not only masterfully answers that crucial question (What does Nest’s thermostat do?), it also enlists the user as a character in the story, a technique that’s also used in another common web design application of narrative.

Forging An Emotional Connection

The reason Nest’s storyline is so effective isn’t just because it involves the user in the story; it makes the user the protagonist, the central figure of its narrative. This causes the user to foster a strong connection to the story, seeing themselves in the scenario you’ve presented and reacting positively.

One way you can forge this emotional connection is by utilizing proper verbiage. Nest speaks informally to the user in the second person, liberally dropping “you”’s and “your”s to emphasize the user’s involvement.

There are other ways to establish this connection without lengthy copy however; note this website, designed to congratulate Great Britain after hosting the 2012 Olympics.

Storytelling Through Web Design

Illustration From WellDoneTeamGB

With rich illustrations, parallax scrolling, and almost no text whatsoever, the site recaps the UK’s dynamic performance in the Games, and in the process imparts a sense of pride and patriotism to any Brit who visits it.

Keep It Simple & Subtle

When we think of a website telling a story, we typically envision a modern, highly interactive, expensive-looking platform (not unlike the two examples I’ve offered above). But great storytelling can come in many shapes and forms—even the most simple elements can spin an engaging tale.

Consider Instagram’s onboarding screen, the first thing you see when you download the application and open it for the first time. Notice the background image: a picturesque shot of a young woman capturing a sunset with her camera phone.

Storytelling Through Web Design

Instagram’s onboarding screen

This photo is a narrative. It In fact, it’s more than just a narrative—it acts a tacit how-to for Instagram, an inconspicuous answer to that necessary question: ‘how do I use this?”. But it doesn’t explicitly reveal that to us; we subconsciously generate the story.

When you see this picture you imagine a girl who has scaled a mountain to watch the sunset, and decided to take a picture, which she’ll presumably share on Instagram. It doesn’t seem like much of an adventure story, but it is. And it’s all accomplished with one well-shot, high-res image.

Storytelling Through Web Design

A basic checkout progress bar (Source)

Sometimes you don’t even need a photo. Take the simple checkout progress bar, a staple of any self-respecting e-commerce site. What is that bar if not a story, a three to four part play where each act is the user taking themselves one step closer to complete their purchase, finish their quest.

The Last Chapter

It’s unlikely you have a website that can’t use storytelling to its advantage. It doesn’t matter the size or sector, the budget or business—users identify with a narrative, which makes it a powerful tool for your platform.

In fact, storytelling permeates the entire web design process, not just the consumer-facing UI. The UX design agency I work for creates journey maps for users, documenting the narrative of a visitor’s journey through the site. When we build web solutions, we literally create “user stories”, a granular version of those journey maps that ensures our product can do everything a user needs it to.

Every good story has a beginning, middle, and end. So if you’re redesigning your website, consider leveraging narrative, and giving your platform the happy ending it deserves.

Sean McGowan


Sean is a technical researcher & writer at Codal, authoring blog posts on topics ranging from UX design to the Internet of Things. Working alongside developers, designers, and marketers, Sean helps support the writing team to ensure Codal produces engaging web content of the highest quality. When not writing about the latest and greatest in digital design, Sean can be found baking, watching movies, or complaining about the shortcomings of his favorite Philadelphia sports teams.


codal insights

Emerging On-Demand Industries

emerging technology

Music Festivals Need An IoT Tune-Up