Pens, Process, Product — Sketching for UX

Posted 3 months ago by Chris Spalton

I’m passionate about sketching because I’ve seen immeasurable benefits from it. Whether that’s professionally through the development of my communication, problem solving, storytelling and design skills, or personally in terms of relaxation, improved creativity, greater awareness of the world around me, as well as increased empathy towards the real people who use digital products and services. All of which are important skills to nurture if you work in user experience design.

From generating concepts, to communicating ideas, and mapping processes or simply problem solving throughout, I’ve had a lot of success on the projects where I’ve actively used visual thinking.

I find it odd that sketching isn’t more commonplace. Despite working in a creative environment there’s still apprehension about putting pen to paper to express ideas visually — that’s without even sharing what’s been produced. Perhaps it’s a sense of vulnerability about documenting and expressing quick, half formed ideas, rather than the final product.

“In reality, by sketching things out first and circulating them you’re showing your process in addition to the iterative development of the product. By drawing the whole arc of the projects development you take yourself, your team and your clients on a journey from day one.”

This allows you to:

To that end, I had a thought a while ago about how I use sketching at work and posted a quick doodle on Twitter & Linkedin

Original doodles thinking about how I use sketching at work.

It went down so well that I thought I’d expand and explore my top seven reasons for sketching in UX (these are in order of how a project might run but all are interchangeable):

  1. Sketching meetings, talks, training sessions and conferences
  2. Sketching to problem solve
  3. Communicating ideas
  4. Developing quick concepts
  5. ‘Sketching the sentiment’
  6. Creating user journey/process comic strips & storyboards
  7. Prototyping screens and information architecture

1. Sketching meetings, talks, training sessions and conferences

These are the perfect places to start sketching (and how I personally got into the regular habit of drawing and became comfortable with my level of skill).

Even if you’re not ready to put your doodles in front of anyone else, capturing meetings, training, talks and conferences are an ideal start. You’re probably already making notes so starting to add visual elements such as titles, dividers and containers, small images to represent key points, arrows to connect information and speech bubbles to capture quotes isn’t that much of a stretch. These simple tricks really elevate your content to be more engaging and enjoyable to read.

Not only are these things personal (no one has to see them if you don’t want them to), but sketching work placed events are useful for building up your skill set. If you record your notes visually you’ll be more likely to go back and reflect upon them.

Why not see if there are topics or images that crop up regularly — everyone relates lightbulbs to ideas so if you’re in a lot of brainstorming meetings practice those. It’s also likely that you’ll be working with people, so practice drawing stickmen and adding more detail — computers, phones, offices, are all things that are likely to come up. The key is to learn to draw 5–10 common things to a standard you’re happy with.

By nailing down a few frequently used subjects you’ll soon build up your own visual vocabulary of items that you can quickly and confidently draw upon. So, when it comes to applying these skills to projects you’re working on you’ll already be confident in what you’re showing to your team and the stakeholders.

Top Tip:

“Once you feel you can open up and feel comfortable sharing (try and do this early to build your confidence) — draw up the meeting, take a picture and send it to all the attendees, they’ll be blown away. Not only were you paying the most attention, you’ve captured all the information in an engaging way that they want to read and share. This also helps keep everyone in attendance quite literally on the same page.”

What to watch out for:

“Make sure you let people know before the meeting starts that you’ll be sketch noting. I’ve forgotten on many occasions and had clients glaring at me from across the table as they think you’re doodling and failing to pay attention in a meeting that they may have paid a lot of money for. A single sentence at the start can put them at ease (even if they don’t or won’t quite understand what you mean until the end). This lets them know you’re not wasting time – in fact, you’ve been deeply engaged the whole time.”

2. Sketching to problem solve

This is the really fun part, you’ve had the kick off meetings, the project is go and you’re in a room with your team. How are you going to address the problem? Draw it of course! A problem visualised is a problem halved.

Grab an A3 sheet of paper or get next to a whiteboard. Draw a big circle and write ‘the issue you’re trying to fix’ clearly — you can also add visual stimuli. This makes it visible for everyone. Now start importing ideas from around the room, even better get each individual to draw/write on a post it (one issue per note) — include every issue they can think of that’s connected to the core issue. This promotes an inclusive working environment as everyone gets to submit ideas.

“Drawing things out helps everyone in the room to start to visualise how the entire problem is constructed as a whole.”

Laying out and organising the ideas around your core problem helps group them into common themes. Once you’ve collected and organised the ideas you’ll be able to make connections between the problems. This helps you see where solutions might be able to have the most impact.

Drawing things out helps everyone in the room to start to visualise how the entire problem is constructed as a whole, whilst also helping identify how it can be broken down into chunks which can then be tackled in a more logical, manageable, way.

What to watch out for:

“Whilst this method helps get the brain thinking and ideas out there from the group, you can’t simply leave ideas on the whiteboard and think your problem is solved. Make sure you take time to gather, organise and finalise your ideas sessions into something more concrete and usable. Someone in the team should own this and be responsible for the next steps — you don’t want to lose a fantastic idea when the next meeting starts and someone wipes away all your good work.”

3. Communicating ideas

Once you’ve drawn out the problem, sketching is perfect for generating ideas for solutions. It’s quick, easy, and everyone can see what you mean — it’s also visual so you and your team can quickly identify, discuss and filter the good and bad ideas out.

“Whether it’s a screen, or a service design even simple diagrams will help you get your message across, AND explained clearly and easily.”

One of the best methods to ensure you reach a great idea that everyone agrees on in a group setting is to:

First:

Second:

Thirdly:

At the end of the session you’ll have an ideal group consensus on an approach or a design. Importantly, it’s been democratic as everyone had an opportunity to feed into the mock-up. The solution produced is reflective of all the best ideas from the whole group. Perfect!

Top Tip:

“Even when working alone sketching multiple quick ideas helps combine and consolidate your thoughts as you go, meaning you’ll still be able to easily communicate the how, why, and most importantly who your designs will help. Also, being able to swiftly doodle “I’m thinking this” helps overcome language barriers when working with international clients/customers — in my experience this has definitely saved time, and unnecessary frustration from both parties.”

4. Developing quick concepts

Another useful application for sketching in UX is drawing out the overall vision and concept for a project on a single page. This is especially helpful when preparing pitches, or early in initial engagements with clients, as it summarises your slides, early ideas, and overall experience in one simple image that creates a vision for the projects future development.

“Capturing a selection of your ideas visually early on, in one core image, can really help get clients on board with you and your team.”

Visualising your ideas also has the additional benefit of making them easily shareable, whether that’s internally in your war room, or for clients to distribute with their stakeholders and wider team. Importantly, this adds value to your client’s experience — they won’t expect it and as a result it will differentiate your projects from other agencies from day one.

This is one of my favourite parts of my sketching process, it’s an opportunity to explore the arc of what is possible and unrestrained, before the nuts and bolts of project constraints appear. The fact that it’s visual, and hand drawn adds a human connection; it creates a contrast with slickly designed business slides and shows we’re just real people trying to fix real people’s problems.

Including a sketch that’s so raw and unfinished will seem unusual to start with. Equally, you might be nervous about inserting a hand drawn image into a deck. You may ask yourself will it be right for the client? Will this kind of clarity benefit the project? But, don’t worry too much. I’ve had really positive feedback from these vision/concept pieces, so give it a try — it could really help your pitch or early conversations stand out from the crowd.

What to watch out for:

“I say above, not to worry about introducing sketches and rough concepts into a deck but this does come with a caveat; it won’t work for all clients. Some will be expecting glossy pictures of hands holding phones and tablets with a polished idea on them so they can conceive what the idea will look like in real life. As always, it’s important to gauge and understand your clients, I’d advice floating these kinds of ideas early and see how comfortable the client is with them. Sketching can still aid your thinking but it might just be that what you’ve created isn’t suitable to present to your final audience.”

5. ‘Sketching the sentiment’

Over the course of the research being captured, and the insights being qualified, I like to start building up what I call ‘Sketching the Sentiment’ — this is the earliest stage of my ‘real’ design process. I draw screens, but instead of worrying where the navigation bar might go, or how that menu might work, this stage is all about capturing the, “It should do something like this” aspect of the design.

Know you need a screen that asks for info? Draw some form fields and a question mark… There’s going to be some data visualisation? Draw a pie chart and a bar… There’ll be badges, awards or some form of recognition? Sketch a stickman cheering to himself on a podium or a medal/trophy, or anything that represents victory to you.

“I’d advise drawing one computer/tablet/phone and photocopying a bunch of them so you can draw one idea per ‘screen’. Then sketch out all the aspects you want your product or app to include, ‘sketch the sentiment’ of each stage in the process.”

You should avoid considering the details of each screen at this stage, this allows you to keep making progress, while exploring and reorganising how the process or journey should flow with ease. By moving these sketches around you can quickly highlight where things need to join, split, diverge or combine, without getting bogged down in specific aspects that (at this stage) will only hold you up.

Once you have the sentiments of each stage of the journey/process/app sketched out, use these as anchors or containers for the more specific steps or screens that build up and combine to complete each aspect of the overarching sentiment.

By outlining these key points first it allows you to easily visualise, understand, and explain at a high level how the process as a whole fits together. This provides you with the ability to explore and iterate solutions at a deeper level without disrupting the overall flow of the project.

Programs like PowerPoint and Illustrator allow you to create clean and easy to understand layouts for journey process maps. What they miss, however, is the human element, which makes it difficult to capture the emotions of what your users will be experiencing at each stage. Here’s where comic strips and storyboards come in — they’re ideal for capturing both what the user is doing and feeling at each interaction or touchpoint.

Comic strips are perfect for contrasting the existing journey to what an ideal journey might look like. Again, these can start lo-fi, with stickmen acting out the user journey they will move all the way through
— from the initial to the ideal experience.

Mapping out comics can really help you capture a complex process in a simple, insightful and engaging way. Combining the narrative elements and visuals of comic strips helps you clearly show to clients and stakeholders how the process works whilst highlighting how it can be improved from a human centred perspective.

Top tip:

“Take some time to learn simple expressions representing happiness, confusion, anger, frustration and relief — these will go a long way to bringing your journeys to life.”

What to watch out for:

Sometimes the idea of a comic is going to seem pretty out there to a client, when you mention a comic strip there’s a chance that the uninitiated might conjure up unsavoury images of nerds in basements engrossed in Gotham.

Again, setting the scene with your client is important. Introduce small 2–3 panel comics showing individual interactions along the journey rather than a fully formed graphic novel.

Also, creating comics requires some work and thought to ensure you’re capturing the parts of the journey you need to. Avoid launching straight into drawing it because you’ll end up failing to capture the right things. Plan it out, write a script, understand what is going to be on each panel and why. If you nail this down before you start drawing the comic will make far more sense and have greater impact with your client.

7. Prototyping screens and information architecture

Finally, remember to sketch your core designs. Once you’ve captured the conversations, solved the problems, sketched the sentiments, captured your user comics and come up with some concepts it’s time to get down to the nitty gritty of designs.

One advantage of generating lots of these types of sketches is that you can get to user testing earlier. Allowing you to quickly iterate based on feedback and then ensure you’re setting yourself up to refine the best ideas into high fidelity design elements. This stage is where all of the others come together.

Top Tip:

“Draw out ‘jigsaw pieces’ of the elements you know will need to make up the final designs. You can then freely move these design features around. Why not even try and change the priority of features to form the best possible journey?”

Get it right, refine it into true wireframes, and then pass it all to your visual designers so they can really bring the composite elements to life.

Finally, (and most importantly) share you work!

Throughout the whole process get in the habit of sharing your sketches, that means:

What I cannot stress enough is that the single biggest benefit of sketching is showing your thinking, ugliness and all, spanning the entire arc of a project.

Show people you’ve gone through a process to solve their problem, display the evolution of ideas, and explain how you got to where you did and why.

These benefits aren’t just limited to UX or design; no matter where you work we’re all in the business of solving problems. Simply put, having the ability to take people on this journey via sketchnoting can have huge benefits for everyone involved. Who knows? You might not even have to write a debrief deck, because they’ll already know everything… that sounds like sketching success to me!

It’s worth mentioning:

Chances are you’ve read through the article above and at times thought, “That won’t work for me” and you’re probably right, if you need to draw up a detailed list of requirements to pass to a development team there’s no way sketching is the right thing to do at that stage.

“Likewise, if you’ve got an important final project debrief to deliver to senior stakeholders you can’t just walk in with a handful of doodles and expect them to take you seriously. I’m not saying you should necessarily replace any part of your workflow with sketching. My point is that you should explore areas where you could combine and introduce sketches to enhance your workflow and tell a better story.”

Clients can be a funny bunch, as mentioned several times above, it’s best not to surprise them with this stuff out of the blue. Either make it clear upfront you’ll be doing it, or introduce sketching in a drip-fed manner to help on-board them with the process. Don’t lead them to expect a big reveal and turn up solely with some drawings if you haven’t led them to expect that as a deliverable.

Take little parts from each of my tips above and start introducing them slowly. See where sketching helps you think differently, or collaborate in a different way. If you’re uncomfortable putting them in front of clients straight away then you can use them personally or with your internal teams first. Gradually you’ll find your own niche where you can operate you can then work to widen this — just as I have.

Remember: there are no hard and fast rules, do what works best for you.

This article was originally published on Chris’ Medium page.

Design consultant at @foolproof_ux. Underground music fan, and #Eelmanchronicles #comics creator.

Related Posts

There seems to be a lot of sensationalism behind the polarizing idea that you should either be a generalist or a specialist. One side advocates that you have to be doing things their way, all while another side swears by their methods. Somewhere in the middle, there are the designers who seem to be getting by just fine pulling tactics… Read More →

Animated means full of life and excitement. Animation adds life to static things. When it comes to software, it’s not just for delight but for solving problems. As human beings we are used to see the world moving around us, and if any piece of software has coherent animations, it feels alive and natural. Tech leaders in the industry are… Read More →

As a huge tech fan and someone that works in the industry, I own of a lot of gadgets, especially smartphones. I have devices that run Android, Windows or even Ubuntu Touch, however my daily driver is an iPhone X simply because iOS is by far my favourite operating system to use. It works seamlessly with my Mac and iPad,… Read More →