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!)
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.
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.
(You might even embed a flow chart in here, if you’re feeling really adventurous!)
Need to organize? Try an affinity map.
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…
Need to organize what goes where? Try a hierarchy map.
You may have broad categories from affinity mapping, but you may need to organize in some sort of hierarchy.
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
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.
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:
What’s a diagram you love that I missed? I love discovering new diagrams!
Did this help you?
You can contribute to my book fund so that I can keep learning & writing!
Ashley Crutcher is the Director of Experience Strategy at InterVarsity located in Madison, WI. She tweets at @ashleyspixels and enjoys cuddling with her furkiddos, crocheting/knitting, ringing handbells, and thinking too much about everything.
