Form Builder
UX that gets out of the way


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