Superflow Onboarding

Superflow Onboarding

Superflow is a feedback tool for agencies, allowing them to receive clear and context-specific feedback from clients on websites and assets. Simply onboard by installing a code snippet on the client's website.

Superflow is a feedback tool for agencies, allowing them to receive clear and context-specific feedback from clients on websites and assets. Simply onboard by installing a code snippet on the client's website.

My Role

Lead Designer — Gap Analysis, Research, User Flows, Interaction Design, Visual Design, Prototyping, Testing, Iteration

Lead Designer — Gap Analysis, Research, User Flows, Interaction Design, Visual Design, Prototyping, Testing, Iteration

Team

Timeline & Status

6 Weeks, Live

6 Weeks, Live

Context & Problem

Superflow, a Velt (YC 22) sub-brand, enables collaboration features on websites and web apps, specifically targeting agencies that serve multiple clients to expedite project delivery.

Superflow, a Velt (YC 22) sub-brand, enables collaboration features on websites and web apps, specifically targeting agencies that serve multiple clients to expedite project delivery.

Superflow encountered challenges converting customers at the top of the funnel, with conversion rates at 3-4% for the old onboarding flow and a notable drop-off on the first two screens. Furthermore, we noticed that even users who successfully installed the product did not transition to paid plans after their trials.

Superflow encountered challenges converting customers at the top of the funnel, with conversion rates at 3-4% for the old onboarding flow and a notable drop-off on the first two screens. Furthermore, we noticed that even users who successfully installed the product did not transition to paid plans after their trials.

Solution

We implemented a two-phase onboarding strategy. In Phase 1, users were guided to the right flow out of 20+ options based on Code Literacy, Platforms, and Plugins. Phase 2 concentrated on educating users for optimal paid conversions.

Business Impact

10X

Install Conversions

Install Conversions

6X

MRR in 90 days

MRR in 90 days

50%

Completed Phase 2

PHASE 1 HIGHLIGHTS

Enabling thousands of agencies and freelancers to install Superflow in the swiftest way possible.

Enabling thousands of agencies and freelancers to install Superflow in the swiftest way possible.

User Flow- Forking+Plugins

User Flow- Forking+Plugins

We decided to branch the onboarding into 2 flows, a direct approach for developers and a more handheld approach for no-code users. We
also launched plugins for webflow, wordpress and GTM to expedite the install process

PIVOT

We merged the platform selection and path selection screens due to dropoffs observed in user tests caused by the inclusion of an extra screen solely for path selection.

We merged the platform selection and path selection screens due to dropoffs observed in user tests caused by the inclusion of an extra screen solely for path selection.

Direct flow from Code selection: For Developers

Direct flow from Code selection: For Developers

Copy the code paste it into your terminal and deploy, you would directly be taken to the verification step.

Copy the code paste it into your terminal and deploy, you would directly be taken to the verification step.

Handheld flow for no code users

Handheld flow for no code users

Select your platform and start, select the flow and follow the guided process

Select your platform and start, select the flow and follow the guided process

Plugin is detected after URL Step

Plugin is detected after URL Step

When a supported platform is detected on the URL, we replace the code block with the recommended platform to prioritize it.

When a supported platform is detected on the URL, we replace the code block with the recommended platform to prioritize it.

Guiding users during installation errors

Guiding users during installation errors

Guiding users during installation errors

Offering users with a clear set of instructions + multiple ways to troubleshoot the problem based on the error itself.

Offering users with a clear set of instructions + multiple ways to troubleshoot the problem based on the error itself.

PHASE 2 HIGHLIGHTS

Discovery and Education of the platform is equally as important to optimize for paid conversions

Discovery and Education of the platform is equally as important to optimize for paid conversions

Analytics for Paid Conversions

Analytics for Paid Conversions

Core Insight after analyzing data from 500+ customers (Shoutout to Ben)

Core Insight after analyzing data from 500+ customers (Shoutout to Ben)

Adding Steps to Post-Install

Adding Steps to Post-Install

Including adding a comment and adding users as part of the onboarding itself helped people complete the steps in one go
(Goal Gradient Effect)

Checklist as a Nudge

Checklist as a Nudge

A Checklist is introduced to keep a check on user progress, This is implemented both in the portal as well as the website itself

Impact

The project was launched in a phased approach and improved the install conversions to 30% from 3%, It also improved the paid conversions by around 12X after implementing both phases of onboarding

The project was launched in a phased approach and improved the install conversions to 30% from 3%, It also improved the paid conversions by around 12X after implementing both phases of onboarding

Since this is one of the most important/complex projects for achieving higher MRR, The project required tight knit collaboration of Developers, PMs and Design resulting to a shared understanding of dev & design constraints + prioritization.

Since this is one of the most important/complex projects for achieving higher MRR, The project required tight knit collaboration of Developers, PMs and Design resulting to a shared understanding of dev & design constraints + prioritization.

Learnings & Reflections

  • Developed a framework for dissecting onboarding to aid developer understanding.

  • Learnt about the code system design and component library from developers

  • Setting constraints and priorities was crucial for the project's size.

  • Applied contextual design based on the Jobs-to-be-done framework.