Design evolution

Gareth    Planning    

I thought it might be interesting to write a post on how various elements of the Webtogs site have changed over time. In my previous post, I talked a little about our fist design ideas, and what, ultimately, was wrong with them.

When we first sat down and designed Webtogs, we added lot’s of features and tried to anticipate everything a potential shopper would need or might like to use. As the design has matured over time, we’ve actually taken away far more than we’ve added. We keep repeating the same old mantra ‘simple is good’.

Here’s a look at version 2 of Webtogs (click the image to see a full size one)…

I’ve marked some elements on the image, that i’d like to talk about a little.

Search Header

We liked the idea of providing a big and obvious search box on each page, really drawing attention to itself. We are using predictive search on Webtogs, rather like Google, so we figured this would be a nice and intuitive way to find product. The trade off here, however, is the loss of screen space to show products, offers, etc. Fairly shortly after coding this design, we removed the big search header from every page, except the home and landing pages. As the design shows, we also included space for various ‘up-sell’ links. Opinion is divided on these. From a retailers perspective, they can increase sales, but many online shoppers find them annoying.

Side Bar Widgets

This was a simple php function, that allowed us to define and deploy custom ‘widgets’ to the sidebar, beneath the main navigation box. In the end, we felt the information provided here was just as easy to find in the footer, and placing them on the sidebar added unnecessary clutter to the page, taking focus away from the products.

4 Across Grid

We like the idea of product thumbnails being larger than average. We experimented with 4 across, 5 across and 6 across views. This mock-up shows 4 across, but in the end, we felt the trade off between products per pixel and decent image size was too much for 4 across.

Footer

Every site needs one, but on this design, it looks lost and bit pasted onto the page. We’re doing a new, better (!) one, as I write.

Version 3, below, incorporating these changes…

As you can see, we’ve made several changes to the layout. Hopefully the new design is more open and product focused. The thin search bar (blue one) at the top of the page was the hardest of all the elements to agree on. It’s a great feature to have search on every page, in the same place, our only desire moving forwards is to make search more prominent on high traffic pages (i.e. home page, landing pages, etc).

Here’s a look at the journey we took with the left side-bar…

Version 1 & 2 are significantly different. For one thing, version 2 sees the addition of global gender navigation (as opposed to a category based system in the first design). We’ve also added navigation via brand, something our marketing research showed as critically important. Version 3 is really only a cosmetic overhaul, with the aim of opening up the site some more, and finally moving away from grey headers and boxes.

It’s interesting how one change has a knock on effect to other elements on the page. For ages we’d had 2 grey boxes at the very top of the page, one for help and the other for account log-in. This worked ok when the left bar had a grey top, but looked totally out of place with the version 3 design.

Again, a look at the journey we took with the account bar on top (the help link for the final version will be in the footer)…

The keenly observant amongst you will notice that version 3 provides for a photo of the customer. (That handsome devil shown is actually me!). This is another thing we talked about for some time. I’ve not seen many pure e-commerce sites that do this, but I think it’s something that will happen more and more as all aspects of the net become more socially orientated. Our main thinking here is based on reviews and comments, rather than simple account stuff, as it’s nice to post a review/ comment on a product with more of an identity (we think!). It will be very interesting to see how many users bother to upload an avatar.

If you enjoyed this article please consider sharing it!