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

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

Need to work through a step-by-step process? Try a flow chart

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.

Need to know what multiple people do? Try a service blueprint.

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.

Need to figure out where you’re losing people? Try a funnel.

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

Need to organize? Try an affinity map.

Need to organize what goes where? Try a hierarchy map.

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

Need to capture user feedback? Try a journey map

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