I lead the redesign for Velt's Onboarding - an SDK (software development kit) that enables teams to collaborate via comments, video, and audio on any live product.

Initially, we designed a generic onboarding process tailored for developers using Webflow. As the product scaled and attracted developers who used diverse website builders, onboarding completion rates dropped.

MixPanel data revealed the highest drop-offs occurred on the code installation page. I followed up using Highlight.io to determine why.

Issues locating where to paste code
Our developers come from various platforms like Webflow, Shopify, Framer.io, etc. Even with their technical expertise, it's time consuming navigating through settings to find the custom code section.

Forgetting to save code
After pasting the code into the custom code section, some developers forget to save, which prevents the product from appearing.

Lack of technical knowledge
Sales teams who discover the product lack the technical knowledge needed to install the product. This lack of understanding hinders their ability to evaluate the product and demonstrate its value to decision-makers.

Before starting the design process, we mapped out the needs of each user segment. For instance, developers require a quick way to install code, while sales teams need to explore the product before recommending it to higher-ups. Based on our synthesized pain points and needs, we brainstormed several solutions, including integrations to simplify code installation, linking to a website after copying the provided code, creating a code documentation page, and inviting a developer for installation. We ultimately focused on inviting a developer to install and linking a website after code copying. I then created a user flow tailored to these two segments and identified where it would fit within the overall experience.

"As a developer, I want a straightforward installation process that minimizes setup time and complexity."

The onboarding process is customized for developers using various platforms, including Webflow, Shopify, and Framer.io. On the code installation page, developers receive a link directing them to the appropriate location for pasting the code. If not installed correctly, a troubleshooting page will appear to assist them.

"As an account executive, I want a straightforward process for trying out or setting up the product, with minimal technical barriers."

Non-technical teams who discover the product can now invite a developer from their team to handle the installation. They can accomplish this by sending an email to the developer, which includes the instructions and access details to complete the setup.