ClearView Water Interactive Product Diagram
The Brief
ClearView Water needed a good way to showcase their main product, the ION water cooler, on their website.
It's a neat machine with lots of features, which translate into lots of benefits for the customer who installs this system in their office. CVW's challenge was to point out all the cool things the ION system does, in a user-friendly fashion, without taking up a ton of space on the page.
Our Approach
We took the data points as provided by the client and constructed a custom tool that allows the CVW staff to create their own interactive diagram quickly and easily.
While the screenshot above shows an example of how the tool looks to the public, the real story here is the ease of implementation on the back end.
A few mouse clicks and keyboard taps are all it takes for CVW staff to build a rich, interactive presentation. Uploading the base product image creates a preview of how the image will appear on the front end. Adding a new data point creates a new input for the feature title and description.
At the same time it creates a new tooltip object, which can then be dragged to any point on the image.
Tooltips can also be deleted at will, with the preview panel updating in real time. If you accidentally delete a tooltip you wanted to keep, just reload the page without saving.
Changing the order of the tooltips is as simple as drag-and-drop. Again, the preview updates in real time as changes are made.
Once the administrator hits "Save," the data points and their positions update within the system. It's then a matter of inserting a single line of text on the page editor to include the diagram live on the website. No code required!
The image and all the data populate a pre-built framework, so CVW staff doesn't have to worry about any of the technical details to give the diagram a slick, professional feel.
The Results
This particular enhancement is part of our ongoing relationship with ClearView Water (6 years and counting - thanks guys!). Over the course of our involvement, the web site has gone from a stagnant entity to a vibrant lead-generating tool.
With the launch of the interactive product diagram, CVW has seen their online inquiries rise by a healthy margin. Because they have a phenomenal closing rate for incoming leads, that means they've seen a bunch more business!
Owner Rich Anderson had this to say:
It has been our pleasure to work with MWD Web since 2010. In that time they have completely redesigned our web site as well as completed numerous updates and revisions; most notably an interactive diagram of our lead product. This tool has helped drive additional leads to us and most importantly is used to demonstrate our unique offering to our new Customers; which has helped boost our already strong retention rates.
See the diagram live at:
http://www.clearviewwater.com/ion-water-cooler/inside-your-ion/
