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.
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](https://cdn.prod.website-files.com/64760069e93084646c9ee428/66855b5963ffa3518bcb57c4_mapping%20(1).webp)
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](https://cdn.prod.website-files.com/64760069e93084646c9ee428/668558ed7f60572046c0fc42_custom-js.webp)
- 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.
The results of this collaboration
Thanks to this new calculator, StreamNative now has a valuable marketing resource and a significant competitive advantage for their campaigns:
- Over 30% increase in conversion rate
- More qualified leads
- Better closing and time savings for sales teams
- A powerful tool for marketing teams
Here's a glimpse of the result in pictures.
![Bento of the various steps and overview of the results of the multi-step project estimation form](https://cdn.prod.website-files.com/64760069e93084646c9ee428/66855ab5175fd9847cd8a276_estimation-stream%20(1).webp)
"Thank you for all the work for the TCO calculator"
Amy KrishnamohanVP of Marketing at StreamNative.
Additional resources on Webflow and JS calculators :
- JavaScript guide: Creating a custom code calculator on Webflow [Blog tutorial]
- Introduction to JavaScript: How to program a calculator [Video Tutorial]
- Need experts for your project? Discover our Web support offers