Sketch a little, learn a lot with UX diagramming

Deborah DeLue • Sep 08, 2022

The Art of Applied Visual Thinking

The official newsletter of Applied Visual Thinking SUPERHEROES. Vol. 3 No. 18 September 9, 2022

First, let me say happy back-to-school season, everyone. I know it can be a hectic time of year, and finding the time and energy to study, practice, and apply your visual thinking skills can be challenging. However, it's also worth the effort.

One exercise I like to do when short on time and energy is

simple UX (user experience) diagramming.

What I mean by that is to draw out an app screen and what you might do to improve it. Starting by drawing something that already exists keeps it fast and easy, while drawing out how you might improve it stretches your imagination and expands your visual thinking muscles. And as a bonus, it's a great way to build your visual vocabulary. We've included a free UX icon handout below to speed you on your way .

This is one of my go-to visual thinking exercises when I have a spare 10 or 15 minutes waiting for the next activity, like sitting in the school pickup line, to be called into a doctor's appointment, or as an easy wind down at the end of a hectic day.

Here is a recent real-life example. Here is a diagram of the app page where we report an absence if my son misses a day of school. I find this page cumbersome and confusing. The absence report link is buried at the very bottom of a page called "More," and the link I need is below the fold, meaning I have to scroll to find it.

If I could wave my magic wand, I would move the absence link to the first position on the page, change the font to make it bolder, and change the color to red, so it stands out. If I'm having trouble finding this link, I bet other parents are, too.

Want to play along?

You'll need:

your favorite smart device
the app of your choosing
something to draw with
something to draw on

Two or three different pen colors is helpful but not required. Just use whatever you have handy.

Open the app to one of the screens/functions you use often or find cumbersome and frustrating. Notice how it's laid out, such as where the buttons, menus, and tools are. Think about which action you use to access each. Do you single tap or double tap? Swipe up, down, left, or right? When and where do you pinch or scroll?
Grab your pen and paper or digital drawing tools and draw a quick user interface diagram of the app screen as it appears. Most app screens are made up of a bunch of rectangles in various sizes, making it super fast to diagram. Bonus: If you're drawing digitally, you may be able to copy and paste the rectangles or smooth them to make the drawing neater.
Next, label each rectangle and note the action - when and where you tap, swipe, pinch, scroll, etc.
Now imagine you could change the app to suit your fancy. What would you change? Would you move any of the buttons, menus, or tools? Perhaps make the text larger or smaller or use a different font? Change the colors or the actions? Mark those changes down on your diagram. Bonus points if you use a different ink color.

There you have it, a quick, easy visual thinking exercise you can do in just a few minutes wherever you are. While it might seem small, these little bites of visual thinking practice add up and help build your visual thinking muscles. In case you missed it, you may want to check out our “Practice on Vacation” blog post for more quick visual thinking practice ideas.

This is a great example of exercising one’s creativity toward product innovation. It also taps into customer mindset and envisioning small ways to improve customer experience. Click the links below to explore our Applied Visual Thinking for INNOVATION and CUSTOMER JOURNEY MAPPING courses.