@ LeadCrunch.ai
LeadCrunch.ai is a marketing technology startup that uses AI to facilitate more effective marketing strategies. Customers often asked how our AI approach differed from traditional marketing campaigns. To help tell the AI story and create an engaging order creation process, I designed and helped implement an interactive visualization based order form.
Although many companies run content syndication campaigns, LeadCrunch is differentiated by its use of AI targeting to focus outreach efforts. However, LeadCrunch had no unified visual explaining the benefits of AI to clients. They were often left with questions about our AI process. At the same time, the existing online order form was a rather uninteresting experience that rarely got used. We identified an opportunity to differentiate ourselves by visualizing our AI and giving customers a memorable first experience with LeadCrunch.
The first step of the design process was to gather an understanding of what story we were trying to tell, and what information we needed to collect from clients. I worked with the data science and marketing teams at LeadCrunch to storyboard out this process. To help visualize and articulate the experience, I created low fidelity mockups of the experience we were discussing. One thing was clear - the visualization we used needed to set us apart in our customer’s minds. A simple bar graph showing the benefit of AI was not going to cut it.
In the design we came up with, as the user entered their order information a chart representing would update and change in real time. We then could overlay information about how our AI could help narrow or expand their selection. I then conducted rapid testing sessions with users using these mockups and incorporated their feedback into the next round of designs.
In the next iteration of the designs, I adjusted the visualization to start with a layout more familiar to users. Rather than jumping right into the AI driven data projection, it began by showing clusters for industries and a distribution for headcount information. These visualizations dynamically transform as the user scrolled through the experience. When the user uploaded their AI customers we would superimpose a heat map based on company similarity onto the visualization. This helped bridge the gap between the familiar and the novel in the user’s minds.
Subsequent user testing confirmed that we were heading in the right direction. - the new visualization was more easily understood by users.
When reviewing the preliminary designs with the engineering team, there was uncertainty about whether the visualization strategy could be implemented as designed. We were close to abandoning the innovative visualization and just reverting to a less interesting bar chart or other basic visualization. However, this risked undermining the integrity of the designs. If users didn’t have a captivating visual experience, they would be less likely to complete the form. The objective of telling the AI story and creating a memorable experience would be missed.
To help keep the feature on track, I set up a proof of concept of the visualization principle using D3 and some placeholder data. It used a force based simulation to dynamically arrange data points. By changing the forces applied, the arrangement could smoothly transition between different states. Although rough, this proved that the visualization was feasible.
As I was creating the final version of the designs, the data science team brought up a new technical limitation that we would need to work around. Although earlier in the process they had thought it would be possible to generate an AI-proximity heat map effect in real time, technical limitations meant that we would not be able to do so in practice. Instead we decided to use some pre-baked examples of the effects of AI to help tell the story to clients.
To generate a realistic demo of the impact of AI, I used a data set that we had created called the “topic map.” This data set created a simple representation of the B2B market by projecting high dimensional data about companies into a 2-d plane. I wrote a K-Means clustering algorithm in python to turn the full detailed data set into one that could work with the dynamic visualization. Each cluster came to represent the approximate “location” of ~3000 companies. I then worked with the data science team to create two examples illustrating how the AI benefited marketing by expanding or focusing targeting efforts, which we displayed with a heatmap effect.
After creating the final designs, I led a small team of engineers to create the final visualization effect. Many of the details of the visualization were dependent on the specific data that got loaded and parameters that were used in the code. So I worked closely with them to dial the behavior of the visualization in. The result was a smooth and visually appealing display of complex data that reacted dynamically to user input. Follow up user testing confirmed that users were engaged by the experience.
This experience became the first touch point for many new clients in their journey towards working with LeadCrunch. It became heavily utilized by the sales team as a way of collecting information from prospective clients generating hundreds of thousands of dollars in leads. For the first time LeadCrunch had a distinctive way of telling the AI story, which helped our brand stand out. Over time this visualization became a core part of LeadCrunch’s design language and is featured as a major design element on the LeadCrunch homepage.