BLOG

“I still suggest you call
this page 42Lab.
Works for both of us!”
- Joey

The Big Picture: When Design meets Storytelling

Not every visual story has to be interactive! Repeat it after us: Your visual story does not have to be interactive to be effective!

Your story, however, must be engaging.

Engaging visual storytelling is a powerful approach that can, when done right, compel users to convert more effectively than any other element of optimization. But that doesn’t imply your site to be filled with crazy visual callouts or is way too minimalistic.

It’s all about making your story as apt as it needs to be: no more, no less. If your story can be told with a single image, don’t use twenty. But if it does require twenty visuals to work well, then don’t try to sum it up in ten.

In this article, we’ll explain you the 3 approaches for creating an interactive story.

#1. Spin your story around your users

One of the easiest ways to directly engross your user is to make them a character. They immediately become invested in what you’re telling them when they get to see themselves in a new role.

The Slavery Footprint can perfectly teach you how to engage your customers with your design.

storytelling in design

But what makes it more compelling is the way the website uses a guided questionnaire to make their users feel at home. They make the information they’re presenting pivot around the user which makes it directly about them, rather than just some general, faceless person.

storytelling in design

#2. Sunny side up: Give your site an “Easter Egg” effect

Who doesn’t love Easter Egg?

The joy of discoverability can be one of the most memorable experiences for users. One great example of a website using this tactic well is The Museum of Mario. The site showcases the evolution of the Super Mario and related video games.

Storytelling in design

Different areas on different screens are designed to perform a variety of actions, mimicking gameplay and revealing information about characters and games. But the one thing to notice is that The Museum of Mario still gives you an option to experience the whole history of the game without ever using the hidden click feature.

Why? Because when designing for a better user experience, it all comes down to the USER.

Before you design anything, know your users inside and out. Be sure that they actually understand and enjoy this kind of playful interaction. Prioritize the tasks. Actions that are critical for user goals must be explicitly visible, while those that are sporadic can afford to be less visible or even hidden.

#3. Make your website respond

Adding visuals that respond to user actions is another way to make your design speak for itself. From simple animation to static gifs, make these visual reactions triggered by clicking, scrolling or a more complex action like a form submission.

Take the Babel app for one great example. As you scroll down, Babel – the title cat character seemingly falls from the sky, tumbling on the way down. Stop scrolling, and the cat rights itself, holding onto an umbrella.

storytelling in design

A simple yet interesting way to keep you intrigued, isn’t it?

Conclusion

Engaging design isn’t an ornamental branch of web design – It is the core that allows the users to become part of your story, which makes them more of a participant than a passive observer.

Make your visual story as simple or complex as it needs to be to get the job done. Don’t add interactive elements just for the sake of adding them and consider carefully those that you do add to ensure they add value to the end user, rather than just being there to “impress”.

For more tips on designing better websites through storytelling, stay tuned to the 42Works’ blog.

42 works

Exploring the Future of Apps with Apple

Read Blog

42Works prioritizes your privacy. Learn how we collect, use, and protect your data.

Read Policy
42 works
Get 42Works Blog updates in your Inbox!

    Virginia United States 44.222.113.28 https://42works.net/storytelling-in-design-user-experience/