Christopher Wharton Goldsmith
Christopher Wharton is a high end jeweller, based in St Albans. They had an established identity expressed in their existing marketing materials, including a sleek brochure site. They now wanted to add an e-commerce site to their portfolio, selling their own products, and a select few other brands.
Wharton's marketing manager Rod knew his brand inside-out, and spends much of his time commissioning high-end design work. He and I worked closely together throughout the project, and had a lot of fun looking through both Wharton's and their competitors' materials, discussing photo shoots and product shots, and working out the details of the design. He was keen that the new e-commerce site should have a look that complemented rather than copied their existing brochure site.
We discussed many options for the new site. Rod was keen that it should retain some of the interactive, experiential feel of the brochure site, which was flash based, with slick transitions and other animations. My FL1 colleagues and I felt that for a large e-commerce site the greater accessibility and usability of html were important. In the end we met halfway; the bulk of the page is coded in plain html, but a mixture of flash and javascript are used to create a few visual effects. The front page uses flash for a slow and gentle slideshow of model and product shots, and for a cycling news ticker at the bottom of the page. The site is based around a fixed-height window, but the styling on the internal scrollbars is just javascript over html; they have the same functionality as standard scrolbars, and degrade well.
Balancing the look of a brochure site with the functionality of an e-commerce site made this a challenging project, but the sheer quality of the materials we were working with also made the design side of things a joy. Rod presented me with a portable hard-drive packed with gorgeous lifestyle shots, proofs from old brochures, and product shots of the highest quality, and I was like a kid in a candy store playing with them! Wanting to make the most of them, I scattered product shots throughout the site, using close-ups for background images on even the normally-dull pages like Delivery and Terms. Being background-images, they don't slow down the loading of the content on those pages even on slow connections; and they're a real feast for the eyes.
I also worked very closely with a flash scripter during this project. Obviously it's important that it's easy for Wharton to update all the images on the site as they develop new collections. For this reason, all the images are stored outside the flash, and the flash files are attached to xml which tell it where to find them. This makes it possible to change any image in the slideshows just by editing the xml. The xml for the product lists is written from a database which Wharton update using their own product-tracking software. Even the images for things like the slider bar and button are stored independently of the flash files, and so can be easily changed if the site's colour scheme needs to be changed.
My involvement
This project was undertaken during my time at FL1 Solutions. I acted as project manager for the design stage, liasing with Wharton's marketing manager, our flash designer, and the development team. I designed the site (the logo was pre-existing) and built the wireframes. For the flash, I designed the pages and created the necessary images, then passed them to the flash designer to be animated. The project was in the last stages of development when I left FL1, and a few small changes have been made to the site since: for example, the 'Wharton Products' category page has a new design, and the layout of the product page has been altered slightly.
Screenshots:
