Rebecca Jackson

Intranets2013 – UX Sketchnoting

I was really pleased to be able to stick around for day 3 of Intranets2013 and participate in a workshop on UX Sketchnoting run by the talented Matthew Magain of UX Mastery.

I first encountered Matthew at UX Australia last year when he shared his clever whiteboard piece What the #$%@ is UX Design?. You may know him from his more recent work on The Federal Budget in 3 minutes. I was lucky enough to get a taste of Matt’s workshop through the Intranet Leadership forum in April when I had a crack at sketchnoting Simon Sinek’s TED on How great leaders inspire action. I was pretty proud of my first attempt and keen to learn more and tap into my neglected creativity.

For the uninitiated, sketchnoting is basically taking notes using a combination of pictures and words. Matt started out he workshop by taking us through the basics of drawing, typography and design principles. Matt told us about Dual Coding theory which was developed in the 70s and says that tools like sketchnoting and storyboarding can be more effective as they engage the brain on both a visual and a verbal level.

Practice drawing objects and concepts
Practice drawing objects and concepts

I thoroughly enjoyed being able to work the drawing muscles that I had not flexed for a long time. I have been taking my notes on the iPad for a few years now and often miss paper where I can get more freehand and doodle alongside my notes. I also love the idea that I can incorporate something I had previously enjoyed as a pastime in my intranet work.

Practicing drawing facings
Practicing drawing facings

After getting through the basics of playing with words, objects and faces we worked on UX techniques like UI flows, wireframing, design critiquing, empathy mapping, graphic organisers, storyboarding and sketchnoting.

Using a scenario that Matt had put together we wrote a UI flow and then wireframed the user interface freehand. I have wireframed before in Visio and PowerPoint (*shudder*) but only a little in freehand. The idea was to do a few iterations of the wireframe before getting to the final one. I only got through two as I was being a little too detailed but I enjoyed the process of critiquing my design with the group. It was less of a critique and more of a collaborative session that improved on the design and cut out features that would not work. I can certainly see the value in using a sketched wireframe rather than a polished Visio or PowerPoint one, it shows the audience that the work is in draft. It can still be manipulated and it is okay if it doesn’t resemble the final product.

Freehand wireframe iterations
Freehand wireframe iterations

I found the storyboarding session the most interesting as it is something I have always wanted to do but was never sure where to start. We began with an empathy map (using a hospital Nurse) and then worked on a graphic organiser to flesh out the objective, audience and solution for our story. After that I quickly drafted my plot and then put it into the storyboard boxes. Having a process to follow removed the intimidation and this is a technique I will definitely use again and am pleased to be able to add to my skill-set. What a great tool to be able to quickly demonstrate the ‘Why?’ to leaders, managers or users.

Learning to storyboard
Learning to storyboard

We wrapped up the session with sketchnoting. I loved the opportunity back in April and was planning on sketchnoting a keynote at the conference but a combination of time, self-doubt and a phone meeting meant I didn’t quite get to it. Luckily the workshop meant I could have another crack and improve on what I had done last time. Having had a go before I decided to choose  a column layout, rather than a path, the path didn’t work for me last time and the columns made it easier to pace. Before we watched the video I started with a title and caricature of the presenter as Matt suggested. We were sketchnoting Dave Eggers TED Talk Once upon a school and the 20 minutes flew as I listened intently to the TED, picking out key points and either drawing or using typography to illustrate what was happening. I am very pleased with the result of this attempt as I can already see an improvement on last time. I think I still need to work on my typography and using borders more to feature quotes and key information, but I can work on that next time.

Once upon a school
My second sketchnote after the full day workshop!

So what did I get out of this workshop? From a professional perspective I have picked up a big handful of really handy UX skills that I know I can go back to the office and apply to current and future projects. I am already thinking of a few ways I could possibly use storyboarding in our current intranet project. On a personal level I have been able to pick up an Artliner and Copic and actually draw something, which I have been intending to do for years now. I said to Matt I found it difficult to work in inks because I would be frustrated by the permanency, I could not fix errors and mistakes… but I focused on that in the workshop and feel much better about working in the medium.

If you happened to be looking at a workshop like this and thought it looked like too much fun to be of practical use, I hope this post changed your mind. Thanks Matt for a great workshop, I look forward to sharing more of my Artline adventures on this blog.

Postscript

For more Intranets2013 action have a look at:

Advertisements

4 thoughts on “Intranets2013 – UX Sketchnoting”

  1. I can’t tell you how thrilled I am that you a) got so much out of the workshop that you felt compelled to create such a detailed write-up about it, b) totally nailed that final sketchnote (it’s really fantastic Rebecca, you should be very proud of it!) and c) are motivated to start using these visual thinking techniques in your workplace. I hope you’ll keep me posted on how you go applying them.

    Thanks so much for this post; please stay in touch and keep sharing your sketchnotes online!

Leave your thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: