Designing a formview for table creation
Low code way for designing a table data grid
Overview
About Zinier
Zinier is a field service automation software. The company invests in finding solutions to common problems of speed and scale with AI-driven field service management.
Zinier low-code suite of apps
Zinier has a low-code platform built for helping developers and citizen developers develop and deploy solutions at high speed. It consists of a wide choice of prebuilt field service solutions ready to go, a Low-Code platform to self-build applications, and a highly configurable AI engine for transformative predictive service - all in one. Within the forum, it gets commonly called — Studio-Z.
Team Members
Product Manager: Abhijeet Anant Joshi
Product Designer & Researcher: Dhananjay Garg
C-Suite Stakeholder: Gideon Simons
Problem
Most parent pages get made up of table data grids. To generate these data-grids, developers need to write a lot of JSON code, leading to typing errors, camelCase errors, and time-consuming. Therefore, it is essential to make it easy (less time-consuming with a low possibility of error) for developers to build main pages using a form-view.
Task
Provide a low-code form view-based way to configure components used in Web Pages - Main/Parent Pages & Side Panels. This Form View will be a part of the Web Page Builder (WPB).
Business Objectives
Drive significant reduction (~50%) in the development time for a Web Page.
Process
Design Process 👆
During the discovery ideation phase, I did a detailed competitor study, ideated rapidly using paper wireframes, collected as many problems from user interviews, and captured data 📶 metrics as possible.
During research interviews, the engineering team got looped into the process and invited to attend all sessions that helped gather dev feedback/insights.
After prototyping, I collaborated with engineers to do a feasibility check on the solution-designed and product managers to understand if they think this can work with the existing development and scope of work/roadmap. Product Managers communicated about the feasibility checks and estimations provided by the engineering teams.
Finale deliverable artifacts consisted of research documentation, wireframes, clickable prototypes, and high-fidelity Figma/Sketch files with slices turned on for exporting.
🤹 Target Customer/Personas
Provision Persona 👆
Solution Developers: Solution devs develop different solutions for the end clients. The Solution Developers deliver the final deliverable on the Web in an application.
Research
To build an experience that leads to ZERO errors, we need not write JSON code. Can do it by creating an interface that promotes easy selection and drag-and-drop of data-grid components. We need to study a sample JSON code and break it into blocks to convert main pages into an interface-driven leading page builder.
🔎 Requirement Gathering
To understand the problem further and convert manually written JSON code into a form view of sorts, we need to break down the existing code and convert it into a pattern.
JSON code above, I broke down the code into parts based on the code above into a form view 👆
Team brainstorming on how the form view could be structured 👆
MIRO flowchart of the final information architecture 👆
🕵️♂️ Research Suspects
Solution Dev Lead: Hector Riccio
Solution Dev Lead: Reine
Solution Developer: Eshan Anand
Solution Developer: Vipin
Solution Developer: Anubhav Sharma
Front-end Developer: Thangaraj, Sudhanshu
💎 Research Log
Solution Versioning
4️⃣ Version 6.0 [Final Implementation]
💎 ⚡ See it in action 👉 https://www.sketch.com/s/e834c35e-a788-457b-80e0-dc56551a9a57/a/4YeOeA/play
We created a drag and drop solution within the Web Page Builder (WPB) where users can drag-&-drop a simple data grid component which will populate all the necessary values within the component
Drag & Drop experience with size estimation 👆
After the component drops into the canvas. Users can choose to edit, duplicate or delete the element 👆
Formview Design of the Table Datagrid —General, Data Config, Advanced, JSON View 👆
For ease of use, broke the form-view for configuring the data grid into General, Data Config, Advanced, and JSON views —
General
General details like Name, description, and dimension size
Table header configuration
Row actions
The empty States with copy and icon configuration
Data Config
Populate data in the grid using either — Query ID, New Query, or Workflow
Column database values
Mapping of database values to logical names
Column Sorting
Column Data Searchable Configuration
Advanced
Auto ActionsOnLoad
Import/Export Settings
Permissions like row-deletable, scrollable, searchable, updatable
JSON View
A lucid view of the JSON is generated after toggling all the form view options. It was built for advanced developers to play around with the code if needed.
Starting Point
The way engineers programmed data grids were quite basic. It involved hopping around, copying shellcode, and editing the pasted code.
Go to Solution Builder > Web Projects > Pages > Add New
Name
Description
Page Type
JSON code
Go to Page Editor from Pages side panel.
Users can only see the preview of the page from Page Editor.
Users couldn’t remember all the code into Datagrid, so they repeatedly copied the shellcode from VSCode or Github and pasted it in the Page Editor.
No preview code for all pages where devs pasted the code and manually edited the Page Definition entirely driven by gut instinct 👆
Page Editor where devs pasted code 👆
Outcomes & Key Results
We reduced the handholding that a new engineering member needs to understand the structure of data grid design.
We reduced the need to refer to Confluence documentation by 80%. 4 out of 5 users found the new data grid design more manageable than the past implementation.
Because it was a form view, there was no need to copy code bits from the existing Github repository and paste them into the editor.
My Role
I contributed to the project as a Product Designer and a UX Researcher. As a result, I got to work with the engineering team member, interview and learn from affected personas, and design wireframes and prototypes that eventually got baked into the product roadmap and platform.