Home | About Chris Hope | Contact Chris Hope | Search:

Just Kids Website - new website launched August 5th 2008

Posted August 7th, 2008 in Case Studies

After a considerable amount of work we finally re-launched the JK Kids Gear website (Australian version here) on August 5th 2008. The design was by Ogilvy Metro and proved to be a challenge to implement but the end result looks great and we've had plenty of compliments about it already.

I posted about the JK Kids Gear website previously, looking at some of the issues we needed to address with the new version of the website. I decided it would be easier to simply rebuild the front end of the website from scratch and did so using the PHP Zend Framework, the jQuery Javascript library and the existing MySQL database backend, although we revised a significant number of tables in the database to make things work better.

A screenshot of the homepage is below. This shows a far improved design from the old version of the website with consistant navigation across the top of the page and in the page footer. The "ribbon" contains information about how many items are in the shopping bag and the current dollar value. On non-landing pages, the ribbon stretches to the full height of the window so the links on it always appear at the bottom of the screen (you can see this in further screenshots below). As the user scrolls down the page it moves with the height of the page.

The second screenshot below shows the navigation as the user mouses over the top navigation. From anywhere in the website a user can get to any of the main categories directly using this navigation.

The third screenshot below shows a category product list page. We changed the layout of this page to show the swatch images so the user can see what colours are available for a particular kids clothing item. Previously in the existing website they would have to click through to another page before they could see the other colour options available.

After clicking a product or swatch an inline popup window appears and the background of the page is slightly greyed out. The popup makes an AJAX call to get the product information and can be closed by either clicking the "Close" button, the "X" in the top right, pressing the escape key or clicking outside the product window area.

When the user clicks a different swatch colour the appropriate image replaces the existing product image and changes the sizes to show which are actually available for the different colour. Clicking the "Add to Shopping" bag link executes an AJAX function which adds the item to the shopping bag without having to reload the page, and the information in the ribbon is updated to reflect the new value in the bag.

When the user has finished looking at this item they can then either use the previous/next item links to move through the items in the category page, or close it and then click another item to bring it up, all without having to leave the actual page. This will save them a lot of time when looking at multiple products.

I suggest you take a look at the JK Kids Gear website yourself to try out some of the functionality, and if you are a New Zealand or Australian shopper with children go and buy some of this excellent children's clothing. My own son wears a lot of JK kids clothing.