Improve the conversion rate of your Webflow site by 30% with a calculator

StreamNative's marketing teams were able to increase the conversion rate of their latest marketing campaign by over 30% by adding a dynamic simulator. Find out more about our collaboration and the project.

Key points to remember

It's no secret in 2024: a company's website is an essential pillar of its marketing strategy. But having a site isn't enough. You then have to get prospects to visit it, via various levers - e.g. mailing, social networks, SEO, SEA, etc.-, and then convert prospects into leads (and potentially, then, into customers).

The conversion rate, a strategic challenge

The conversion rate is a metric used to measure the percentage of visitors to a website who carry out the desired action. For example, requesting a quote. In 2023, the average conversion rate for websites worldwide will be between 2.35% and 3%.

And there are many ways to improve this rate:

Optimize user experience (UX ): simplify navigation on your site and ensure that all important information is easily accessible.
Improved content and calls to action (CTAs ): write clear, engaging content that responds to your visitors' needs and questions, and place highly visible, incentivizing CTAs in strategic locations on your pages.
Optimize loading times: make sure your site loads quickly to reduce bounce rates. Use tools like Google PageSpeed Insights to identify areas for improvement.
Personalization and segmentation: use personalization tools to tailor content and offers to your audience segments.

We worked with StreamNative's teams to increase the conversion rate of their latest marketing campaign by over 30%.

Who is StreamNative?

StreamNative is an Apache Pulsar-based messaging and streaming platform designed for cloud-native and event-driven applications. Founded in 2019 by the original creators of Apache Pulsar, StreamNative offers managed Pulsar services, flexible deployment options and expert support. They are key contributors to the Apache Pulsar open-source project and aim to transform enterprise capabilities by unifying data for real-time insights.

StreamNative and Digidop, a long-standing partnership

After a first collaboration in 2022 on the total redesign of their website and migration to Webflow, we continue to support StreamNative on occasional webdesign and Webflow development assignments. Among these missions, we worked with their data and marketing teams on the design and development of a landing page offering precise, quantified estimates to their prospects.

How we designed and developed a calculator

As with each of our projects, we began with discussions with the customer teams. The objectives were to :

Understand the needs of StreamNative teams.
Evaluate our ability to propose a suitable and feasible solution.
Validate a roadmap for the project.

Why develop a price calculator?

StreamNative's initial pricing page was not representative of the solution's true cost, which posed several challenges:‍

‍Problems withthe complex multivariate pricing model: it was essential to provide accurate, customized estimates.‍
Deployment of a Lead Magnet for marketing teams: attracting and capturing prospects' interest with an interactive tool.‍
Faster closing for sales teams: by sending precise information on customer needs and price calculations.

Development process

To achieve these goals, we followed a multi-stage development process using FigJam, Figma, Webflow and JavaScript.

Conceptualization of a JavaScript calculator project — Overview of the first stages of the project on FigJam and Figma

1. Price Model Analysis

On the basis of several Excel spreadsheets provided by the product team, we began to analyze StreamNative's pricing model, identifying variables, data types, units of measurement, etc., as well as the pricing model itself.

2. User path definition

We then defined a user path, including :

Multi-step form
Fields to include depending on the type of data to be collected
Variables and possible paths according to responses

3. Data structuring

Data structuring was essential for :

Collecting data at every stage
Intermediate calculations
Validate mandatory and optional fields

4. UX & UI design

We worked on the UX & UI design using FigJam and Figma to prototype concepts and validate parameters with the StreamNative team.

5. Front-End development

We used Webflow to develop the front-end interface, aligned with the designs created on Figma, guaranteeing a fast site with sub-second loading times thanks to Webflow hosting and clean source code.

6. JavaScript integration

JavaScript code has been integrated to make the calculator interactive and dynamic, enabling real-time estimates.

7. API connection to CRM

Once the calculator was created, we established API connections between Webflow and their CRM(Hubspot), enabling :

Bringing all data up to date
Create a new qualified lead with BAT for sales teams
Trackcampaign effectiveness for the marketing team

8. Test phase

Finally, in-depth tests were carried out on :

Analyze user behavior in real-life situations
Ensure that the calculator works properly and that estimates are accurate
Ensure that data is fed back into the CRM system

Why did we use Webflow?

Webflow interface with custom JavaScript code integration

Flexibility in front-end development: Webflow enables us to precisely develop all the UX/UI behaviors validated on the Figma concept part.
Easy integration of JavaScript code: Webflow makes it easy to integrate custom JavaScript code, essential for adding interactive and dynamic features like our calculator.
Easy landing page copywriting for marketing teams: marketing teams can easily modify landing page content thanks to Webflow's intuitive interface, without requiring advanced technical skills or the help of our developers.
Solution combined with their showcase site: using Webflow enables the calculator to be integrated with their existing showcase site, ensuring a seamless user experience.