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 training.npr.org. 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 http://willowtreeapps.com/blog/3-steps-to-running-design-studio-workshops-best-practices-tips/

Converse Rubber Tracks Hackathon

All-day Hackathon at the Converse HQ in downtown Boston today. Starting at 9AM, along side my friend and awesome front-end developer, Dan Norton, and a bunch of other wildly talented developers we began coming up with ideas. The problem: Build new technology applications which utilize the Rubber Tracks Sample Library API created by indabamusic.com.

The solution we came up with was to leverage Twitter’s API and the Rubber Tracks Sample Library together as a way to create songs based on tweets. Dan dusted off some work he had done previously with Sound Manager and the Twitter/Node extension. We called the application ‘Twaural’. Here’s the deck we presented and a link to the LIVE APP.

twaural - about twaural-app.002 twaural-app.003 twaural-app.004 twaural-app.005 twaural-app.006

UPDATE: Among all the fantastic developers Dan and I took home some swag and tied for 3rd place in the voting (which happened around 1:30AM).

View on GitHub: https://github.com/imnotdannorton/twaural

 

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.

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

Overview
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).

image08image04image05image09

 

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).

image02

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

image11

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

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

image03

6. Visit the SVG Editor from Google: http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html

7. In the top left Select the SVG icon.

image07

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:
http://petercollingridge.appspot.com/svg-editor

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

image06

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!

Resources

CSS Tricks – Intro to SVG
Chris Coyier. Enough said. Tons of great resources here: https://css-tricks.com/using-svg/

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:
http://callmenick.com/post/getting-started-inline-svg

Base64 Encoder/Decoder
Turn your SVGs into Base64 encoded images that you can quickly reference: http://www.mobilefish.com/services/base64/base64.php

Potential Solution
http://svgtutorial.com/optimizing-svg-with-grunt/

SRCCON in Minneapolis, MN

A fun few days in Minnesota at SRCCON 2015 (lovely pictures on Instagram). Wasn’t sure what to think going into the conference, but whatever preconceived notions I had DID NOT MATTER. It was unlike any conference I have been to. Instead of a list of industry leading professionals talking at you from behind a microphone, we spent 2 days in front of microphones talking about the Techno-Journo industry and how we can all make it better through process. Tons of rich discourse, experiments and hacks happened each day. Here’s my reflection from each of the talks I attended:

Day 1 – Reflections

Become a Better Programmer Through Mundane Programming (2/5)
Daniel Nguyen, Geoff Hing

  • Dan and Geoff presented concepts on how to filter task normal done in Excel and developers talked about fails. Look into using curl and wget to scrape sites. could be a interesting way to break out boring tasks or data into fun side projects

Everyone Is an Illustrator: Making Your Own Art When None Exists (4/5)
Arjuna Soriano, Kavya Sukumar

  • Kavya (Knight Fellow at Vox) and Arjuna (front end dev) walked through exercises from Linda Barry’s Syllabus. Draw for 8 minutes a day. Think about the setting (who, what, why) in order to construct a narrative. Put unlike object together (tattoos on bridge, binoculars on rats) and show humor in simple ways (unsuccessful projects end up on your head).

Building Strong Journo-Tech Networks—Internationally (3/5)
Anika Gupta, Gabriela Rodriguez

  • A short session on Journalism abroad and the struggles to retain connections with community. Anika and Gabriela. Both strong journalists and developers. Fun to discuss what makes a successful news org and hear the trend that veteran news folks are becoming entrepreneurs in China, as well as internationally.

Taking Web Accessibility Beyond Assumptions (3/5)
Ryan Murphy

  • Ryan Murphy led a conversation (with no real answers) about accessibility within organizations. Is it an after thought? Should we provide more business value to it? How do we make it a line item? How do we create empathy for the user instead of just getting in their shoes. Include them. Ask more specific screener questions that ask: Would you consider yourself disadvantaged?

Recruiting and Hiring People Not Wishlists (3/5)
Erika Owens, Helga Salinas, Ted Han

  • Fun way to end the day. Three folks led the conversation about Hiring Managers vs. Applicants. What we’d like to see. How to make the process better? Overall a clear and jargon-less process is crucial. Along with an understanding of the role for any applicant would be best. Where as the hiring manager also considers process, but thinks about crudless development.
  • Talked with Ted from DocumentCloud about CP RE: how they interact with certain data.

Lightning Talks (5/5)

Day 2

Let’s Act Out Code Concepts to Help Teach Them (4/5)
Matt Waite

  • After asking what concepts would be beneficial to teach n00bs to development, Matt had us break out in to groups and come up with way—or skits—to act out those concepts. Here’s the result: https://github.com/mattwaite/programming-skits

Let’s Stop Worrying and Let Our Reporters Make Their Own Graphics (4/5)
David Yanofsky, Becky Bowers

  • RUN, FIX, KILL. After being show a chart, we were asked in our groups if we’d run it, fix it or kill it. A fun way to talk about how visual charts should be instantly understandable and if they aren’t we should talk about them. There was also a lively debate between myself and Becky about the merits of the “block chart”
  • More at: Bit.ly/yano-bowers

What (Front-End) Tools Do You Use? (5/5)
Alan Palazzolo, Justin Heideman

Surviving the News Business: Self-Care and Overcoming Burnout (3/5)
Alyson Hurt, Tiff Fehr

  • A little bit of “Love Thy Neighbor” and having empathy go a long way to prevent Lost “Puppies” or Curmudgeon-y “Barnacles”.
  • A great way to judge yourself 1.) try 360 reviews if you dare, or 2.) https://www.flickr.com/photos/livlab/3056828148/

After the Altar Call: Maintaining Momentum, Community, and Inspiration Beyond Conferences (2/5)
Kaeti Hinck, Millie Tran

  • Great conversation about staying in touch with your community. Let’s do more of that.
  • Follow the #nerdlist channel on Slack for more insight.

We didn’t lose! Queue the Prince…oh no, let’s go…get beers and watch women’s soccer!

Also, if the above is insufficient and you still need more, I recommend the brief from David Yanovsky (@YAN0) of QZ: http://data.qz.com/srccon-daily-brief/

And the official Etherpad: https://etherpad.mozilla.org/SRCCON2015-onward