Simplifying Form Creation for a Seamless Client Experience
The project vision is to generate forms based on json schema. The idea behind this is to reuse / rearrange the json schema to change the layouts and logics of specific fields.
Platform
Next.js
Year
2025
Industry
eCommerce
Shoes
Awards
Red Dot Design Awards
Compasso d'Oro
Good Design Awards
JSON Schema-Based Form System
To streamline the process of creating multiple forms for different clients, the company decided to develop a system based on JSON schema. This initiative aims to simplify future form creation while ensuring flexibility to meet client-specific requirements.
One of the key objectives of this project is to bring resource planning to the Jira board, enabling better task management. The mode of communication has been set through comments on Jira tasks and Microsoft Teams.
The system is being built from scratch with a focus on creating reusable components for layouts, dynamically generating UI based on JSON schema, and maintaining form data in state.
Additionally, the data structure required by the existing system must be dynamically defined within the schema. Another crucial aspect is implementing deep link routes, allowing components to adapt based on deep link responses. This approach ensures a highly flexible and scalable system for managing client-specific forms efficiently.
Client Challenges
State structure as per
client
JSON Schema to UI
Renders
Dynamic state
management
Conditional renders working in schema
Nested models form
submits
Validation specified in schema
Our Process
The Value Addition We Bring
Schema Structure
Create a blueprint outlining data organization, relationships, and validation rules for the system.
Build
Modals Components
Create modular popups or dialog boxes for displaying info or collecting input.
Schema Render Logic
Develop the logic to dynamically interpret and render schemas into visual or functional outputs within the system.
Optimization
Build Form Components
Handle Dependent Modals Data
Manage the flow of data between interconnected modals, ensuring seamless and accurate updates across dependencies.
Optimizing System Performance
Improve the system's speed, efficiency, and scalability by refining algorithms and minimizing resource usage. Enhance code maintainability for long-term adaptability.
Update the System to Override Layouts and Sections
Enable the system to dynamically adjust layouts and content sections based on specific deep-link parameters or user contexts.
