Project Name

Form builder

Role

UX research

UX design

Date

01/05/2024

Overview

The Form Builder Tool is a dynamic, user-friendly interface that allows developers and non-technical users to visually design, edit, and manage data schemas with ease. It streamlined the form building process by offering a no-code/low-code environment that supports real-time collaboration and export-ready output.

Problem statement

Only 17 out of 123 forms are available to immigrants to file online. This project was an effort to take complex, deeply nested, and rules-heavy schemas and make them more approachable, editable, and understandable—without requiring users to know the syntax or standards behind the scenes.

Goals

Improve development cycles: Eliminate back-and-forth between engineers and stakeholders by making schema design more visual and intuitive.

Improve accuracy: Built-in validation and formatting reduces errors and mismatches between front-end and back-end expectations.

Align teams: Everyone—from engineers to product managers—can contribute meaningfully to data structure design.

I conducted user interviews with business owners and development teams to better understand the timing, and development effort needed for the various form builds.

User research

• Form building is a repetitive task that should be automated

• Certain schemas are used repeatedly across forms but devs were still creating variations of the same schemas

• Having one source of truth between frontend and backend = fewer bugs

• Devs wanted to define validation once and reuse it across Frontend UI (real-time checks) and backend API (final validation)

Takeaways

Building forms is deceptively time-consuming. It’s not the inputs—it’s the validation, conditional logic, error handling, and making sure everything syncs with the backend schema that eats up hours.

"

Design & UX

Custom Field Types

The design allowed for defining and managing custom fields including strings, numbers, booleans, arrays, nested objects, enums, and more.

Validation Rules

Users could set field-level validations such as required fields, format constraints, and min/max values directly in the UI.

Drag-and-Drop Interface

Allowed for users to quickly build complex data structures by dragging fields, types, and relationships into place.

Schema Templates

User could start from pre-built templates for common use cases (e.g., form categories, predefined data sets).

Live Preview

Users could see how their schema would render or interact with sample data in real-time.

Export Options

Users could export schemas as JSON Schema or other industry-standard formats.

Version Control

Schema changes were tracked with history, versioning, and rollback capabilities.

API Integration

Users can sync schemas directly with the development pipeline via API or webhook.

Achievements

• Created JSON Schemas for form validation

• Rapid prototyping for business users and data teams to test functionality

• Business users were able to define content models without code

• We were able to use a visual form builder for business users and data analysts to define forms

• Automated form to back-end mapping