This site runs best with JavaScript enabled.

Visually Workshopping the AWS Cloud

Last tended Jun 16, 2020
Web Development
Illustrated Notes

I've made plenty of illustrated notes for egghead courses.
On everything from Building Custom React Hooks to Fixing Common Git Mistakes to The Basics of Rust

They've always been artefacts made in post-production.
I draw them after the course has already been planned, and the videos are all recorded.

Over the last month I've been experimenting with a more collaborative approach.

Rather than treating our illustrations as a shiny add-on made by one person, I wanted to directly involve our course instructors and figure out how to directly pair their expertise with my visual thinking skills.

So I started running visual workshopping sessions.

We hop on a Zoom call and open up a shared canvas in Miro or Excalidraw. They're both great and do the trick for the task at hand. I recommend playing with both! We pick out a few of the toughest concepts, and begin making extremely rough diagrams. Experimental ugliness is the whole point.

We just did our first trial of this with Tomasz Lakomy's new course on AWS Cloud Development.

Here's Tomasz thinking very hard about API Gateways

A screenshot of the zoom video call where we're drawing out rough diagrams

The Process

The visuals we made during the workshopping session were mostly made of boxes and arrows and labels like this:

It's all you really need to establish the basics. Nouns (things) are boxes, and verbs (actions and events) are arrows.

After the workshopping call I looked back over the diagrams, and sketched out an illustrated version that adds a bit more clarity and dimension to the scene:

I ran the sketch by Tomasz to make sure all the technical details were correct. Then did a final linework pass over the top to neaten everything up:

We ended up with five of these illustrations that cover all the main concepts of the course

The Whole Series

If you're just here for all the gritty details of AWS you might want to check out the course itself. If you're here for the visual process, I popped a few more thoughts below..

Shareable Custom Hooks in React

Collaborative Minds > Beginners Mind

I may know a few things about how to visually explain ideas, but I usually know _next to nothing_ about the topic of any given course.

There are some advantages to this. Beginners mind is a beautiful thing.

But it has it's limitations. Because in order to visually explain something well, you need to truly understand it.

When we draw there are no vague relationships or fuzzy edges.
You have to make clear how all the parts of a system are related.
What's above and below. What's a container and what's a substance.
What actions and events are happening between elements.

It requires a nuanced understanding of the material.

My old beginners notes are still useful - they make the implicit explicit. They explain concepts the expert would never think to.

But they also fall short in lots of ways. I make mistakes. I skim the surface of material. I can't dive deep on technical details.

Collaborative workshopping gives us the best of both worlds. I still get to ask dumb questions (purposefully), like "is the React app above or below the GraphQL request?" or "does an S3 bucket have a lid?"

It's the Socratic method for visual thinking.

Asking these odd questions helps us establish a vocabulary of shapes, sizes, colours, metaphors, and spatial relationships.

Our instructors have the deep context to answer these kind of questions well, and reason through why certain visual arrangements make more sense than others.

I'm just there to prod them in certain directions, and add a bit of polish afterwards.

We're doing plenty more of these. I can't wait 🤓

Want to share?

Join the newsletter

For weekly notes on visual thinking, ethical technology, and cultural anthropology.

Maggie Appleton © 2021