Sun.com Customer Experience and Stuff: Notes from the Sun.com customer experience team.

Tucked away at home, I have a copy of a Disney "model sheet" from the 1960s. It captures the earliest solidified concepts for a certain bouncy tiger and befuddled bear -- showing their nuances via rows upon rows of pencil sketches of what the two characters look like in different situations and how they would interact with each other.

This model sheet is not just neat to look at; it was an essential tool for the animators who had to make the characters come to life. Character designers at the animation studios create such model sheets so they can understand how specific characters are supposed to look from different angles and with different expressions, and most importantly, so they can communicate to legions of animators and in-betweeners who draw characters by hand in pencil (or used to).

The model sheets are almost like a visual stencil or printing plate -- once you have the basic design of a character nailed down, animators could use it for inspiration and reference to create the thousands and thousands of drawings that made an animated movie. Then, the drawings were "painted" with color to create the color cartoon frames you see on the screen. (In the old days, they were literally painted from the back on transparencies. More recently, the painting was done via computer ... and now the entire process has shifted again as animation moves to completely computer-generated imagery. But all of the processes start with a model.)

A typical animation pencil drawing. Judy Jetson as a pencil drawing. (My collection)	Judy Jetson in living color: A painted celluloid of the same frame. (My collection)

Interestingly, the process for creating good designs new web page templates is pretty similar.  Though we don't have characters who jump up and down (except sometimes in our meetings at work), we do create detailed concepts of how new page types will look, what components will be on various pages and how those components will interact. The concept sheets we use are called "wireframes" or "schematics," and we also use them as tools both with ourselves and with customers to figure out if new design ideas will work.

It's quicker and cheaper to create a wireframe than a full visual design with all of the photography and other graphic elements. And, since the wireframe is clearly not the final design, they're often better for exploring concepts since people won't nitpick over colors or photography.

A wireframe version of an initial design.	The final visual design ("painted") of the same, after much work.

Below are a couple of examples of wireframes from the Opteron-based products I've been writing about lately. In the first, we built a wireframe using a fairly traditional Sun.com product page layout. The one difference was that we added a top graphic to the page with some vertical tabs on the right.  This was a pretty simple layout: No real pictures (just grey blocks), little real text. Even though this was just a wireframe in black and white, we could tell that it wasn't enough of a departure from the norm to get to what we were looking for on these new products.

There was a lot we like about the alternative wireframe, below. Even though it too was in just black and white and without any real text, we could tell that:

• It made much better use the screen real estate -- we'd be able to fit more information into the body of the page, and do it cleanly
• The two-column design, with a wider main column, would be less noisy than the three column design above
• Though the main picture wasn't wide enough, we could widen it in a future design iteration and incorporate the right side Buy button and promotional text
• The horizontal tabs afforded more space for tab labels than  vertical tabs (though undoubtedly we could have come up with a clever solution for this if we had stuck with the vertical tabs).

So, we picked the second wireframe as our embarkation point, and it provided a solid model from which to work, much as the model sheets and drawings of Pooh, Tigger, and Judy did for the animators back in the 1960s. Imagine the page above in full color with some tweaks, and that'd be a pretty good representation of the final design that exists on our sites today.

The next steps, which I'll write about soon, were to understand develop a photography system for the new pages, work up the content for the pages and test it with customers (the 'drawing' and 'pencil test' equivalents in the animation world), and work through some iterations of the visual design ("color exploration" and "painting," as it were).

Cheers from Salt Lake City (well, when I wrote this).