How to drive UX with interactive storytelling

Default avatar.
May 23, 2016
How to drive UX with interactive storytelling.
Some stories simply can’t be fully conveyed through static images. In these cases, it can be helpful to figure out a way to directly involve the user in the story. In this design roundup, we’ve taken a special look at interactive storytelling: the way in which websites can pull you into their world and deliver their message through the power of dynamic and interactive technology and design features. Just take a look at the examples below, and experience how their use of visual interactivity compels you as a user to continue scrolling or take a specific action.

El Monstruo: vanquishing the monster with a text

El Monstruo is a partnership between UNICEF and ING Direct to promote donations to schools in developing nations. The site takes you on an animated journey into the lives of a group of schoolchildren – who are being chased away from their school by a ferocious monster. As El Monstruo chases you to the precipice of a cliff, the interactive storytelling comes in. An option to donate €1.20 to the schoolchildren (i.e. UNICEF) via SMS appears on screen. If you choose to donate, the animation continues with a happy ending – if not, well… The monster is a simple metaphor representing the barriers many schoolchildren face getting their education, and involving the site visitor in this way gives them a more immediate reward for their generosity. It’s using interactive design in a way that really reaches out to people’s sense of empathy.

Slavery Footprint: follow the steps

slaveryfootprintHow many slaves work for you? It’s this simple question that’s the beginning of a journey through the chain of supply and forced labor in the modern world. Slavery Footprint walks you through how you could be supporting slavery, even without purchasing directly from companies that utilize sweatshops. They explain this chain of labour through interactive, scroll-through infographics. But rather than just explaining this process in theory, Slavery Footprints runs a quick survey that calculates how much you rely on slave labor, based on factors like the food you eat, the property you live in and the country you’re from. Slavery Footprint doesn’t just tell you a story about the modern state of slave labor – they use interactive design, data analysis and surveying to bring you into the story as a contributing factor. It’s a fantastic way to reach out to each site visitor on an individual level.

Supple: SEO haves and have nots

suppleSupple is a digital marketing agency that helps business rank better on Google through Search Engine Optimization. It follows that their page explaining SEO should be as engaging as possible for potential customers. Through smart use of illuminated hot spots, which visitors can click on to reveal key information about certain aspects of the page’s images and infographics, the site invites visitors to dig a little deeper into the world of SEO. There’s SVG animation to give the page dynamic vibrancy, and a sliding bar over some images that lets you take a look at the HTML behind an optimized site.

Inception Explained

inception First things first: Inception IS a great movie. But it’s also confusing as hell. Luckily this website walks you through the plot with simple, interactive storytelling. The site color-codes each key character, and as you scroll down the page, the layers of dreams within dreams are represented one on top of the other. Captions pop-up, explaining each level, whose dream characters are in and other necessary information. This is a very simple example of interactive storytelling – the site lets you move through the story at your own pace. Which really, really helps with a movie as confusing as Inception!

Coin: one card to rule them all

coin Is your wallet bursting at the seams with credit cards? Coin is a single card which you can upload and store all your credit cards on. Simply scroll through the stored cards, select one and then swipe, insert of tap-n-go as you would with any other card. The whole reasoning behind the product is fusing all your cards into one convenient place – and that’s a simple message that’s visually represented in an even simpler way. As you scroll down the page, a mess of cards stack together and transform into Coin. It’s neat, minimalist storytelling, and very convincing.

Bellroy: slim your wallet’s waistline

bellroy-wallet While we’re on the subject of wallet-slimming, you might want to consider slimming the wallet itself and not just its contents. Bellroy wallets are specially designed to take up less space, even when they’re filled with the same amount of cards as other wallets. To show this, the Bellroy website gives their site visitors a sliding scale — from zero cards to ten — offering a side-by-side comparison between Bellroy and their competitors. Alongside a handful of other fantastic interactive animations, Bellroy’s site brings a bit of visitor involvement into what’s typically a very boring Us vs. The Competitors demonstration.

Babel the King: it’s raining cats

babelBabel the King is an interactive story available through the iTunes stores. Combining text, audio, animation and interactive elements, the game takes children ages 2-8 into the wonderful world of Babel, a cat that’s jealous of the clouds and spends his days trying to annoy them. The website for the story/game offers a taste of what’s available from the download. As you scroll down the page, Babel falls through the sky alongside you and sheep trek weightlessly across the clouds. The website is bursting with movement and life, and offers a great case study in really synchronizing your website with the product you’re selling.

Bon voyage: Akita shows us How Data Travels Around The Globe

akita An email can feel like it’s sent pretty instantaneously, but how does it actually get from one person’s computer to another? IT support service Akita has developed a step-by-step journey to explain how data travels around the world. The site allows you to scroll horizontally through the journey of an email, taking you from computer to telephone line to telephone exchange to data center, and more! It’s an effortless, interactive explanation of the movements data goes through to travel across the globe.

Ben The Bodyguard

ben-the-bodyguardBen The Bodyguard is an app for iPhone that helps you encrypt and protect private information on your device. The app’s branding centers around the character of “Ben”, a bodyguard with an unbeatable track record for protecting people. As you scroll down the page, Ben walks down a dark (and dodgy-looking) street as he explains the perils of letting your private information fall into the wrong hands. It’s great storytelling, with a simple premise (a privacy app personified as a bodyguard) with interactive scrolling to deliver the app’s pitch.

Nissan Note

nissan-note To sell their new car model, the Nissan Note, Nissan has employed scroll-down animation, reminiscent of an old-fashioned flip-book. Rather than running a video, the site displays a grid of panels displaying images that change slightly as you scroll down. The effect is that site visitors can create a movie at their own pace. It’s an interactive story about the car’s features and a family traveling through countryside to the city. Have a play around with it and see what you think!

Every Last Drop: a trickling tale of water wastage

everylastdropThe website takes you through a single day of water usage, from the water you use in the shower to the total water used in the production of your clothes and food. It’s a simple, scroll-down story that takes you on an informative journey all the way into outer space! With so much water used in a day, the story ends on a poignant note that over a billion people don’t have daily access to clean drinking water. Using interactive storytelling to deliver a powerful message, it’s a great example of just what good design can teach us.

The Boat: a harrowing tale of escape and refuge

theboat Nam Le’s acclaimed short story collect The Boat has been transformed into an interactive graphic novel at sbs.com.au, throwing you into the world of a rickety boat fighting the full force of the ocean as it escapes from the horrors of the Vietnam War. Making use of text, sound design, illustration and animation, it’s a testament to what interactive storytelling can achieve. A memorable moment involves the text and illustrations themselves being tossed up and down the page as the characters depicted in them do the same on an ocean voyage. Immersive and emotional, this tale of survival simply must be experienced.

Saijo George

Saijo George works an SEO Strategy Director for Melbourne based award winning marketing agency Supple. When he is not reading up on web design and digital marketing, he is either working on side projects OR playing Helldivers / Hearthstone / Call Of Duty. You can find him on twitter : @Saijo_George and LinkedIn

Read Next

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…