Color house website design and build case study

Like most organisations, we had a good idea of what we thought we wanted from a web site. The team at Distilled - from concept to design to functionality - were very skilled at helping us develop our thoughts to what was actually needed. As a result we have got a site of which we are rightly very proud. When we embarked on this project we thought we would develop a project plan and stick to it. Reality and events got substantially in the way and we really appreciated the way Distilled were flexible and accommodating to our changing priorities. Mike Ford Managing Director Colorhouse

Colorhouse is a product website that sells Tiffany-style lighting on-line. As well as looking at the final website, this case study will review the design process Distilled undertakes for its web-design clients using Colorhouse as an example.

The project started with a meeting between Leonie, our in-house web designer, and Colorhouse, where the requirements for the website were discussed. Based on this meeting and any other criteria or ideas provided by the company, Leonie produced two initial homepage designs.

IDEA ONE

This website has a handy breadcrumb trail useful for navigation through the pages of the website. The page layout is split in half, with the various selling factors (Seasonal Offers, Handmade, Discontinued Items etc) clearly highlighted in colour-coded boxes. A subtle transparent layer has been used to add detail to each of these categories without detracting from the quality of the image.

IDEA TWO

This website is much more sophisticated as it refrains from any intrusive marketing and has a much 'cleaner' design. This version represents Leonie's interpretation of Colorhouse's request for the quality of their products to be highlighted over anything else. The design of the website really focuses on bringing out the detail of this quality, moving all other page paraphernalia to the background.

Colorhouse chose the second design (wisely, in our opinion!) With this decision reached, the inner pages of the website were designed in the same style.

THE FINISHED WEBSITE

The purpose of this website is to sell products. Therefore, it is important that the quality and range of the lamps, their value for money and the means by which they can be purchased are all obvious features of the website. To this end, there are four distinct page templates: the home page, the product page, the single item page and the checkout page.

Homepage: The first thing that stands out on the homepage of the Colorhouse website is the detail of the glass. This is not accidental- the page is designed specifically to draw attention to the quality of the product.

Beyond this, the page acts as a well-ordered starting point for the customer:

• The range of lamps available are clearly placed in the top menu bar. This bar inverts when rolled over, making it easy to ascertain which section is selected.
• The infographics across the bottom of the page point to other necessary pages on the website. The design and positioning of these icons differentiates these categories from the product categories above.

Once the customer has selected an inner page, navigation is easy through the breadcrumb system.

Product pages: These pages clearly show the range of lamps on offer. The catalogue style is clear-cut and simply states the price of the item, purposefully avoiding any 'spammy' style of promotion. Once again, the quality of the products is emphasised over anything else.

Single pages: Once a product is selected, the customer is taken to a single-product page where the 'sales-pitch' becomes more obvious. As well as a clear image of the chosen product, more information, such as the dimensions of the lamp, are presented on the page.

It is worth noting the 'call-to-action' buttons that feature prominently on this page. They are used throughout the site to guide the customer towards the actual purchase of their chosen product. They also offer timely opportunities for the customer to add things to their order.

Check-out page: This is a fairly self-explanatory page. Any information that might be required by the customer is presented as clearly as possible. Any options that have been chosen so far, such as the type or number of product, are easily editable right up until this final stage of purchase. Paypal is used as a low-cost and easy-to-use payment processing system.

Colorhouse wanted to make sure clients could contact them easily both online and via the telephone, so these contact details are designed in bold in the top banner of every page on the website.