Designing the New Detailed Image Home Page

Yesterday we launched a new home page for Detailed Image.

Here’s what the old home page looked like:

Old Detailed Image Home Page

And here’s the new one:

New Detailed Image Home Page

In retrospect, Mike and I both thought that we had taken several steps backwards with our last few home page designs since we re-launched the entire site about 15 months ago. We wanted to bring back the emphasis on our products and all of our sales without overloading the user with text. We also wanted it to be a bit more eye-catching.

Maybe a better way to look at this redesign is to look at just the top 800 px, which is approximately what’s visible to the average user:

New Detailed Image Home Page above the fold

With this new large rotating banner system (if you visit the page you’ll see that it rotates between the 20% off promo, Daily Special, Weekly Special, and Monthly Specials), we’re able to convey all of our specials a lot more clearly. The “Featured Products” section lets us get any product we want on to the home page, whether it’s on sale or new or we’re looking to blow it out.

We also took a step in the right direction aesthetically. As I mentioned a few weeks ago, we’re starting to integrate HTML5 and CSS3 into our sites, and this is the first real usage of it. CSS3 is especially helpful for a dynamic site like DI where the only way we can add a dropshadow to an image, as Mike did on the large product images, is using CSS. Previously we would have had to have a Photoshopped image on our server for each and every product. Now we can take the regular product image and just add the dropshadow, or a gradient or rounded edges or tilt it at an angle, without having to generate a new image. It really opens up the creative potential for a large dynamically driven site.

The only real downside of using newer technologies is that good old IE6 and IE7 have trouble displaying things. Our simple solution was to continue to show the old home page to those users, while showing the new home page to visitors using IE8, Firefox, Chrome, Opera, Safari, and the like.

We’re in the process of working through the entire site and improving things where we can. In my mind, there’s always room for improvement in terms of usability, site speed, and aesthetics. The Ask-a-Pro blog also received a face lift, but getting the blog to interact with our cart the way we want it is very much an ongoing process.

In general, design for a large e-commerce store is much more difficult than it looks. In addition to the aforementioned dynamic content constraints, it’s hard to stray too far from standards like having the product navigation on the left, search box on top, shopping cart in the upper-right, etc, without potentially hurting conversion rates. That’s why, for the most part, most e-commerce carts look relatively similar. Customers get used to buying things a certain way. I’d love to experiment with some really off the wall e-commerce carts that my mind has conceived, but for now we’ve got to stick with what we know our customers will buy on. There’s an interesting post on Get Elastic that touches upon this phenomenon a bit, but I’d love to see more attention drawn to it and more data to confirm what I just wrote.

Anyway, I think Mike did a great job on his side of things and that this is a big time step in the right direction. I’m really excited to see how this impacts conversion rate. I think our big sales, like the 20% off one going on now, will succeed even more because there’s a monster 600×380 banner right in your face as soon as you load the page.

As a project, this whole thing came together pretty quickly. Prior to leaving for China, Mike and I discussed it briefly. While he was gone I laid out the basic template and wrote all of the javascript. Once he was back, he spent the first few weeks of July working on the design, and we spent last week tying the whole thing together and testing everything. We like to work quickly like this. I think that’s one of the things that he and I do best when we work together. Once we’ve discussed the project, we tend to set an aggressive-but-realistic completion date, break the project into smaller milestone dates, and then get hammering. I can’t recall a time where either of us has missed one of these “deadlines”, which allows us to really rip through a project like this rapidly while still fulfilling our other day-to-day duties.