Skip to Main Content
Close Menu

Reflecting on the Web Trends of 2017: Digital Storytelling in Web Design

As 2018 begins, we look back on the trends of 2017 and how different things were handled on the web. In this post, Associate Director of UX Lesley Guthrie dives into the different ways Digital Storytelling is used by various companies and institutions.

2017 trends

“Once Upon a Time…”

Though the trend of Digital Storytelling in web design was not new in 2017, we continued to see various types of businesses play with it as a new means to connect with their users. We’re seeing it everywhere from Higher Education and Healthcare, to Ecommerce and Journalism. The popularity is largely due to the simplistic approach it takes to communicating with its audience. Storytelling comes naturally to human beings. It’s one of the oldest forms of communication and it is certainly exciting to see how modern technology is taking it to the next level.

I like to think of digital storytelling as a marketer’s version of a children’s book. The stories are (typically) short with succinct messages, using only 10-20 words max to articulate clearly and concisely. The less words used to explain a point, the more likely it will be received without confusion. There are large pictures that illustrate the words that are being said, allowing the little ones who can't read to still see the story. More importantly, in a good example, the illustrations and photos are almost never stock–they are customized to tell the story and have been curated to assist the reader in understanding the message and context. This is almost a stroke of genius as it takes an early education approach to learning brand messages — just brilliant.

The key is to create visual and engaging digital content that allows users to connect on an emotional level. This adds significant value to the brand and helps establish loyalty. There are a number of different ways to do this, so let’s look at how digital storytelling played a role in higher education, healthcare, journalism and ecommerce in 2017.

Digital Storytelling in Higher Education Websites

homepage for the university of marlyand
Current home page for University of Maryland.

There are so many colleges and universities in the world; choosing one can be difficult. There are a lot of factors that go into the selection process, which is why making an emotional connection to its users is a key piece for drawing them in for a visit or more information. Take University of Maryland as an example. Right out of the gate on the homepage, we’re shown full browser images and copy that reveals itself from the main navigation, aiding the user in their journey to find what they need. Each page and section tells a story, integrating video content, virtual tours, and social media for a more engaging exploration of UMD student life.

Stanford is celebrating their 125th year and showing their digital storytelling chops using timelines to highlight the rich Stanford history. The interface is extremely easy to navigate (which is not always true for online timelines) and provides a look at all of Stanford’s proudest moments for the user who is interested in seeing it. The Wyss Institute at Harvard is also using digital storytelling to showcase innovation in a new field of research called “Biologically Inspired Engineering”. The page experience uses large images, ambient video and imagery, and subtle information graphics that visually illustrate the words they are using.

Clemson is experimenting with digital storytelling on their “Moments” microsite that tells student success stories and highlights their various academic programs and research. Whereas Wellesley is using video testimonials to showcase their Wellesley Effect campaign and “This is the Place” for fundraising promotion.

Digital Storytelling in Healthcare & Human Services

Interactive Infographic showing the progress of growth at Texas Children’s hospital.
Interactive Infographic showing the progress of growth at Texas Children’s hospital.

We’re seeing digital storytelling pop up all over healthcare lately, especially as the industry is starting to modernize their user experience approach. Communicating and connecting on crucial messages like preventative healthcare, improvements in the quality of care, credibility of the system/organization, and showcasing innovations in technology is a vital piece of the marketing puzzle.

Much like what we saw in the higher education realm, healthcare sites are using digital storytelling to help illustrate the stories of real patients. The Memorial Sloan Kettering Cancer Center is using a personal narrative in this case showing a patient who fought with her disease and succeeded, which strengthens the credibility of the organization and connects emotionally with the user who might be suffering in the same way.

Texas Children’s Hospital is using it here to showcase their company values and historic progress. Zocdoc is also using it to tell their story and for recruiting purposes.

Digital Storytelling in Ecommerce (Experiential Commerce)

A screen capture from the Nike Be True campaign landing page.
A screen capture from the Nike Be True campaign landing page.

When it comes to eCommerce, the purchase process is pretty much the same from site to site. A consumer views a bunch of products, finds one that fits their needs, adds it to their cart, and proceeds to checkout. Today’s consumers don’t want to be sold to, they want to be connected with, similarly to their expectations of a brick-and-mortar experience. The consumer wants personalization, context, and relatability, and they want to be engaged emotionally.

Nike is very good at telling their stories in a way that also sells products. Everything from using their athlete stories (Be like Mike!) to their Be True campaign showcases a core company value and a line of product they designed to support it. Other great examples of experiential commerce are the home page featuring all sorts of video content on Beats by Dre and BB Dakota. Each site tells their brand story and uses social media to assist with product promotions.

Digital Storytelling in Journalism

A screen capture of an infographic from the
A screen capture of an infographic from the

The news is a messy business right now, but over the course of the last two years, we have seen major news publications turning digital and re-inventing the news article with what is termed as “longform scrollytelling.” This is a technique in which more and more content is revealed as the user scrolls down the page. “Steppers” are also a storytelling technique, especially for stories based on data visualization, in which the user clicks from step to step to see the story develop. Today’s news is not just offered in verbal or written form but is increasingly expressed in visual formats. Digital content narrative has become just as important to producing the news as the stories themselves. In this case, each publication is using digital storytelling to differentiate themselves from their competition who serve up the same exact news stories.

Not only is the New York Times embracing this trend, they are also somewhat setting the bar for the trend itself. Take the live election results page for the Alabama US Senate seat. The Guardian does some similar storytelling, using video, social, and large visuals to communicate the daily briefing. Though this article was from 2016, it is worth referencing again and again as a beautiful example of digital storytelling with map integration from the Financial Times. “

"...And They All Lived Happily Ever After”

Not every marketing story has a fairy tale ending, but adding personal narrative to the bag of tricks allows us to explore true market differentiation. If we want to create digital experiences that are unique, with compelling value to users, then including a story is crucial. And it’s a bit easier than we think, because it uses something we already know in a new way. There’s always a story waiting to be written, so we’re looking forward to how digital storytelling evolves in 2018 and beyond.

We want to make your project a success.

Let's Chat.

Let’s work together.

Have an exceptional idea? Let's talk and see how we can help.
Contact Us