Die Mobiliar got a new calculation form for customers. This generic implementation on Drupal 8, can be re-used for a lot more than only premium calculators.
Case descriptionIn Spring 2020, our long-term customer die Mobiliar released a new product: A stand-alone insurance for bicycles. We are huge fans of bicycles and Drupal. To promote the new product, Mobiliar wanted to offer its customers an online prime calculator. Easy to use and a fast way to take an insurance right away. The tool should enable potential customers to calculate their personal prime number and then request a quote or take out the insurance directly. At the same time, bicycle retailers should have the possibility to request quotes for their customers. As further stand-alone insurances are planned, a replicable prime calculator solution was needed.
Case goals and resultsAlthough the premium calculator superficially looks like a form, there is a lot more going on in the background. There are countless permutations to be taken into account in the calculation: the number of people whose bicycles are being insured, their ages, the combined total of the sum insured and the excess – and whether to include cover for the theft of bicycles from in front of the restaurant where the client of Mobiliar just treated themselves to a Quattro Stagioni pizza. Mobiliar also wanted to make the calculator look attractive, rather than just being another boring, standard cookie-cutter form. That is why, the results need to look ultra-simple, even though there is a lot going on under the hood. The primary goal was to build a prime calculator that meets the user experience requirements as defined by Mobiliar and can be reused for further prime calculators in the future. For the calculator form we took the web form module for Drupal 8, which enables powerful forms to be built without the need for any technical expertise and pimped it with additional custom components. However, to ensure a perfect user experience on the website, instead of the normal Drupal front end, we needed to build a module that offers a Vue.js handler for the web forms. This enabled us to combine the endless possibilities of web forms with a state-of-the-art front end. With this solution we were able to configure a standard web form while having a vue.js app in the frontend that covers most of the web form functionalities. Thanks to this combination we could profit from the benefits provided by Drupal web forms while having a state-of-the-art frontend. This in turn, allowed us to have total control over what the user sees. With this solution we created something simple that can be easily replicable in the future while still providing excellent user experience. And Mobiliar can keep using the web forms that they are already familiar with, and create new versions of the calculator without needing any programming skills – for A/B testing, for example, or to make a calculator for bicycle retailers. And if they ever need to create a new calculator for one of their other products, we can reuse the same framework and save a whole load of money.
ChallengesAlthough the premium calculator superficially looks like a form, there is a lot more going on in the background. First, the calculation is based on various different criteria like age or insured sum, and their entry had to be easy and quick. Thus, the form fields had to meet the latest user experience standards. Furthermore, the layout was based on different styles. Unfortunately those styles haven’t been aligned to the website and the slightly different user journey for each targeted audience had to be respected too. Last but not least, we were aiming for a solution that can be reused for other calculators. Long story short, we needed a simple technical solution while still being able to completely steer what the user needs and uses. Thanks to the prototyping at the beginning of the project and the iterative process that followed, we have managed to develop a thoroughly impressive application, despite the requirements not being 100% clear initially. As it is an extremely generic implementation, meaning Mobiliar can re-use the solution to create additional premium calculators for other products, or even some less complicated forms.
Community contributionsPatches for Webform REST: https://www.drupal.org/project/webform_rest/issues/3109250