Storytelling across web and mobile experiences: humanizing your UX

It is an exciting time to be a storyteller and designer on the technology front because of the opportunities and constraints represented by the many platforms and devices in use today.

As creative artists and brands experiment with the notion of storytelling itself, designers are continuing to use storytelling techniques to create engaging mobile and web experiences that stick with audiences the way a good movie or book does.

Latitude, a Boston-based research firm, conducted extensive research into the future of storytelling. They summarized their results as the “4 I’s of Storytelling”. In this article, we will use their framework to explore how these variables can be utilized for designing engaging web and mobile experiences.

Interactivity

Perhaps the easiest- and most obvious- of the 4 I’s within mobile and web experiences is “Interactivity”. Interactive by genesis, mobile and web provide an excellent way to get your user to participate in your brand story.

One way we have seen digital experiences become more interactive is the prevalence of chatbots. Whether it’s a customer service rep or your brand’s mascot, audiences today like talking to a human-like chatbot that can respond to their queries in real time and help them complete basic tasks.

The engaging appeal of chatbots is so potent that designer Adrian Zumbrunnen designed his personal website to look and feel like a conversation with him. Designed mobile-first, it plays out exactly like a text conversation on your phone.

A chatbot is essentially the protagonist of your brand story. It’s the ‘character’ you create, like any good novelist would, that your audience can relate to easily and connect with throughout the user journey.

The chatbot on your brand’s website is more than a chatty mascot. It can be the first point of contact as well as live customer support. The fact that it has a name and a personality are the same humanizing elements that make words in a book or images on a screen seem real and personal to us when enjoying our favourite book or movie.

Immersion

If you are part of any fandom online (hello, Pottermore!), you know how a passionate fan community devours every little detail provided by the content creators. While most brands can only aspire to achieve the fervour generated by transmedia entertainment worlds like Harry Potter, there are still many ways for you to engage customers in your brand’s world or reward loyal customers with more in-depth experiences.

Through looped videos and a clickable collage, Abercrombie & Fitch makes its campaign feel more like a visual story of a fun and youthful getaway.

Thanks to 360 videos (and, increasingly, AR and VR tie-ins), it is now possible to create rich multimedia experiences that allow audiences to explore a world far beyond 2D images or a passively playing video.

For a good example of using 360 video to bring visitors into an immersive world, check out the Deadliest Catch website on both desktop and mobile. It’ is a beautiful and detailed exploration of the interiors of the many featured ships.

Integration

How does your brand experience translate on mobile versus web? Is it just merely responsive or is it more specifically tailored to the audience and platform it is targeting?

Audiences today are increasingly using their smartphones to visit websites. Usually, because of the size of the screen and the on-the-go nature of the interaction, this means that your website needs to be fast, simple and do the one thing, that it is supposed to, really well.

The HURU backpack website is a beautiful user experience on desktop but it is just as aesthetically pleasing and easy-to-navigate on mobile.

You don’t have to be a savvy designer to create a website that displays beautifully on both desktop and mobile. These days most WYSIWYG (What You See is What You Get) website builders allow you to get started with responsive layouts from the get-go. There is just no excuse anymore for having a website that breaks on a device and platform different from the computer and browser you tested it out on!

Integration is not just about creating responsive user experiences. Integration also asks you to think about whether there are there ways for you to extend your brand experience into the real world. Take a product like Shopify that now provides retail solutions beyond its traditional e-commerce service by extending into brick-and-mortar stores with its Shopify POS offering.

This is especially important for your brand if your product is something that isn’t a huge purchase (like a soda) or your customer just orders online (and thus limiting the brand’s touch-points in their lives).

Mountain Dew lets users pick who gets to sit court-side with Kevin Hart during the NBA Playoffs in 2018. You can click through to the final five’s qualifying posts on their social media and enter your email address to vote for your favourite.

AR/VR provide an exciting way for you to extend your brand experience beyond web, mobile and physical. The best example is how Pokemon went from a niche fan-fuelled phenomena to a worldwide obsession by bringing their little characters out into our real world.

Impact

Is your brand encouraging a real-world action? Or allows users to do something good for the causes they care about?

Gen-Z customers, even more-so than the socially conscious millennials before them, are vocal about the issues they believe in and action-oriented in the causes they get behind. You can no longer be a “business doing business” if these are the audiences you are targeting.

Apparel brand Siizu not only has a sustainable design philosophy but, in further aligning themselves with their young and impact-oriented customers, donates 10% of all proceeds to plant trees.

Even if you don’t ever get around to doing your part for Amnesty International’s many important causes, their website still allows you to easily and quickly tweet your support for ending online abuse.

What do you envision for the future of storytelling and how it will influence user experiences across web and mobile design? Share your thoughts in the comments below.