Developing an Interactive Product Demo and Customer Journey Platform

Interactive product demos, built as a platform

We've built a SaaS solution that enables businesses to build interactive product demos and guided customer experiences for their sales & marketing people. Companies can create self-service demo journeys for prospects to explore products at their own speed, in addition to live product demonstrations.

The platform allows teams to build their own walkthroughs, product flows, and guided experiences, and gain insight into how the user interacted throughout the experience. It also offers analytics and feedback mechanisms that help businesses understand customer interest, identify high-intent leads, and fine-tune their sales strategy.

The objective was to reduce the sales cycle, qualify their leads, and provide prospects with an interactive means of exploring products prior to contacting a salesperson.

Node-based journeys that branch any way sales needs

The challenge was to create a node-based system that would support the highly customizable demo flows and branching customer journey. Businesses required flexibility in forming various paths depending on the actions of users, and required an intuitive and easy-to-manage editor.

One of the other challenges was to create a database design that would allow for dynamic interactions, events, configurations, and user engagement data to be stored without needing to constantly modify the schema due to the addition of new demo experience.

Dealing with large media assets like screenshots, videos, and product visuals also posed some performance issues. In some interactive demos, media handling proved to be a key and time-consuming problem, which would affect the load speed and user experience.

It was imperative to be responsive throughout the complex demo experiences. As the demos became more complex, the platform had to be able to render multiple nodes, assets, and interactions smoothly and without a slowdown in the application.

How we built it: React, Material UI, Node.js, and PostgreSQL

To provide a responsive and user-friendly experience for both demo creators and end users, we developed the front end with React and Material UI (MUI). A visual flow editor was created to make it easy to drag and drop to build demo journeys, so teams can create and manage complex customer journeys without technical knowledge.

We used Node.js/Express.js on the back-end to develop app logic, event processing, user activity tracking, and demo workflows. The main database used was PostgreSQL, and TypeORM was utilized to handle dynamic relationships with data and make managing the database easier.

We also introduced JSON-based structures with configurable options, enabling businesses to implement their own unique interactions, events, and branching workflows while maintaining flexibility in demo configurations without requiring significant changes to their databases.

Firebase Authentication: This has been added to ensure secure access and management of users and accounts. AWS S3 was utilized to store media such as images, videos, etc., which are large in size. Media optimization and compression workflows were put into practice before sending to the media to reduce storage space and loading time.

To keep the application performing smoothly even with the growing complexity of the demos and the amount of data, we also implemented lazy loading, optimized API calls, and efficient data retrieval mechanisms.

What we shipped: a drag-and-drop demo builder with analytics

We provided a fully-featured, interactive demo platform that enabled businesses to build a guided product experience, monitor customer engagement, and analyze prospect behavior in one centralized platform. It featured a visual flow builder, branching customer journeys, analytics tracking, media management, and secure user authentication.

The time needed to design and deploy interactive product experiences is greatly shortened due to the time-saving drag-and-drop demo builder. Teams could construct and tweak demo journeys from 40-50% faster during testing than when they were manually configured.

Optimizations to media and AWS S3 storage reduced the average asset load time by an estimated 30-40%, helping ensure users could continue to explore media-rich demos smoothly. Frontend responsiveness has been further enhanced, and data transfers have been optimized for complex interactions with the demo, while lazy loading has improved element loading.

The outcome: shorter sales cycles, sharper insights

The platform provided a more effective way for sales and marketing teams to promote their products using interactive and self-service experiences. Prospects could browse features independently, enabling businesses to create more certified leads prior to direct pitch interaction.

The solution's customizable demo journeys, engagement tracking, analytics, and scalable content management enabled businesses to gain insights into customer behavior and maximize conversion opportunities across the sales journey.

The project showcases Coding Crafts' proficiency in creating scalable SaaS solutions that feature dynamic workflow systems, interactive user experiences, cloud-based architecture, and performance-driven web apps, all optimized for growth.