Message Lab on Experimenting with Interactive Storytelling

Automotive design, Architecture, Shorts, Shade, Floor, Flooring

From scroll-triggered animations and interactive charts, to horizontal scrolling timelines and video backgrounds, today’s branded content is full of movement and reader participation.

Interactive web design has set a new benchmark for how companies present documents, reports, and articles—transforming passive communications into active, deeply visceral experiences.

We caught up with Dan Redding—Senior Visual Designer at marketing agency Message Lab—to learn how his team is championing interactive design and experimenting with new ways to tell stories as dynamic multimedia experiences.

Dan, can you tell us about Message Lab?

We are an agency that combines journalism and design to tell stories for our clients—which include tech companies like Google Store, ServiceNow, and SoftBank Vision Fund. Our design department creates a wide array of visual storytelling projects, including interactive stories, hero art, social art, video, and more. As a small design team, everyone experiments with a bit of everything.

How does Message Lab approach interactive design?

As an agency, we’re constantly looking for new, exciting ways to tell our clients’ stories, and we love immersive and interactive storytelling experiences. We created some interactive pieces prior to Vev, but this specific kind of interactive storytelling is really new for us. This year we’ve been expanding it to the point where we’re now looking to make interaction design one of our agency’s major capabilities.

"All of our clients are telling different types of stories: text-driven, video-led, data-led. That got us thinking: what other kinds of stories can we tell in an interactive way?"

When and how did you start using Vev at Message Lab?

The first Vev project we published was actually a digital transformation of what was once a PDF. We call it “The Special Report”, a report for the thought leadership publication Workflow by ServiceNow. Upon starting the project, my first thought was: how can we take advantage of Vev’s interactive and multimedia nature? We started experimenting with video backgrounds, which can be seen in the report hero image, and from there played with Vev’s stagger slide animation to create a subtle, animated box around a section of text.

Things have grown quite organically since that first piece. Our client was very happy with the final project and is now interested in doing more interactive work as a result. We’re on a path of growth now, which is great.

Dress shirt, Forehead, Smile, Cheek, Eyebrow, Jaw, Sleeve, Gesture, Collar, Happy

Dan Redding
Senior Visual Designer

What tools are you using to create these interactive pieces of content?

We use a lot of tools! Vev has been one of the primary tools this year, but we also use Photoshop and Figma. There’s a number of different ways to work; you can design a whole piece in Figma and then import it into Vev or rebuild it in Vev—we’ve done versions of that. Once I became fluent in Vev, I started to build directly inside it. Even if we are just concepting a piece, I might make a prototype in Vev. Often I am using Vev for prototyping and design, and just creating the imagery outside in Adobe Creative Suite.

We do a lot of exploration and like to think of ourselves as a “lab”. Vev is really good for that, and it’s been so valuable having their team on-hand to help us learn the tool and create new things. I’ve really enjoyed experimenting and iterating, and sometimes on a project I will make 10-15 prototypes in Vev, rapidly iterating on things. It’s really exciting new territory and lets you think about something totally outside of the box, like creating a completely interactive journey map or org chart.

Are there any challenges with transforming what would have been a static design into an interactive experience?

When thinking about including interactivity and animation in a design, holding the attention of the reader while not overwhelming them is a very fine line to tread. I want the user to know that this is a multimedia interactive piece, as opposed to having a bunch of static content on the page, but it’s also about the reading experience. You want it to be comfortable and pleasing, so interactive elements don’t compete with text. It’s about finding that balance.

Working with animations on a responsive level is also something we are still actively learning about. I have found that I like to work on responsiveness as I work on a piece, as opposed to working on the entire desktop version and then the rest. It’s helpful if you are thinking about it throughout your process. Another trick is if there’s a section I have built that needs a different component for mobile, I might make two separate versions for desktop and mobile, disabling the desktop version on mobile, and vice versa. Instead of trying to make the same thing work across devices, taking an adaptive approach works wonders.

On a level of workflow productivity, Vev makes it easy to update a live project. If I need to make an update a month down the road, or adjust something, I can go and do that myself and it is live instantly. I love that part.

"I am more interested in the concept and how to bring it to life. I want to find the right tool for the job, rather than forcing an element I love to use into every project."