A Bit of Background
Hi-Tec make footwear and apparel, most of which is sold through stores and online partners. They have their own online store as a further option in case people can’t find the styles they are looking for in their usual outlets. They also own the Magnum brand and they were looking to give the eshop a face-lift and create some differentiation between the two brands.
Re-Skin
The original aim was to simply re-skin the site with the most up-to-date brand image, however it turned out to be a bit more complicated than this because we actually need to create two sites out of the original eshop. The designers came up with some neat concepts for creating a different look and feel between the two sites while retaining the same structure and layout. The page peel in the top right is used to flip between the sites and different promotions can be added into the front page to create further distinction.
Two Sites
Previously, the whole eshop sat on www.hi-tecdirect.co.uk
Now, the same url structure works across
www.hi-tecdirect.co.uk/hi-tec/
and
www.hi-tecdirect.co.uk/magnum/
I used an .htaccess redirect to take this url segment and add it into the query string so effectively the scripts all see
www.hi-tecdirect.co.uk/index.php?hi-tec
To make sure that any seo strength or permalinks aren’t lost there are 301 redirects on all root addresses which go to /hi-tec/
The CMS
We aimed to change the CMS as little as possible because it is a legacy system and too much tinkering could cause more problems than it would solve. There was already limited support for multiple sites in the CMS so it was just a case of extending this and making it work correctly on the front end. This is a good example of how keeping the display layer separate to the control leads to rapid development.
Add Some Fun
I took to opportunity of a re-skin to add some fun new features in too. Javascript promotion scrollers and product filters on the home page, 360 degree Flash product explorers and more intelligent product zooms.
… Just One More Thing
The page peel in the top right is the most important part of the site because if drives traffic between the two brands. However, as I started to develop the site it because clear that there was no good way of getting the peel to position correctly on smaller screens (<1024px). The solution for this was to use a Javascript function to hide the peel at lower resolutions and introduce the orange tab to retain the functionality.
