Xylem Calculator

The Client

While Xylem Inc., a leading global water technology provider, has been developing the world’s first wastewater pumping system with an integrated intelligence, Speed and Func on among with the team of designers, SparkDSG, were working together for almost a year to prepare the web presence of the new system and deliver the most modern online experience for the new technology.

The Phases of Online Presence

  1. The pre‐launch website announcing the new technology and the counter to the IFAT 2016 trade show where Flygt Concertor, the new system, was announced. Addi onally, new email templates were developed for Xylem to keep up with the overall style experience.
  2. The pre‐launch website was automa cally switched to the launch website once the system was announced on the IFAT trade show. The launch version presented Flygt Concertor, its feature overview and later got extended with technical details on system types and a quiz helping to choose the right system. The websites were presented in 10 languages and integrated into a powerful marke ng system ‐ Marketo.
  3. Life Cycle Cost Calculator, which calculated total life me cost to purchase, install, operate, maintain and dispose of the chosen system and compared the results to the conven onal system. Calcula ons were based on the industry standard formula and took into account 20+ input factors.

A Beautiful Marriage of Design and Functionality

Pre‐Launch Page

CHECK IT OUT: http://xylem.prettyclear.com/xyl071‐microsite/prelaunch/html/pre‐launch.html

Pre‐Launch Page
Sign Up Form


The pre‐launch website launched the anima on showing the intelligent pump and countdown to the Munich conference appearing after that. It was a visually appealing experience that was supposed to bring an attention and interest to the new pump. To make it work smoothly, we used clean CSS3 anima on without JavaScript to make it work faster and to reduce the browser loading.

As most of the graphic produced for the launch website was designed to be included in a modal/pop‐up slider, we faced the challenge of making the slider work seamlessly on a big amount of devices. Additonally, images from the slider had to be zoomable on mobile devices, and the slider had to play videos with the multilanguage subtitles. As a solution we have developed a custom slider to fulfil all the requirements and device support. We used JW Player for displaying videos with multilanguage subtitles within the custom modal slider and PinchZoom.js for the mobile zooming.

The functional layouts were deployed to the marketing platform Marketo that the client uses for evaluation and analysis of the digital data and contact form entries. That was our first experience working with Marketo and we were happy to get the new technology skill to support the client along the en re development cycle.

Launched Website (Integrated to Marketo)

CHECK IT OUT: http://info.xyleminc.com/flygt‐concertor‐uk‐english.html

Launched Website (Integrated to Marketo)

Savings Calculator

CHECK IT OUT: http://info.xyleminc.com/flygt‐concertor‐uk‐english.html#savings‐calculator

Savings Calculator
Flygt Concertor


With the appearance of new pump systems, the customers should have been able to understand the benefits of switching to one of the system. The Calculator developed for this purpose that is relied on 20+ customer input values, some general assump ons and industry standard formula, produces a table with compared expenses and graphs demonstra ng costs and  me to break even. The development experience turned out to be challenging from both mathema cal and tes ng points of view. We were provided with the Excel document consis ng of different sheets and thousand internal calcula ons in them. After understanding the logic and connec ons behind the formulas, we have produced dozens of Google spreadsheets for collabora onal advantages. They contained different kind of input values which helped us check the correctness of the results and come up with validation rules.

Sample of Mobile Views