Visuals are highly important in the world of digital design. Take, for instance, a photo of a mother and her baby playing outdoors with smiles on their faces, proudly displayed on the website for a manufacturer of children’s toys.

Think about that picture of a group of business professionals in a meeting room for a billboard of a conferencing solution that grabbed your attention while you were driving on the freeway. Even the smallest logo on the label of the dairy product you bought from the neighborhood grocery is a product of a graphic designer.

Photos and graphics are used to tell stories all the time, but designers sometimes forget that no matter how amazing their websites or graphics look, the audience will always be looking out for the story behind it. Good digital design will always tell you the “what.” Great digital design also tells you the “why.”

Give your audience something to see, but also have something to say.

By now, you might be asking, “I’m a designer. Aren’t writers supposed to tell the story?” If you haven’t noticed it yet, storytelling is more than just writing copy or composing a lengthy article on a product or service. Your visuals also need a story. Think of the heroic man who saves a puppy from being run over by a moving vehicle on a busy street. Or imagine a dad teaching his son how to ride a bicycle, watching as the kid whizzes by happily. These are tiny moments where people engage in a particular action, which creates impact.

They say that media is only valuable when used to complement valuable content. As designers, you need to be able to tell a story or relay an idea with every output. Images, graphics and typography are all very creative ways in which you can deliver a message; but with every message, you have to have something to say. Don’t just create to impress; create to express.

Storify your design.

Before starting with your design, make sure that you have a back-story. Why are you making this? What’s the point of sharing this? Brainstorm if you must. Associate words – nouns, verbs and adjectives with your project. Something common will come up; this could well be your design story.

An especially good example is the direction that TOMS, a popular for-profit shoe company based in California, took in their branding. There wasn’t anything special about their initial product line; they just did an offshoot of the simple canvas slip-on shoes famous in South America called alpargatas. But here’s where it becomes interesting. While doing volunteer work, founder Blake Mycoskie noticed that many of the children didn’t have shoes. When Blake got the ball rolling, he decided that for every pair sold, he would provide a new pair for another youth from a developing country, or what is now known as the “one for one” business model.

Because of this great back-story, word about the brand spread like wildfire through word-of-mouth and social media. In particular, this story is reflected across the TOMS shoes website. A lot of the images within the site highlight what the company’s story is, instead of putting the actual products they offer front and center. As a result, they are able to connect to the senses of the audience and relay a story that resonates.

Another good use of storytelling in design is the transportation unicorn, Uber. On the onset, the story is pretty clear. Public transportation sucks bigtime. You don’t know when there’s a delay, you don’t know if you’ll be able to ride comfortably and then you have to pay in cash. Although the company has run into a bevy of serious problems, its worldwide ridership has made it quite apparent that Uber works and does its job excellently as an alternative on-demand transportation service.

The app’s UI addresses all the pain points the regular rider has. Where exactly is the ride located right now? How long will it take for the car to arrive in the rider’s location? How much will the rider pay? What’s the driver’s number if he needs to be contacted? All of the vital details the rider needs are shown in the app in a systematic manner. Even the Uber website says a lot about the company’s thrust. Every graphic, icon and even the fonts scream “pleasant” and “easy.”

Telling stories through designinvolves systematic processes.

As with anything built by hand (and mind), effective design needs to follow certain processes. Take for instance the process of creating a website. You build storyboards before even starting to create mock-ups or wireframes. Each part of your story should contain an interaction, for example, what will happen when the user clicks on something or scrolls down, and so on.

Braden Kowitz, a known user experience designer, suggests creating a series of narrative use cases for your product that illustrate every step in the user’s journey. He calls it a story-centered design process. With this, you can simulate the user experience and identify all possible outcomes and as a result, your design decisions will be entirely based on how people choose to use your product.

This is in stark contrast to a screen-centered design, wherein you’re presenting or creating a walkthrough of a UI as one shows a blueprint. Showing blueprints means you’re just enumerating how each element falls into the plan. “The problem is that,” Kowitz says, “When designs are presented this way, you’re only building an understanding of how the product looks. You’re not focusing on how the product works, and you’re not simulating how customers interact with it.”

Kowitz also suggests using tools such as Adobe Fireworks and screencast programs when rendering your stories aside from the usual visual design software Adobe Photoshop and Adobe Illustrator. Don’t create for the web by just designing individual screens.

When you practice adopting this discipline, your design process will be much easier. You can also highlight design mistakes that often get overlooked. You can also be aware of whether or not you’re meeting your design goals as you progress. Plus, you’ll be able to work faster when you have every part of the process covered or addressed.

The way you tell your design story also matters.

In every design project, you first have to set the stage for your story. Backgrounds and moods matter as much as your actual message and desired outcomes. How will your story pack a punch?

• Insert a personal story. You need to be able to appeal to the senses of your audience. If this is hard for you, then you need to be able to find a way to incorporate the audience into your story. People need to be able to relate to what your pain points are in order for them to take action.
• Say the unexpected. Don’t make a user go, “I’ve seen this many times. Why should I believe this?” Don’t let your audience become skeptical. Gain their attention by doing something new. Don’t go with formulaic copy or all-too-familiar graphics or sounds.
• Challenge conventional wisdom. Who knew that those dinky emojis can be improved upon? They’ve been a part of the texting and messaging culture for so long, but today you can even attach moving versions of them as objects in videos. People’s attention spans get shorter by the minute so as a designer, you must constantly find ways to improve even the simplest, most commonly used things to prevent them from becoming boring.
• Hook them with novelty. Introduce something new with every story. Include data to validate your claims. Ever wonder why your brain craves infographics?It takes people longer to process new information presented to them. With infographics, people are able process symbols and numbers in a matter of milliseconds and are able to attach meaning to them immediately. They’re easy to digest and extremely engaging.
• Ask provocative questions. Successful design stories will compel your audiences to act. Always make your prospects or customers think. What’s at stake? What happens next? This way, you’ll make your story stick.

Some fantastic examples to take your cue from.

Now that you know why good storytelling matters and what good storytelling entails, it’s time to explore more good examples of compelling visual storytelling.

1. Bellroy – Slim Your Wallet

Slim Your Wallet. Source

This one is a really nice example of a design story done well. It presents you with an already existing problem (in this case, fat wallets) and shows you how the product will solve your problem, side-by-side. There’s also a brief instruction of what the user is supposed to do: “Move the slider to compare wallets.” Simple wording, yet so precise. Don’t always assume that someone who visits your site will automatically know what to do.

2. Atlassian – Time-Wasting at Work

Time-Wasting at Work. Source

Atlassian’s interactive infographic grabs you by the wrist with this unnerving fact: you waste a lot of time at work. It then presents you with statistics to back up this claim. Although it’s completely new information, it’s a pretty boring topic. What makes it effective is that it’s presented in a manner that is interactive and bursting with color, while still conveying a sense of professionalism. Color captures attention and helps emphasize critical information.

3. Slack – NASA Mention on Homepage

NASA Mention on Homepage. Source

For a time, workplace productivity and messaging app Slack had a very clever inclusion their homepage. They featured the NASA Jet Propulsion Lab, a valued customer, with the copy, “A messaging app for teams who put robots on Mars!!” together with a photo of Mars as the hero image. That’s a story in itself. Slack clearly wants to imply that the product is good enough for your team because even NASA scientists use it. When designing for a product, you need to immediately be able to offer value proposition with just one look. Tell the audience why you stand out without overpromising what you will deliver.

4. Twoodie – Organic Wooden Toys for Babies

Organic Wooden Toys for Babies. Source

It’s not the technical aspects of the website that will draw you in but the storytelling that comes with the images within the site. To highlight what they offer, everything is in grayscale except for the actual toys. This evokes a feeling of purity and simplicity. The viewer is made to hold on to the promise that the brand is completely sustainable, safe and organic with designs that are well-thought of.

Visuals will always be essence of the design. However, immersive storytelling is also equally essential so it really pays to think about the story you want to tell. Make it a point to include this in your design process and connect that interesting tale to your designs, colors, images, fonts and effects. After you’re done, evaluate whether or not the story works or if it leaves a lasting impact. Make sure your design connects to the senses, creates new experiences and generates lasting outcomes.