Redesigning Velt's onboarding experience.


Tailoring onboarding for developers on different platforms (Webflow, Shopify, Framer.io) for a hassle-free installation process.


<

The brief — the intro & problem


Today, 99% of online tools are siloed and non-collaborative. Velt is an SDK that enables enterprise teams to collaborate (via comments, video, and audio) on any live product. We also have a subsidiary product called SuperFlow designed for agencies. A significant issue with SuperFlow was that only 10% of developers were able to get through the onboarding funnel, impacting user growth and MRR.

Of the developers who went through the onboarding funnel, only 10% got to the end.

Pinpointing & understanding drop-offs


Initially, I looked at Highlight.io user sessions, but encountered privacy restrictions that disabled me from observing developers paste code in a new tab. My next approach involved viewing the onboarding funnel on MixPanel to determine when the highest amount of drop offs occurred. We found that 70% of users dropped from the code installation page.



To understand why users were dropping, I cold-emailed participants who dropped from our code installation page. These are some of the synthesized interview insights:

1. Issues locating where to paste code

Developers can't efficiently locate where to paste the given code

2. Forgetting to save code

Without saving the code, the product won't appear.

3. Marketers are discovering our product, but are non-technical

Non-technical users discover our product but drop off due to code

How might we help developers and non-technical users implement the provided code?


As a team, we explored many exciting directions including integrations to bypass code installation, inviting a developer on your team to install, direct links to installation, a code documentation page, etc. Since there were many ideas in mind, we created an impact effort matrix to determine which features we’d work on.


Early sketches

I spent some time creating early sketches for a developer platform selection, inviting a developer to install, a direct link on the code installation page, and a troubleshooting page. On the code installation page we wanted to introduce help GIFs depending on developer platform selection.

Usability testing


Once I fleshed out enough content to turn wireframes into higher fidelity prototypes, we were ready to validate with developers. The main test focus was the code installation variations. We received positive reactions around larger scale improvements like the help tutorials, and the clear steps in option two. However, we found that users didn't know the underlined section was a link. I reiterated to use progressive disclosure and a button link to reduce cognitive load.

Option 1
Option 2

Prototyping


Platform selection page

This page allows developers who come from different platforms (Shopify, Webflow, etc), to select a platform that they'd like to install on. This way when they get to the code installation page all the content is tailored to the platform they've selected. We've strategically placed the cards by most used developer platforms.



Redesigned code installation page

We've created help GIFs depending on the platform they've selected. We've also enabled a way for developers to directly click on where they need to paste code, making it more efficient.



Troubleshooting page

If developers, still fail to install, the load state will time out and give them a troubleshooting screen with common errors.

The results — user and business impact


Through an iterative and tailored design approach, we were able to help developers efficiently install the code snippet to launch the collaboration toolbar on their project. This was a signifcant milestone, as we were able to increase onboarding completion by 50% and 2x revenue growth.