How to Conduct a Sketching Session

As a designer, how many times do you hear, we just need a designer on it? One of the last projects I worked on at NPR was My biggest challenge on the project was that it was already done by the time it reached my desk—it just needed a designer on it. Not only does using the word “just” in that sentence devalue the subject matter, but it also highlights the illiteracy of what design and collaboration can bring to a project!

To be fair, the project was nearly complete. The content was there (kudos to the @nprtraining team…they are amazing at what they do), but after putting on my UX hat and digging into the site it was clear it needed more than just a designer. It needed a redesign.

The first step of any redesign process involves knowing the brand’s mission and goals (Vox). In order to more fully understand the goal of the project we conducted a sketching session. Sketching sessions are part of Lean UX and are an incredibly useful tool in order to level-set a team around priorities, ideas, and projects. Below I’ve recounted the steps of our Sketching Session:

how to sketching session

  1. Start by gathering a multi-disciplinary team together in a room who have a vested interest in the project, e.g., core team members, stakeholders, designers, and developers, social media team, etc. Keep the group to 6 or less, if possible.
  2. Choose a unbiased moderator. Someone who is not part of the core team. This person will lead the team through the following exercise, keep track of time, takes notes and listen for common patterns in the team’s responses. They will recap at the end of each round of sketching.
  3. Round One: At a whiteboard/large pad of paper, the moderator should ask the core team to say what they think is the “purpose” or mission statement of the project. The core team is encouraged to just yell out what they think and the moderator will write down what is said on the whiteboard/paper.
  4. Next, the moderator asks the team to describe “Who are the users”
  5. Finally, the team is asked to describe “What are the goals of these users?” A consensus should start to form around Purpose, Users and Goals of the project. Keep this in a visible spot throughout the session…Now let’s sketch!purpose users goals
  6. Round Two: The moderator explains to the team to think “blue sky” about what this project could look like, i.e., the homepage. They are asked to sketch for 10 minutes. Set a timer (and play some music). At the end of 10 minutes, each member will present their sketches to the room—i.e., what they think the homepage could look like—and explain their thought process. No one is judged on their artistic ability. It’s all about the idea. Think big here!
  7. While participants are going around the room explaining their sketches, the moderator should be listening for commonalities and popular concepts. Really listen to the why here. Afterwards, take a 15-minute break.
  8. Round Three: The moderator asks the team to sketch MORE ideas, building on everyones concepts they just presented for another 10 minutes (a good time to change up the music).
  9. At the end of the second 10-minute sketching session, each member should go around again and describe their sketches to the room. Again, the moderator can synthesize common elements, identify patterns and facilitates the conversation. Optional 5-minute break.think sketch present talk
  10. Once Round three is completed and everyone has had a chance to discuss their sketches, have the team recap and set the next steps / follow-up meetings.

Approx time: 2 hours. Can be less with fewer breaks and chit-chat.

I’m always trying to improve upon this so please let me know what did or did not work for you. Reach out to me on Twitter or email. For more about sketching sessions, visit

My SVG Workflow Needs to Change

My process for create and publishing SVGs on the web is a little cumbersome. The goal of this walk-through is to be able to write a script (Grunt process) that’ll take care of this tedium for me. Feel free to skip the backstory and go right to the script demo at the bottom.

Tools of the Trade icons – 90 x 300px PNGs images

To start I need an example of images that should be SVGs. As a designer and illustrator, I have these icons that I call my Tools of the Trade on my homepage:

  • A Pencil for sketching – modeled after the Dixon® Ticonderoga #2 (my favorite toy)
  • A Pen for illustrating – modeled after the Stabilo® .88 Drawing Pen
  • A Marker for UX & whiteboarding – modeled after Standard Expo® Dry Erase Marker
  • A Tablet Pen for design – modeled after Wacom® Intuos2 pen

I use them as background images in my header using the class .tooltime (a friendly nod to Tim “The Tool Man” Taylor and Al “The Bore Man” Boreland).



What’s Wrong with Images?
My biggest problem with these icons is that they aren’t transparent! Why are they even PNGs?! I could just re-export each one with an alpha channel, but because they were originally designed and exported using Illustrator why not clean them up and improve my design workflow at the same time.

Performance – SVGs instead of images FTW!
I already increased the performance using lazyload (actually LazySizes) taking the total payload of my single page portfolio site from ~4MB to 1mb; A 400% reduction (right?). So how big are these PNGs? Each one is about 3.6kb, plus the network request. I think we should be able to dramatically reduce that using SVG. (In fact we can, it’s only 1.1kb, plus no request).

Creating SVGs – Step-by-Step

1. In Adobe® Illustrator, create a new document that is the desired dimensions, or viewport. In this case it is 90x300px.

2. Open the original artwork, highlight the shapes and paths, copy and paste the graphic into the new document (step 1).


3. Next choose “Save As…” and change the format to “SVG”. Then click “Save”.


4. Next, select “SVG Code…” at the bottom.

5. Highlight and Copy the text in that SVG code dialog window.


6. Visit the SVG Editor from Google:

7. In the top left Select the SVG icon.


8. Paste the SVG Code from Illustrator into this SVG editor. Then click Apply Changes.

9. Now, Click the icon in the SVG Editor once more and copy the edited SVG code.

10. Open Peter Collingridge’s SVG Optimizer:

11. Paste the SVG Code in the the box and click “Load” button.


12. Choose the level of “Optimisation” (Conservative or Extreme).

13. Download the optimized SVG.

Finishing Steps
Now I’ll rename the SVG from “optimised.svg” to something more meaningful, i.e., tool-pencil.svg. Then upload to my server. Remember, even on the server I can still edit it, add groups, titles, CSS, fill and stroke colors, even animate it because SVG is markup. They are made for customizing. Also, remember original PNG was ~4kb. As an optimized SVG it is now only 1kb.image01

Next Steps
The process for optimizing SVGs isn’t hard, it just requires a few steps and tools. The goal of jotting this process down is because I would like to automate it instead of Copying & Pasting. I think I could build a script to do this. Essentially, saving the SVG right from Adobe® Illustrator that is optimized and ready for the web. Stay tuned for developments and thanks for reading!


CSS Tricks – Intro to SVG
Chris Coyier. Enough said. Tons of great resources here:

Drawing Basic Shapes
Basic shapes are easier to draw than polygons. So if you find yourself needing a or element use the SVG shape syntax instead. It’s simpler to read and edit.

More Advanced Shapes
If you’re feeling adventurous and want to understand how the and element work, here are a few useful resources that I’ve found to teach you how to edit SVG paths:

Base64 Encoder/Decoder
Turn your SVGs into Base64 encoded images that you can quickly reference:

Potential Solution