Typeform integrations

Typeform is a web-based service that allows users to create surveys and forms with high completion rates, leading to better and more results.

Typeform results can be automatically sent to other services through integrations. For example, users can send data directly to Google Sheets, notify a Slack channel when a Typeform receives a new response, or add new contacts to Mailchimp.

I was a member of the integrations team at Typeform, which consisted of a product manager, two frontend engineers, three backend engineers, and myself.

Typeform's integrations team primary focus was on enhancing user efficiency by connecting Typeform with their preferred tools. With the release of many integrations, we observed that the more integrations a user adopted, the higher the retention rate. This observation led us to prioritize creating more integrations and boosting the adoption of integrations as one of our main objectives.

While discovering some usability issues in our previous solution preventing users from completing the configuration for their integrations, we were also receiving hundreds of requests for new integrations.

Over time, we received more than 300 integration requests. However, building new integrations was slow and expensive, and the team lacked the necessary resources to achieve the desired speed.

These problems, coupled with the growing adoption and importance of integrations at Typeform, brought us to the next level: improving the user experience when configuring integrations and transforming integrations into a platform that facilitates collaboration and contributions with third parties. This shift opened the door to external developers, allowing them to build the new integrations they wanted.

We aimed to build a solution that:

- Allows integration users to configure integrations easily.

- Enables the company to open the implementation of new integrations to external teams.

- Empowers external developers to create their desired integrations with a consistent UI composed of Typeform components.

- Enables the Typeform team to create integrations faster and more efficiently.

This meant that we had two audiences when working on this project: on one side, the end users. Our goal was to enhance their experience when configuring integrations. On the other side, we had external developers, for whom we also needed to create a positive experience when implementing new integrations.

Our initial integrations solution lacked scalability to achieve our goals. It lacked flexibility and it had some technical limitations, preventing us from creating some of the integrations users desired. Additionally, we identified several usability issues for the end users and many of them encountered difficulties finishing the configuration of their integrations.

It became clear that starting from scratch, both in terms of design and development, was necessary to create a new experience for the integration configuration flow and to open the development of Typeform's integrations to external developers.

We aimed to create a series of modular block components, empowering developers to craft integrations as complex as needed while maintaining Typeform's unified design language, while also improving the user experience when configuring integrations.

Through analysis of customer success tickets accumulated over the years, tracking the usage of our previous solution, and conducting user interviews, we identified areas for improvement and defined new features for our project.

With clear goals and constraints in mind and alignment with user needs and company objectives, our next step involved building and testing various prototypes to determine the most effective solutions for our users.

Following this, we implemented a proof of concept which we internally tested with our Partnerships team. This team had six members, and they successfully developed five integrations within a week. This accomplishment not only validated the rapid development potential of our new approach, but also was a boost of motivation for our team.

Excel integration

Mailchimp integration

CampaignMonitor integration

The frontend of this project is a React application that renders a set of modular components based on a JSON schema provided by the backend. The following image displays some of the modular components that can be rendered:

It acts as a state machine, where the backend (potentially implemented by an external developer) determines the user interface.

In the image below, you can see a JSON on the right, which includes two sections: one with a single choice and another with an error message. The frontend reads this JSON and renders the defined elements. You can see how the result is displayed on the left:

The release of this project empowered third parties to create their own integrations independently, without relying on the integrations team's capacity. This accelerated the creation of integrations and enabled Typeform to offer a greater variety of integrations to users.

With the redesign of the integrations configuration flow, we achieved higher completion rates, resulting in increased retention rates.

And finally, and as a personal note, this project was an amazing exercise in collaboration and negotiation with many stakeholders. Not only developers, product managers and designers in the team, but also people outside the team working in the strategy and the growth of the company.