Designing a Visual JSON Schema Editor for Non-Technical Analysts
Designing a Visual JSON Schema Editor for Non-Technical Analysts
Designing a Visual JSON Schema Editor for Non-Technical Analysts
Long story short
Long story short
Designed an internal visual editor for JSON schemas, enabling non-technical analysts to work independently and reducing reliance on expensive third-party tools.
Designed an internal visual editor for JSON schemas, enabling non-technical analysts to work independently and reducing reliance on expensive third-party tools.
Context
Context
The goal was to create a simple and intuitive interface that allows analysts to build and edit data structures visually, without writing code.
The goal was to create a simple and intuitive interface that allows analysts to build and edit data structures visually, without writing code.
Force Scheme is an internal tool for working with JSON schemas. Existing solutions on the market were not suitable because they were:
overly complex,
not aligned with internal workflows,
dependent on paid licenses that were difficult to access.
As a result, the team decided to build a focused internal product tailored to specific user needs.
Force Scheme is an internal tool for working with JSON schemas. Existing solutions on the market were not suitable because they were:
overly complex,
not aligned with internal workflows,
dependent on paid licenses that were difficult to access.
As a result, the team decided to build a focused internal product tailored to specific user needs.
Problem
Problem
Working with JSON schemas is typically developer-oriented.
Working with JSON schemas is typically developer-oriented.
For analysts without a coding background, this created significant friction when:
creating data structures,
validating schemas,
understanding relationships between elements.
The challenge was to design a tool that:
represents JSON as a visual flow,
clearly shows relationships between elements,
remains simple and understandable, even for first-time users.
For analysts without a coding background, this created significant friction when:
creating data structures,
validating schemas,
understanding relationships between elements.
The challenge was to design a tool that:
represents JSON as a visual flow,
clearly shows relationships between elements,
remains simple and understandable, even for first-time users.
Example of JSON format
Example of JSON format
My Role
My Role
I worked closely with analysts, who acted both as stakeholders and end users, and validated design decisions through continuous feedback.
I worked closely with analysts, who acted both as stakeholders and end users, and validated design decisions through continuous feedback.
I joined the project after the first working prototype had already been developed.
My responsibilities included:
defining user flows and interaction logic,
designing the UX and UI,
developing visual patterns and interaction principles.
I joined the project after the first working prototype had already been developed.
My responsibilities included:
defining user flows and interaction logic,
designing the UX and UI,
developing visual patterns and interaction principles.
Initial developer-built prototype created without design involvement. The goal was to test canvas interactions and object creation mechanics, not the final user experience or visual design.
Initial developer-built prototype created without design involvement. The goal was to test canvas interactions and object creation mechanics, not the final user experience or visual design.
Process: Getting up to speed
Process: Getting up to speed
Since this was a new domain for me, I needed to quickly understand how JSON schemas work.
To accelerate this, I used tools like ChatGPT to learn the fundamentals and align with developers and analysts.
Since this was a new domain for me, I needed to quickly understand how JSON schemas work.
To accelerate this, I used tools like ChatGPT to learn the fundamentals and align with developers and analysts.
Process: Competitive and reference analysis
Process: Competitive and reference analysis
I had to combine simplicity and functionality
I had to combine simplicity and functionality
I explored both direct and adjacent tools:
UI inspiration: visual collaboration tools like Miro
Functional inspiration: schema and mapping tools such as Altova MapForce, ToDiagram, and Liquid Studio
The goal was to combine:
the simplicity of visual tools,
with the capabilities of schema editors.
I explored both direct and adjacent tools:
UI inspiration: visual collaboration tools like Miro
Functional inspiration: schema and mapping tools such as Altova MapForce, ToDiagram, and Liquid Studio
The goal was to combine:
the simplicity of visual tools,
with the capabilities of schema editors.
At some point, I realized that a visual representation of JSON is conceptually similar to the node-based workflows used in Blender, a 3D modeling tool I was somewhat familiar with.
At some point, I realized that a visual representation of JSON is conceptually similar to the node-based workflows used in Blender, a 3D modeling tool I was somewhat familiar with.
Process: Iteration and collaboration
Process: Iteration and collaboration
We went through several iterations:
validating technical feasibility,
refining interaction patterns,
simplifying the visual layer.
Throughout the process, I worked closely with analysts to understand how they think about data structures.
This helped me design an interface that reflects their mental model, rather than developer-oriented logic.
We went through several iterations:
validating technical feasibility,
refining interaction patterns,
simplifying the visual layer.
Throughout the process, I worked closely with analysts to understand how they think about data structures.
This helped me design an interface that reflects their mental model, rather than developer-oriented logic.
Solution
Solution
Created a user-friendly browser application, enabling users with no prior experience to visually interact with the data without cognitive overload.
Created a user-friendly browser application, enabling users with no prior experience to visually interact with the data without cognitive overload.
I designed a visual editor where users can:
build JSON schemas using a block-based interface,
clearly see relationships between elements,
interact with data structures without writing code.
The key focus was on:
reducing visual complexity,
maintaining clarity,
making the system approachable for non-technical users.
Through testing, even users who previously struggled with JSON were able to successfully complete their tasks
I designed a visual editor where users can:
build JSON schemas using a block-based interface,
clearly see relationships between elements,
interact with data structures without writing code.
The key focus was on:
reducing visual complexity,
maintaining clarity,
making the system approachable for non-technical users.
Through testing, even users who previously struggled with JSON were able to successfully complete their tasks
Solution
Solution
Before
Before
Developer-built prototype with limited usability
Unclear structure and relationships
Difficult for non-technical users to navigate
Developer-built prototype with limited usability
Unclear structure and relationships
Difficult for non-technical users to navigate
After
After
Structured visual system with clear hierarchy
Improved readability and navigation
Interface aligned with analysts’ mental model
Structured visual system with clear hierarchy
Improved readability and navigation
Interface aligned with analysts’ mental model
Impact
Impact
Analysts can now work with JSON schemas independently, without relying on developers
Analysts can now work with JSON schemas independently, without relying on developers
The product was released as an MVP:
no backend or cloud storage,
users upload, edit, and save files locally.
Despite these limitations:
analysts can now work with JSON schemas independently, without relying on developers,
the company reduced dependency on expensive third-party tools,
the solution created a foundation for a scalable internal product with potential for future commercialization.
The product was released as an MVP:
no backend or cloud storage,
users upload, edit, and save files locally.
Despite these limitations:
analysts can now work with JSON schemas independently, without relying on developers,
the company reduced dependency on expensive third-party tools,
the solution created a foundation for a scalable internal product with potential for future commercialization.
Reflection
Reflection
This experience reinforced how design can simplify complex systems and make them accessible to non-technical users.
This experience reinforced how design can simplify complex systems and make them accessible to non-technical users.
This project required me to quickly adapt to a new technical domain.
To build a deeper understanding, I:
studied existing schemas,
tested competitor tools,
created schemas manually.
This project required me to quickly adapt to a new technical domain.
To build a deeper understanding, I:
studied existing schemas,
tested competitor tools,
created schemas manually.
Next Steps
Next Steps
Planned improvements include:
cloud storage,
real-time collaboration,
user account system.
Planned improvements include:
cloud storage,
real-time collaboration,
user account system.
