Typeform integrations

Over the years, one of Typeform's goals has been the creation of integrations, enabling users to connect their forms with third-party tools to automate and accomplish a wide range of tasks.

Product Design and Frontend Engineering

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.

The big picture at a glance

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.

Previous solution

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.

The designs

Excel integration

Excel permissions
Excel setup

Mailchimp integration

Mailchimp integration

CampaignMonitor integration

Campaign Monitor empty
Campaign Monitor filled
The development

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:

Integrations frontend kit components

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:

Integrations JSON

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.