Following a successful redesign in 2010 it was time to bring Distinctive Chesterfields (DC) up to date with a brand new, and responsive, website.

Launching a new responsive website isn’t news in itself. Many new websites launched today are responsive, and almost all (if not all) sites created by Bronco are too. But on this occasion the driving force behind the client commissioning a new website was to optimise it for a range of screens and devices.

Not exactly new

When we say a new website, that’s not exactly true. While the design and much of the front end code is brand new the website still resides on the same e-commerce platform that has been the backbone of the website since it first launched.

Over the years this system has been enhanced and updated. But this time these updates were fairly minimal with focus given to the look and feel of the site as well as making improvements to usability.

Complex Products

To design and build a responsive website does take more time than a traditional fixed layout site simply because you must try to optimise the content for both small and large screens.

For small brochure sites this process isn’t all that complicated as often the pages have less happening. But for an e-commerce website or application the number of features available can make the process more challenging as each feature fights for increasingly limited screen real-estate. Distinctive Chesterfields is one such instance where the complexity of its products could really harm the user experience if not properly considered.

The bulk of the products available on the website are leather sofas built and sold by the company themselves. This allows them to offer a single product in a wide variety of colours and with many optional extras so that the Belchamp sofa has a staggering 75,000 different combinations for the user to choose from.

It would be simple to hide the options behind multiple select boxes but for DC many of the options require imagery or additional text to make it clear to the user what they’re selecting. It was our challenge to present all these options in a way that was as uniform as possible so users weren’t learning different navigation styles as they continued through the options, but flexible enough to accommodate the unique requirements needed by other options.

distinctive-chesterfields--product-options

 

Our approach to this, including a staged progression through the available options ensures that we’re not overwhelming the user with all the options appearing on screen at once. A sticky sidebar (on desktop) then solves the issue of the user no longer being able to quickly assess the different options they’ve selected as they progress towards buying the product.

A friendlier look

The previous iteration of the website used a healthy dose of skeuomorphism in a predominantly black and grey colour scheme. The client wanted to shed some of the more classic styling and present a friendlier image; providing examples of what they liked.

In the design presented we looked to achieve the clients goals yet had to balance some of the quirkiness present in their examples to maintain visual consistency with their logo. The logo was remaining unchanged and their product line, of which the bulk remains Chesterfield Sofas, are a high priced item so it was necessary to provide a design that is sympathetic to these two things.

The design for the new website took on a clean white look with teal, yellow and purple highlights throughout. While the leather backgrounds of the last design have been removed the dashed borders representing sewn seams remain as a subtle visual clue both to the products they sell and back to the previous design.

distinctive-chesterfields--home

The leading factor for this and the last redesign has been the product imagery. With high value products it’s important that the client include high quality imagery where users can really see the finer details. With a new showroom opening in London a number of new products have adopted a new style studio setting that makes the product imagery look even better than before. All we had to do is make sure the design was good enough to get out of the way and let the product image make the hard sell.

Launch

Now the site is launched we’re very happy with what is the third iteration of Distinctive Chesterfields we’ve worked on. But more importantly the site is performing well and client is happy and are looking at how to further optimise the experience for their users.