Foundations of Design: Visual Communication and Diagramming

In teaching UX, I start with diagrams, not personas.

In Summer 2020 I ran a bootcamp on user experience design with some colleagues who manage websites but are not experienced designers or developers.

As I thought about the curriculum and started piecing it together, the obvious first module was personas and user research, right? Understanding your users is #1 right?

But, a thought came to me. When I’ve given talks and seminars in the past at work, no one’s barrier was not believing that understanding your user was important. We may not operate in a way that allows us to dig in and understand our user, but the mindset barely had to be argued.

When I reflected on what was game changing for me as a younger designer, I realized it was the diagrams I had learned along that way that gave me the conversations I needed to talk about the user’s experience: the persona, the wireframe, the process flow chart, the service map — all these diagrams were what unlocked the conversations!

Designing visually

We’ve all been in a room where the problem solving conversation takes so many twists and turns, even the most careful listener can get lost — I think this is especially true when you’re trying to design complicated applications, software, and whole experiences.

Here is a non-exhaustive list of situations you may run into and a diagram that could help.

(All images were created in Miro — my favorite online whiteboard thinking tool — many of what you see here are pre-created templates that you can just start using!)

Image for post
Image for post

The main features of a flow chart are:

  • showing where something begins and ends
  • outlining the process step by step
  • noting decision points (see the pink diamond above)

I created a bunch of these when mapping out how money flows through our organization from donation to spent.

Image for post
Image for post

Sometimes a process you’ve described in a flowchart is done by multiple people, and it can be helpful to visualize all parts of that process.

Service blueprints are often framed in the context of “backstage” and “front stage”.

A classic example is a restaurant.

  • When you go to order, you only interact with the cashier and see a part of the process of getting your food. That is the frontstage.
  • There is a ton that happens in the kitchen that you as a customer are not aware of — that is backstage.

But, you don’t need a frontstage or backstage to have a service blueprint — you just need multiple parties working together to achieve something.

Funnels are for way more than marketing — they’re helpful in any situation that has major stages where some things falls out along the way— a hiring process is outlined below, and we might use the funnel to show currently happens and ideas in each stage.

Image for post
Image for post

(You might even embed a flow chart in here, if you’re feeling really adventurous!)

Affinity is a fancy word for “these things go together”. This is often used after a brainstorming session to look for themes and what comes up. For example, if we were brainstorming what to have for Thanksgiving…

Image for post
Image for post

You may have broad categories from affinity mapping, but you may need to organize in some sort of hierarchy.

Image for post
Image for post

This is a very versatile visual communication that can work in a lot of use cases — sitemaps, organization hierarchies, etc.

These can be a wide spectrum of details and levels, but here’s a very simple one where I’ve used emojis to note thoughts a linear process a customer had.

Image for post
Image for post

So, fast-forward to the end of Digital Bootcamp 2020, as I asked my participants what was game-changing for them, they confirmed my suspicions–that being able to visualize what they were designing was the key.

If we’re not clear on what we’re making, then there’s really no hope of making something clear for our end user.

Check out these resources:

How to Make Sense of Any Mess

This is Service Design Doing

Mapping Experiences

Build Better Products

What’s a diagram you love that I missed? I love discovering new diagrams!

Ashley Crutcher is a Digital Designer at InterVarsity located in Madison, WI. She tweets at @ashleyspixels and enjoys cuddling with her furkiddos, working with yarn, ringing handbells, and thinking too much about everything.

Digital Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store