Growing up, I have always been a visual learner. Drawing out my thoughts helped me better understand concepts and play around with how things could fit together. I also use sketching as a way to articulate my thoughts when it comes to writing. I didnât realize until later on in my career that most people find it difficult to communicate the ideas that they have in their heads in a visual way.
As a designer, part of your role is to translate thoughts and ideas into a shared reality. When you sketch, people can see the idea, understand it and begin to empathize. This is when a team of people can start to work towards something greater.
Sketching is essentially a skill that can be practiced. There are always new things to learn and refine in your process. Over time, you can build a toolbox of sketching techniques for new problems that you encounter in the future.
Tips to Improve Your Sketching
- Add Arrows & Detailed Annotations - Create a user flow by mapping out the key interactions. Use your sketches to guide someone through a story in your absence.
- Write Feedback Next to Your Sketches - Your sketches should evolve as new ideas come to the table. Note down common areas of confusion and ideas that youâd like to explore further.
- Attach Sketches to Your Project File - When youâve completed your sketches, take a picture and attach the image directly into your working design document. This way you can quickly reference what decisions led to which outcomes without having to search for it.
- Give Your Sketches a Name (Optional) - Itâs fun sometimes to give an idea or project a clever name. It helps to bring people on board when you kick start a project. Some examples from my coworkers: Can I talk to your Page Manager? or NâSync - for a real-time collaboration project.
. . .
Sketching techniques to add to your design process
Think about how these techniques could be applied to your own design process and how you can build your own toolbox for solving problems in the future.
1) Crazy 8âs
Phase of Design Process: Ideation
Crazy 8âs is an exercise used during the Sketching phase of a Design Sprint. The purpose of this exercise is to generate a wide range of solutions in a short period of time. Basically, each person has 8 minutes to sketch out 8 ideas. Prior to sketching, all sprint participants should have a clear understanding of what problem is and why itâs important to solve.
Technique: Start with a blank piece of paper. Fold the paper in half four times to create 8 sections. Set eight 1-minute timers. Sketch 1 idea per minute in each section.
This can be used as a group exercise or individually as part of your design process. In both cases, setting a time limit helps people explore diverging ideas rather than narrowing in on one solution too early in the process.
Crazy 8âs Example: Meal Prep App.
If you are running this exercise as part of a design sprint, coming up with a new idea every minute will likely feel rushed. Reassure the group that itâs okay to skip a round or two and move onto the next idea -coming up with a hand full of ideas is better than just having 1 or 2! These sketches help you think through your ideas without being influenced by other people. You also donât need to share any of these sketches. The next phase in a sprint would require you to look back at your own sketches and pitch your best solution.
2) 8-4-2-1 Rapid Prototyping
Phase of Design Process: Ideation, Prototyping
This is a rapid prototyping method that I learned in my post-grad program. Practicing this exercise helps you incorporate feedback at all stages of a design. Itâs also a quick exercise to get your team involved in at the early stages of a project -especially teams that are not familiar with UX processes.
Technique: Sketch for 8 minutes, 6 minutes, 4 minutes and 2 minutes with 2 minute feedback sessions in between. It helps to provide the person giving you feedback with a bit of context about the problem before you begin sketching.
I use this technique to help me work through problems quickly -it takes less than 30 minutes to go through this exercise and have work to show for it. Itâs also a quick technique to put into practice when working on your own projects or design challenges. I go into more detail about this rapid prototyping technique in this post.
8-6-4-2 Rapid Prototyping Example: Audio Tour Sketches
3) Breadboarding Sketch
Phase of Design Process: Ideation, Prototyping
Breadboarding is a method used by electrical engineers to test out a concept using lights and connectors before creating a physical prototype. It allows you to experiment and explore different approaches when solving problems in circuit design. This idea was adapted in the Shape Up process used by Basecamp as a way to quickly fit new ideas into an existing flow.
Find the Elements, Shape Up
There are 3 concepts used in a breadboarding sketch:
- Places are where you can navigate to (for example, screens and pop-up modals).
- Affordances are things that you can interact with (for example, buttons, form fields). In this case, interface copy is also considered as an affordance because it provides users information about what they can do next.
- Connecting Lines show how you would move from one place to another.
Technique: Start by writing down a âplaceâ (where the user is currently). Then map out any affordances (elements that the user can act on). Use connecting lines to show how users would move from place to another while performing a specific task. Explore different flows and justify when changes are made.
For example:
Breadboarding Sketch Example: User Flow when Upgrading.
This type of sketching allows ideas to live temporarily. You can quickly explore different ideas without having it be attached to any interface. I use this technique in the early stages where Iâd want to move through ideas quickly and evaluate what the pros and cons look like for each flow.
4) Fat Marker Sketches
Phase of Design Process: Ideation, Prototyping
This is another method introduced in the Shape Up process where the emphasis is to communicate ideas at the âright level of abstractionâ. Using a fat marker to draw prevents you from jumping into details too quickly. You should be able to communicate ideas simply by giving context to how the feature would fit into the product as a whole.
Technique: Fat marker sketches are that drawn with broad strokes. This makes it difficult to add detail to your sketches. Start with the key elements then add affordances as needed. You should have the main problem, use cases and constraints identified before sketching out your ideas.
Typically, I use a double-sided marker for sketching. The thinner end allows me to draw with precision and the fat end of the marker would be used for checking off items in my to-do lists (very satisfying). This simple technique helped me to focus on working through the main elements of the solution (no matter how rough the idea may be) rather than drawing perfect lines. Oftentimes, ideas start off looking very rough and sometimes thatâs where we want to be.
5) Storyboarding with âSnapshotsâ
Phase of Design Process: Pitch / Solution
A twist on the traditional storyboarding is to use this method to communicate processes or interactions that would normally be difficult to explain. You can do this by creating âsnapshotsâ of a process or interaction and then add annotations for further explanation.
Technique: Sketch out the first interaction, take a picture and annotate. Add in the next part of the interaction and repeat this process to create a linear (step-by-step) story of a process.
Normally, storyboarding is used during the ideation phase when used to walk someone through the userâs journey. This type of storyboarding would be included at the end of the design process with the final documentation (the pitch, following the Shape Up process). This has helped me share technical details and interactions across teams.
Storyboard Examples: (left: demo video, right: backend processes).
. . .
Conclusion
I like to think of sketching as the âtranslationâ part of the design process, where free-floating ideas start to become more concrete as we explore different ways to solve a problem. Sketching helps you see the design from the lense of what it could be. It helps walk others through the story of how an idea begins, evolves and grows beyond the pages in our sketchbook.
. . .
Thanks for reading! If you are interested in chatting, drop me a message at elainetran.tran@gmail.com or connect with me on LinkedIn.
