Visual storytelling — inside the box

The role of visual storytelling in product design and strategy.

To create innovative products we are constantly reminded to think outside the box. Extend your ideas further but for the purpose of some products, well, any digital product that has a visual dimension to it (so well, pretty much all) I am going to argue that it is now fundamental to think inside the box. And it is a mistake for brands and product teams if they don’t.

When we start thinking about digital strategy and proposition development, we start with words. We share ideas often as a series of words, a list of features describing the future experience, we draw empathy maps and create experience diagrams, we develop a product proposition statement. But these stay just concepts sometimes visually wrapped up in PowerPoint presentations structured to validate research. Yet, as a product designer and visual storyteller, I can design hundreds of different and nuanced narratives to each concept to give it meaning. They stay abstract until stories and user interfaces are put alongside them and success is fundamentally in its execution.

But even when we move to user interfaces and product design we sketch, wireframe and prototype, we labour over the structure, layout, words and key messages. I can’t recount the number of times with clients and designers that the words, the colour ways, the typography, the layout have been debated for days and weeks. Yet the images have been ignored, and in the design, we kept ‘placeholders’ that at the last minute were filled with the ‘real’ images.

Let’s think inside the box

As a photographer that leads and designs digital products, this is one of the things that always irks me about the design process. We often don’t think or leave little time to imagine what happens inside the box. But the visual storytelling inside that box is as essential as the size and position of the box, and in most cases should be the place you start. And if not the start, one of the first things you lock down.

Not paying attention to the visuals early on is a missed opportunity as semiotics rules and impacts on the success of your product. Why? Images are your brand and your message more than your tagline. Humans devise meaning through nonverbal symbols and understanding the meaning of symbols allows you to understand and anticipate actions, rituals and general exchanges between human beings.

Not convinced? Take AirBnB’s approach to photography as an example. Within their new Design Language System photography plays an important role, their design team understands that it’s the imagery that “breathes life and humanity” into digital experiences. Their concept of “No Filter” and the community-driven photography approach transformed their new guest app.

All of us interpret images and make judgments on a brand in an instant even before our rational brain has kicked in. We want to live that life and imagine that experience, if it doesn’t match a version of ourselves we move on to the next service or product on offer.

In a world run by data and algorithms, there is something intriguing about how we attach meaning to imagery and our emotional response. Visuals are essential components for eCommerce, as good digital products and services bring together aesthetics and conversion.

Now brands need to bridge the gap between visual content and commerce. The future is visual and we need to understand what images people share (and why), how they reach and connect people and how we can utilise imagery to drive engagement. We need to explore what images and stories suit our product.

I make sure that all my teams think visual from the beginning. It is a great way to get instant feedback on if the direction is right. People instantly respond to the style of images. From the early concepts to the final design, image selection is never a placeholder but a considered part of the process.

So here are some thoughts on how to ensure your visual strategy is a core part of your digital product strategy from the beginning.

1. Understand your product proposition as a set of visuals.

Create a mood board and define your style early on to clearly illustrate what imagery is in and out. If you already have a brand visual style guide, expand it further to make it specific and relevant to the product you are designing.

2. Presentations should have visuals in it as much as charts and words

So many lifeless and soulless presentations to teams and executive management full of ideas, lists and charts and business cases and not a single image in sight. Bring these ideas to life with images that tell the story. I guarantee you even if the reaction is not positive you will engage your audience must faster and get a much stronger sense of whether you are on track or not.

3. Source images that reflect your final story.

Don’t stick with placeholder images. If you are worried about costs, research some of the many free (creative commons) or low-cost sources, quality has gotten so much better over the past years.

Avoid cliches — if you are worried about time sourcing images, spend a little time exploring keywords and hashtags that represent the ideas you want. With a little bit of learning and tweaking the keywords until you find the right ones will seem a bit serendipitous but will lead you to the right images.

There are also many low cost / high quality solutions out there

If you have the budget to commission a photographer, find someone with a style that fits your brand, work with them as early as possible to craft the story at the same time as strategy and source some of their images as mocks to get you started.

Don’t create and imagine the photos separate to the design process. And certainly don’t imagine them as a box to fill.

4. Build up a visual library.

If your product grows over time, as an extension of a pattern library create an image bank of easily accessible content for designers and teams to use in concepts, prototypes and presentations.

5. Prototype with visuals.

Move quickly from wireframes into semi high-fidelity sketches with real images in the design. Want to keep it abstract and not too prescriptive in early stage testing? Create simple illustrations to images the full story. If we argue next to have Lorum Ipsem, then I would argue never to leave an empty box.

6. Test your images.

User testing often focuses on UI and interaction patterns. Test different images to see what visual content drives your conversion.

Your key criteria for a strong visual element in your overall strategy needs to be that the imagery makes the viewer feel. Enough with the empty filler pictures, make the images you use count by making sure they convey a human experience, touch emotions and involve the senses. This is just a starting point, but putting your visual storytelling at the heart of your product strategy will lead to long-term success.