Inside the Workflow: Sketching on Whiteboards

Today I want to give you a peek into my workflow, literally.  Here’s a picture:

Picture of my monitor and a whiteboard

Tackling the challenge

A product manager challenged me to incrementally improve an existing internal tool, keeping the potential engineering points very small.  He gave me the following constraints – I couldn’t remove any information from an already crowded search result list.  I had to add two additional pieces of information, and I could not use progressive disclosure – all information/functionality had to be visible at all times.

After I fought and lost the Get Rid of Information and Use Progressive Disclosure fights, I buckled in to work on a way to lay out this information and functionality in a way that would let the users quickly scan and act upon the data.

Like most designers, I think in pictures.  So, I whipped out my trusty UI Stencils Whiteboard and started sketching.  I used different color pens for each option and just started drawing every single idea that came into my mind.  I knew I couldn’t change things drastically, so I just pushed stuff around, played with encapsulation, played with methodology, and toyed with size and color.

You can see the result of my design work in the back, comped in situ in the page where it lives.  This may not be the final design – now it’s time to show it to my users and see if they can find everything they need to find in the list.

I’d really love for you to take two lessons out of this.

First, take the time to focus individually on every aspect of your page – even a list which takes up 25% of a whole deserves to be broken out of its context and explored in depth.

Second, there is no replacement for the speed and flexibility of sketching.  Since trees are a limited resource and tend to be much prettier when providing shade, save paper by using a whiteboard.  Plus, then you can erase the crappy stuff and there’ll never be any evidence that you had an idea that bad.


Today’s Interesting Link:

CompressPNG.com – This website is so slow that I actually forgot about it.  BUT, it did compress a PNG from 756K to 250K with no loss of quality at all.  Can’t shake a stick at that.  Just upload up to 20 PNGs and walk away.  Have dinner, come back, see compression.  It’s a bad UX, but a useful tool.

 Today’s Usability Quote:

“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to remove.”
-Antoine de Saint-Exupéry

Today’s Music To Design To:

Brian Hazard is an old acquaintance and he’s been making music for ages.  Color Theory is his one-man musical escapade, perfectly named to be designer music.  Expect electro synth-pop for the old stuff, and slightly edgier, industrial shininess for the newer stuff.  My favorite album is Sketches in Grey, which if I remember correctly is the first. But it’s probably not the best, it’s just the one I like most.

 

One thought on “Inside the Workflow: Sketching on Whiteboards

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>