The Sketching Process: Learning From a Cartoonist
1 Comment
When we design user interfaces, we go through a process of whiteboarding and wireframing before we design a full, visual composition. Essentially, we sketch out our work just like a painter or cartoonist or any other artist would. We get the basic ideas down on paper and then refine over and over again. With interface design though, it’s hard to clearly see the process in action because it happens over weeks or months. That’s why I thought it was really cool to watch these videos from Pete Emslie sketching out a cartoon in real-time. I took away a few important lessons from watching this that I’ll be applying to my own UI planning process.

Lesson #1: Sketch the outlines first in the lowest possible fidelity. Getting started is always the hardest part (at least it is for me). So right away, create a really high-level flow for the site. Group together a handful of sections or sub-flows (try not to have specific pages). This allows you to get going really quickly and ensures you’re thinking first about how the whole application will come together - not specific features.

Lesson #2: Refine the important stuff next, save the unimportant stuff for last. As soon as the outline was done, Pete moved right into refining the facial features. These are the most important part of his sketch - they’re the first thing someone will look at. If her eyes are messed up, people will notice. If her pinky is crooked, it’s not a huge deal. That’s just like your website. If your core features are great, people won’t care if your About Us page isn’t complete (or even if you have one).

Lesson #3: Never stop moving the pencil. Each time Pete goes back to his paper to refine the drawing, he makes only a slight refinement. He doesn’t try to jump straight from a rough outline to a really detailed, full-color drawing. If you find yourself stuck when designing your interface, it’s probably because you’re trying to get too detailed, too quickly. Take a step back and think higher-level. Abstract a page if you need to - you can come back later to refine it .

Lesson #4: It’s easier to erase thin, light lines than it is dark, heavy ones. Pete only commits to darker lines after he’s confident that all of his sketch lines are ok. The relation to web design here is obvious. Changing something on a wireframe is easy. Changing something in your code - hard.
Hilarious Instructions Make Installation Easier
1 Comment
When you’re a smaller company competing with a larger, more established (read: name-brand recognition) one, you have to find new ways to separate yourself from the ingrained competition. We’ve talked about this often around the lab, particularly in association with brand personality discussions around everything from MINI to Southwest to Coke.
So Peerless Faucets, as Tom learned, is taking that notion of brand personality and applying it whole-heartedly. When he chose the Peerless faucet over other brands like Kohler or Moen, for example, he was at first concerned. However, as he dug into Peerless’ rather personal and hilarious installation instructions, he converted from a skeptic to a fan in a matter of moments.
It’s not everyday that the user experience of installing a faucet, which is normally led by hard-to-read graphics and poorly labeled directions, is so enjoyable. The instructional content isn’t just funny, but it’s also MUCH easier to follow thanks to their brevity and detail.
Peerless established itself to Tom—and probably lots of other people—as an approachable company that understands you’re a person trying to do something you don’t do everyday. They understand a little humor is the perfect remedy to what otherwise can be a frustrating process, and made their mark by jumping outside of the box to communicate installation in a personable way.
Initial Impressions of Silverback
1 Comment
There are number of things in life we know we should do more often, but tend to avoid because they’re kind of a pain. In my job, that tends to be user testing (aka usability testing). Testing can provide invaluable insights for designers and developers at any stage in our process, but it can be a major hassle. There’s the planning, the recruiting, the scheduling, logistics, analysis, and then the all-important reporting. Silverback is a new app from Clearleft that promises to take a lot of the pain out of the process. It’s lightweight, easy to use, and requires no hardware other than that built-in to your laptop (assuming you have an Apple laptop of recent vintage).
Offline Experiences Can Influence Those Online
3 Comments
We all know that a great online experience is rather pointless if the product or service can’t live up to the bells and whistles of its site. But, even though I’m biased toward having the raddest site possible, I do believe a less-than-stellar online experience can be overlooked (to a degree) if the offline offering exceeds expectations.
For example, when I attended webcontent2008 last week in the Windy City, I stayed at one of my favorite hotels—Hotel Allegro—in the theatre district. I discovered the Kimpton brand about six years ago when I first moved to Washington, DC, and was staying with a friend in a suburb about an hour outside the city. I decided to avoid traffic and parking by packing up my (one) interview suit and head into the District for a few days, where I stayed at Topaz. I did it solely because it was affordable.
So I was completely surprised to learn upon check-in—during which I was treated like a celebrity—that the hotel was anything but cheap. Not only did they have complimentary wine tasting each evening in the lobby as a way to encourage guest interaction, but the entire staff talked to me; actually seemingly went out of their ways to be friendly and conversational. When I had pounded the pavement for hours only to score a single interview, it was absolutely glorious to come back to my intricately-designed, luxurious room, where I recharged before another round of knocking on doors.
When several of my girlfriends and I decided to spend New Year’s 2003 in Chicago, I excitedly booked another Kimpton—our standard room at Allegro surprised me with two bathrooms, which was perfect for our party of four girls. It was a second exceptional hotel experience that made me a fan for life of this environmentally-friendly company that has commitments to programs like Dress for Success.
But, whenever I’d recommend the brand to anyone, I’d always hear the same thing: "Their website is awful."
Ok, so it’s not the BEST website I’ve ever seen, by any means, but what I can honestly say is that I’m much more forgiving thanks to its incredible offline experience. The booking process is convoluted, and their imagery is slow to load and (in my opinion) doesn’t properly showcase their personal design aesthetics and themes they’ve so deliberately chosen for their properties. But their product has been unquestioningly solid and enjoyable to-date.
So I think, just imagine how people would respond if their corporate site did a better job online of relaying that unique and engaging experience I’ve come to expect offline—I mean, credibility and authority are at stake here. Undoubtedly, the result would be more conversions.
When I submitted my post-stay survey they emailed to me, I mentioned a few things: First, that I loved the chocolate almonds and sparkling water they gave me upon check-in. Second, that I couldn’t find outlets easily. Finally, that I wished their website was easier to use (and prettier, too). Within a couple days, I had a personal email from their assistant front office manager detailing responses to each of my items.
The personal touch goes to further illustrate my point that a tremendous offline experience made me assign credibility that I might not otherwise gather from their web presence. And, when it comes to branding, providing a fantastic, quality service or product always is step one. Step two follows: bring that brand experience truly online.
User-Centric Design is About User Goals AND Business Goals, if the Client Gets It
2 Comments
For the most part, we act as a User-Centric Design (UCD) shop for our clients. In its most basic sense, this means that when we're wireframing an e-commerce site, prototyping a new web application, or putting together a page description document for a client's about page, our foremost concern revolves around the needs and wants of the users. Usually, that means we go about shaping our client's business goals in the context of user goals, and ideally the client recognizes that achieving the latter helps achieve the former. But if they don't get it...
Continue reading "User-Centric Design is About User Goals AND Business Goals, if the Client Gets It"

Recent Comments