Planning, Podcasts, and Purchases: The One About Design

I've decided to take a more structured approach to how I'm building my latest project. It's easy to get excited about a new project and want to run rather than crawl or walk your way into it. But I've had a few lessons over the last couple of years that I imagine most (aspiring) code monkeys programmers go through.

1. Planning is better than refactoring x factorial times (yes, that would be a large number).
2. Refactoring is better than scrapping the project (there are exceptions).
3. Having an overall idea of UX from the beginning is helpful to steer the project.

So with that said, I decided to start thinking about this project from a top level view. I wanted to plan out the UX somewhat with some sketches. Using a pen and doodling on legal pads and napkins really forced me to think about what I wanted. The trend these days is toward simplicity. Skeuomorphic designs are transitioning to more flat designs. Microsoft is probably my favorite example of that.

At the same time, I have been listening to a lot of podcasts since the summer. I haven't been a podcast listener before, but at some point over the summer I decided that I was no longer going to be listening to music or NPR. Car time meant learning time. And thus I feasted on episodic backlogs of some shows. One in particular is a fantastic listen. For starters, it's entertaining. But it has some really excellent tips that span languages and paradigms. I'm referring to The Windows Developer Show by the Lowdermilks (Ryan and Travis - if they ever read this, I went alphabetical with your names...it could have just as easily have been Travis and his co-host Baby Man).

The brothers both work at Microsoft in different programs. Ryan's a Developer Platform Evangelist, or the guy you go to if he's your area rep to learn about / ask for stuff. The local DPE here in Denver is awesome (go Jerry Nixon!) and based on what you hear on the show, Ryan sounds just as passionate about helping out his developer community. Travis is on the team that works on Visual Studio and he does UX. So you have a nice blend of design inspired views mixed with development views. And, of course, both cross over. At the end of every show, they do a developer tip of the week (Ryan) and a Designer tip of the week (Travis). Going through the older shows and working my way up to present, I came across a design tip that I found fantastic: UI Stencils. 

If you haven't seen this site and you do anything related to development, check this site out. I had seen it before but it had drifted to the back of my mind as "not for me." I was so wrong. Developers are able to accomplish a ton in a short period of time with some of the web frameworks and libraries that are out there now. Working with Rails lately has certainly shown me how productive I can be late at night even when I'm not all there. But a lot of us (read: me) need to put more thought and effort into the designs we're putting out there. My office doesn't have an in-house designer. The developers all do it. And that's fine and we get the job done, but I know we'd have a much more modern, sleek, and interesting interface if we had someone that was actually a designer. Perhaps our three-man development team should read Travis' book.

So enter UI Stencils and their awesome-sauce. They sell tools to help make designs. I bought this sketchpad and a couple of these browser stickies. And I'm hooked. Talk about awesome. It has been a wonderful experience to force myself to think about things in pen and paper because it's unforgiving. I'm sure not everyone will agree with that, but forcing myself away from the keyboard and actually drawing out how I think it should work saves me time. I can draw a column setup and play around with where I want something on a piece of paper much faster than I can get that layout perfect on a web page even with Bootstrap or Foundation.

I've done mockups in html before with a framework, and it works. But I find I obsess more about whether I got the pixels lined up instead of whether the UX is well done. The pen and paper allows me to abstract the concerns away. It makes me think "is this intuitive" instead of "what css class will make it do that thing?" 

As if it weren't awesome enough that I'm getting mental exercise benefit out of this, it turns out that the folks at UI Stencils are freaking awesome. 

Often when I order food online, I'll ask for something random in the notes section. Ya know, that section that's really for comments about your order. Like "leave off the blue cheese." Instead, when I order Chipotle online I say "make with love." And for some reason, at almost every Chipotle that gets that request, they draw a heart on the burrito's foil wrapper. I like that. It's fun customer service and engenders customer affection. I've asked Domino's to draw a dinosaur on the box before. And my pizza showed up with a T-Rex in sharpie on it. It was awesome.

I have a two-year-old son who currently happens to be obsessed with three things:

1. Dinosaurs. His first love. He often turns on Walking with Dinosaurs and then ushers Mom and Dad out of the room so he can run around the living room roaring. It's fantastic.
2. Penguins. Or as he calls them, cheep cheeps. He has a stuffed baby emperor penguin that his aunt gave him and he takes that thing everywhere. He absolutely adores it.
3. Cats. Or neee-ooows. He's taken to pretending he has a cat that lives in his pocket lately. In fact, this past weekend he gave me one to live in my pocket. I have always wanted a cat that goes with me everywhere. Thanks to my son, I now have one.

When I placed my order with UI Stencils, I was feeling rather silly. My wife was giving me this as an anniversary present and I thought it would be interesting to ask a bunch of design driven persons if they would draw something on the package for me. In the notes section, I put the following:

Can y'all draw a special picture on the box for my son? He loves dinosaurs, penguins, and cats... Just sayin', that'd be awesome.

At the time I thought when the package arrived, if they did something like that, then my son would be excited to open the package with me and get to keep his special part of it - the picture. When the package arrived, I couldn't help but burst into that silly, joyous laughter you get when someone or something just makes you feel fantastic. Someone was nice enough to draw all three pictures.

The Package

Naturally, I couldn't wait to show my son.

Happy Progeny

And a discussion about the pictures.

Neeow

Needless to say, I'm absolutely going to go around recommending them to anyone in the dev/design world. I can't wait to place my next order. These guys are fantastic and the quality of the products they sent out is wonderful too. The sketchpads and stickies are on paper that has weight to it. It doesn't feel cheap and it's a joy to write on.

So since you made it this far, take a minute and go check out their site. Some of the videos on the product pages showing how to use them are pretty fun time lapses. There's definitely a lot of value as a developer to step back and look at a project from a design point of view. And I think in the future, I'm going to approach more projects this way. Thanks to the Lowdermilks and UI Stencils for changing the way I think about the process.