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

When you look at a slick automotive brochure, or an ad on the subway, or a well designed web page, chances are you don't give a passing thought to the work that went into the design.  But it's likely that the design you're looking at has been through several iterations, and some of those discarded iterations contained some probably pretty bad ideas.

On the pages for our Opteron products, you've already seen in previous postings the information architecture (wireframe) work and photography explorations we did. But even with great IA and photography, there's still a big question about how the page fits together.  Initail layout work is done in the IA phase with wireframes. But the wireframes can't tell you every nuance of how things are going to fit together on the page, and especially when you're working with an intensely visual system most designer prefer to complete final 'fit and finish' of a design in the visual design phase.

Here are some examples of the visual designs we put together as we were doing the designs for the pages. This work was done mostly by Method, Inc., working closely with our web design group at Sun.

BTW, the layouts are called "comps," which is short for "comparatives," and as the name implies they're intended to provide contrasting ways to approach the same design problem. Though some designers like to force a hard choice of just one of the comps, a more common occuurance is that you'll see some good elements in each of the designs, and you'll ask for a hybird to be developed that assimilates the best components and ideas from each.

In the first run of comps we worked through, each comp has some merits:

But, none of these visual designs above was quite right.

In the first panel, we liked the bold placement of the workstation, and also how the red button docked so nicely with the headline and photo... but not so much how the explanatory text ran underneath the photo since it kind of got lost.

In the second panel, we liked how the explanatory text fit below the photo and provided a bit more space for explanation... but we didn't like the placement and treatment of the workstations so much, and we thought the red button and text treatment was noisy.

And in the third panel, we loved the idea of the product gallery that launched from a component in the right column, but the top panel had some of the same problems as the middle panel.

So, we asked the visual designers to create a hybrid design that used the best ideas from all three comps. There were still a few unresolved issues, so they did more designs from which we could pick a final direction:

We liked all of these, but in the comp on the right, the "Price & Buy" button wasn't high enough. And, even after looking at it a while, we still preferred the product picture on the left rather (middle panel) than the right (right panel)   So, the panel in the middle was the one we chose for final design.

We took this design into usability testing, (usually something that we do earlier in the process), performed a few more tweaks, and then transformed the visual design (which is delivered as JPEGs) into HTML and JSPs.

There was a lot that I didn't cover in writing about the design process for these pages over the last couple of weeks (including the usability process, which I'll cover in detail soon)... but I hope this gives a flavor of the type of work that goes into a new web design.

Cheers.