The value of quick visual storytelling

Story telling matters as a foundational part of communication between people. You can tell stories by writing, speaking, filming, drawing, coding, and much more. When dealing with humans, assume miscommunication. If you’re trying to explain something, part of it will get lost in the transition from your brain to the other person’s ears. Count on it.

By adding visuals to your communication, you invite others in to participate and understand. You’re able to focus on the idea rather than each other, which is disarming and makes communication smoother.

If you accept that miscommunication happens, and come to expect it, then you can account for it and work around it.

Over the years I’ve grown to expect that this will happen in my work. If I’m speaking to a stakeholder for a design project, I’ll either improperly explain, or they’ll misunderstand. It just happens.

To solve that I share my thoughts visually, and often. You can call this visual aids, drawings, wireframes, fat marker sketches, or something else. For the purpose of this post I’ll call them sketches.

Throughout my career I’ve spent a lot of time working closely with developers. As a designer, I quickly came to the realization of two key facts. First, I don’t understand most of it, and second, at some level that will always continue. So I’ve just learned to embrace it, and have no shame in calling out when I don’t fully grasp things.

I now have my digital pen and pad ready at all times. If I’m talking about a concept with a fellow developer or designer, I’m usually sketching alongside our discussion. In just the past few weeks alone I’ve had many opportunities to do this in my work. Checking my downloads folder I quickly compiled the following sketches:

Whenever we come to a point I don’t fully grasp, I’ll share a sketch of what I understand so far, and ask for the other person’s feedback. 

What usually happens is they validate that the sketch is half-way right, and captures part of what they meant, but I missed a few things. This always makes me happy. With only a short period of drawing I was able to quickly show what I believed they meant, and what I understood. It always has helped move things forward.

This works in many scenarios. If I’m talking to a client or customer, I’ll share sketches. If I’m talking to a fellow designer or product manager, same story. It’s been something I’ve encouraged in others, and constantly practice for myself. 

10 minute sketch

A few years back I was working with a client based on Australia, along with my team based in other parts of Australia, I was in the US. During an initial website development project we were working through the details of what we’d be building.

I still remember a specific call where we were discussing the need to show a customer portal button for end users to be able to discover and follow. The end goal for that was for them to access an analytics dashboard. After a long call to discuss this, we ended our chat without a definite conclusion on how we’d proceed. For myself and my team we believed that a specific direction should be taken with development. For the client, they were certain that an opposite direction made the most sense.

Realizing that our understandings were misaligned, and that our development team would likely need to spend at least a few dozen hours testing out the alternative direction, I quickly grabbed my iPad. In about 10 minutes before our next call with the client I was able to sketch up the following website flow:

During the call, I shared my screen and showed the image above. This showed our client what would happen if we implemented their suggestion. Each customer would have to login twice, with different credentials, in order to access the analytical data.

When I shared this with the client, they immediately recognized the problem. We had already tried sharing on the previous call that the double login issue would be a challenge, but because of the nature of storytelling and communication, it wasn’t clear what we were trying to say. After just a few seconds seconds looking at the above drawing, our client decided to simplify things. They immediately cut out two of the steps.

This 10 minute sketch saved our client at least a few hours of development time, but potentially much more. And, key to the point of sketches, it wasn’t pretty. It conveyed an idea, and did it well, even though it was just simple boxes, arrows, and scribbles.

My house

Our second child was a newborn, and we were both suffering from lack of sleep. It was a crazy and fun time, in retrospect, to be building a home. When we attended our first builder’s meeting, there’s a decent chance we weren’t fully communicating our intention throughout all of the decisions we had to make. Like I said, we were a bit tired.

In the midst of all this we made a seemingly straightforward decision to change the window size in our living room:

We asked for our windows to be 3 feet wide and 6 feet tall. Roughly 1 meter wide and 2 meters tall. We wanted to enjoy the beautiful sunsets in our backyard during the winter:

So, the pretty picture above is an actual photo taken from where our house would be built, looking into the backyard. Our intention was to make the windows larger to see this better:

While construction was ongoing, we took a look at the house when the first floor walls had been built. We were presented with the following view in our living room, tiny square windows:

Needless to say, this isn’t what we expected. After several discussions with the builder, and reviewing the blueprint, we realized we’d agreed to 42″ by 42″ windows, or 3 foot 6 inches, as opposed to 3 foot by 6 foot windows. A tiny semantic difference, but a larger real world difference. Call it an annoying vestige of the Imperial System, or overtired parents, but at the end of the day our understanding of what we’d get was different than what the builder thought we wanted.

In this case a simple visual of the changes to the back wall would have immediately told us something was off, as opposed to waiting until we finally saw the half-way complete product.

The point that has been driven home for me, in hundreds of situations over the years, is that a sketch can save hours of trouble in just a few minutes.


So what do I like to use for sketching? Almost anything.

At a minimum you need something to draw on, and something to draw with. That can be pencil and paper, markers and cardboard, chalk and board, or a pen and your hand. 

If you want to sketch things digitally, there are some amazing options available to you. However, with that comes the temptation to tweak and fiddle, and get overly complicated in your sketches. Just a warning, it’s happened to me.

I currently use an iPad Pro with an Apple Pencil, and switch between Linea Sketch, Procreate, and Paper by FiftyThree. Each of these has their strengths, but any of them will work just fine for the examples I shared in this article.

Sketching is easy. The purpose here is not to create a lasting piece of art, but rather to communicate intent and tell a story. If you’re involved in web or product design, most of what you do will be some variation of these simple shapes:

Then, taking those shapes, you can create something like this to convey an interaction or tell a story:

The biggest takeaway I’d encourage is to pause anytime you sense that there’s not absolute clarity between you and someone else.

In that pause, see if you can sketch what you’re thinking. I’ve never regretted doing it. Most of the time what I intend isn’t the same as what the other person understands, and that gets me excited. It means I just uncovered an opportunity for better communication.

By Joshua Wold

Senior Product Designer at XWP, WordPress core contributor, illustrator, enjoying life with my wife and two kids in Idaho.