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.
Project outline
Bottled vs tap water coolers
The water cooler section page starts with the choice between bottled & tap water coolers by differentiating on water taste and a consumption amount. I couldn't display prices because they depend on where you live, how much water you use, ...
The overview page has teasers to secondary content (why a water cooler, rent, buy or lease a water cooler, water cooler accessories, hot drinks) and has a few text blocks that are SEO optimized and play with the different targeted keyword variations.
Related links
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.
The bottled water cooler range
The main difference between the coolers was price, but we couldn't communicate that. So I focused on the looks & form and bottle compatibility (one can only use the 10L bottle).
All water coolers had the same versions: chilled & hot or chilled & room temperature. Only one had sparkling water.
Related links
The tap water cooler range
To make choice easy, the tap water coolers are ordered by their capacity to chill water. Different form factors were displayed and the coolers with sparkling water were marked as such.
All water coolers had the same versions: chilled & hot or chilled & room temperature.
Related links
The Sip-Well UVP on the product type pages
On the bottled water cooler page I focused on the different bottle options, the quality of Sip-Well crystal water and their delivery service.
On the tap water cooler page I focused on the quality of the 3M Cuno waterfilter and superior maintenance.
The pages also provide more information about the quality of the range of water coolers, their own designs, etc ...
Related links
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)
A quick attractive summary
The overview tab starts with a nice visual of the product and bullet points explaining the main benefits. A short specification list, quality labels, and bottle compatibility are placed here as well.
All the features & versions are then explained in detail with benefits.
At the bottom of the page, I highlight Sip-Well's UVP by mentioning the crystal water quality (or water filter), and their superior water deliver service (or maintenance)
Related links
Explaining the different buying options
The old website only mentioned these vaguely, but I found them important as they already differentiate Sip-Well from the competition.
I made clear what is, and what is not included in the price, and which services are optional.
The call to action of the most interesting applicable promotion is also embedded into the comparison table.
Related links
Turning specifications into benefits
Most of the competition had roughly the same water cooler range, but specification sheets were almost impossible to find. As Sip-Well also had 2 proprietary water coolers, we decided to have a detailed specification sheet for each product.
I wanted the visitors to imagine where to place the specific water cooler. I started the page with the water cooler dimensions & some placement tips. I also added those of the bottle rack, usually placed next to the cooler. In the detailed list I turned most of the detailed specifications into benefits.
Related links
