Feather toolkit: Signup flow builder

Recently, a part of our Engineering team has been focusing on enabling everyone at Feather to build signup questionnaires, no matter their technical proficiency. Here we introduce our main goal for this work, the thinking behind it, and the solution we built for it.

Where we started

Signups are one of the main building blocks of our product. They allow people to discover our offering, customize it, and choose it for their insurance needs. The number of our signup flows has been growing constantly and shows no sign of stopping.

Building signups at Feather is a collaborative process, where teams communicate through multiple artifacts — including but not limited to Figma and FigJam files, Linear tickets as well as Notion pages — to create user-friendly questionnaires and quote screens. Our process worked, but recently its limitations started to become more obvious. The experts on an insurance product heavily relied on the Engineering team to launch a signup and improve it over time, even when applying minor changes to the UI or business logic.

Where we wanted to go

When we set out to change the status quo, our main goal was to enable everyone to channel their expertise into building and iterating on a user-facing signup flow. We wanted to remove the technical boundaries and turn this into a creative process anyone at Feather could contribute to.

Following this new approach, once a signup flow is ready, Engineering should still be involved in handling the backend part. This creates clear boundaries between developers and non-developers as the hand-off happens once the flow is stable and has been tested by Operations, Design, and Product.

How we got there

During hack days we experimented with a "Questionnaire Builder", our first attempt to build a signup flow independent of code. This prototype has provided us with just enough information to understand how to build the next iteration and make it usable for a larger audience than just developers.

Even the most complex questionnaires we build at Feather can be defined via a JSON file. To move forward, we needed a user interface that could generate that JSON code. We found it in Strapi, the open-source Content Management System (CMS) that already powers the Feather website.

Via the integration between Strapi and our app, now anyone in the team can build a signup flow screen using CMS fields:

The data provided will be included in the JSON generated by Strapi:

{
  "questions": [
    {
      "id": "dogName",
      "required": true,
      "type": "INPUT",
      "screen": {
        "question": "What's your dog's name?",
        "description": null,
        "continueButtonText": "Continue",
        "noMaxWidth": false
      }
    }
  ]
}

The Feather app will load the JSON code, rendering the corresponding input screen as part of the signup flow:

By the same account, on Strapi we can define rules for which signup screen will be shown next based on the provided answer:

{
  "rules": [
    {
      "id": "dogName",
      "if": {
        "op": "equals",
        "variable": "Foobark"
      },
      "then": {
        "goTo": "dogNameBlocker"
      },
      "else": {
        "goTo": "breed"
      }
    }
  ]
}

The JSON code also contains the quote screen content, the answers’ validation logic, error handling, and more.

While there are layers of technical complexity below this overview, we aimed to keep the experience for our "internal users" building on Strapi simple and intuitive. This makes a signup flow's creation faster, more tangible, and (thanks to a live preview feature) immediately testable for the entire team at Feather.