Freelance UX Design, E-Strategy, Templating

Sip-Well website - water coolers

Adding value to the water coolers

I created a detailed page for each water cooler with all the features and benefits, explained the different buying options, and made it easier to choose the most suited water cooler.

I also added pages explaining the general benefits of having a water cooler in the office / at home. Extra pages were added for their secondary products like water cooler accessories and hot drinks.

The new water cooler section was roughly 70% bigger then the old one.

Differentiating water coolers to simplify choice

The main element of both water cooler type pages is the water cooler selector. It gives a clear view on the product range, with the necessary details to choose the right water cooler. If you mouse over a water cooler you get to see the main features & versions.

The product selector was built with semantic HTML, worked with 1 big image sprite and was animated with JavaScript. The faked blur effects were obtained by layering images on top of each other and an opacity animation.

A detailed product page, split into 3 parts

Progressive page tabs

I made only one HTML page, keyword optimized, and the progressive tab system was animated with JavaScript. Direct linking to the tabs was possible (on all browsers)