Work. Lixil — Sept 2014

For some reason, I love well designed household fixtures. Call it an appreciation for the finer aspects of civilisation. Lixil has been a maker and distrubutor of such products for decades, and I got to re-do their website.

Lixil, based in Singapore but with offices all around the world, invited the DAN team to pitch for their digital account. They were in need of a scalable, digital platform to showcase thousands of products and all their micro detail (believe me when I say there’s a lot) that was fresh, minimalistic and clean. Oh, and responsive (of course).

Wireframes

I hardly need to say it; the wireframing process of this project was by far the most intensive. We employed Axure for this project for it’s flexibility and speed.

What resulted was 10 sets of wireframes for various sections of the site and a total of 105 pages and hundreds of interactive elements, panels, lightboxes, contextural messages and whatever else you could think of.

homepage

The homepage I kept simple and clean, with enough of the brand colours to make it distinctly Lixil.

I wanted the design direction to take a very modern approach, as it was the best fit for the nature of the product; yet at the same time keeping it clean - to emphasis the product itself.

filtering

Because the number of products on the site was so extraordinary, I had to come up with an effective and usable filtering system, so the user could find products quickly and easily.

product pages

Architects and property developers usually have very specific requirements. They know what they want, and usually to the precise material and measurements.

This meant the detail pages had to tell the full story of the product, show all the relevant details, and be accessible enough to take information away.

flexible templates

Because of the vast array of products within the LIXIL collection – and also because of the sub-brands that would operate within the site structure – the product pages had to be assembled from individual sections and components.

long templates

Some templates were especially long, allowing a deep dive into the nitty-gritty specifics of each product. This was particularly important as developers and architects require as much information as possible.

tools and utilities

Because of the nature of the user – and also the nature and volume of the product itself – the site required some sophisticated searching tools, such as material and colour selection. This gave customers powerful tools to search out and collect at will.

a quick glance

Sometimes when browsing, you don’t want to be driven off to another product page full of documentation and features.

Sometimes you just want some basic information. I introduced a quick-view for this reason.

tablet and touch

Because developers and architects spend a lot of their time presenting and collaborating to clients, making this possible on touch devices was an integral part of the challenge

findable on mobile

Perhaps the most difficult task of all was squeezing what was an already lengthy navigation, and filtering tools, into a mobile navigation. Making them easy to use was the next challenge.

all the way down

The new site was designed for responsive from the beginning in spite of the obvious complexity of the content.

When designing large product driven sites such as this, there’s many tips and tricks for scability and ease of use in mobile. We employed just about all of them.

If you want to get in touch, say something nice or send me abuse, I welcome everything. Contact me.