“Quickbase” Form Builder
Project type:
Web App UI
Services:
UI design,
Prototyping,
Ideation,
Interaction design
Client:
Quickbase is a cloud-based, low-code/no-code platform that allows users to build custom applications to manage projects, connect data, and automate workflows. It enables businesses to create solutions for specific challenges without extensive coding, making it a flexible alternative to traditional software development for tasks like project management, CRM, and other business processes.
Project goals
Quickbase offers app builders to build custom forms that can be used to view and edit records of a database. The product forms had very outdated design and limited functionalities. Along with modernizing their design system the team I was part of also took the initiative to bring a new life and innovation for that essential functionality.
My role was to support the main UX designer with analyzing results, ideation, prototyping and high-fidelity visual design. The project was divided into phases starting with improving the most important functionalities and have more opportunities to validate our solutions and then add and refine the innovations we came up with.
The previous form builder was clunky because of usability issues with mapping elements. Users had to edit the form layout in a separate screen that didn't represent accurately how it will look after saving, how fields will look and feel, how much space will they take etc. So our main goal was to make a builder that will show users during the whole process how their work will look like as close as possible as the final result.
The second big challenge that we had to addesss was to reduce the cognitive load and the need for users to remember name of fields. We had to come up with ways to quickly and easily access and edit field's and form information without leaving the editor. They also had to feel the freedom to be creative in the building process.
Another pain-point for users was that for tables (that's how a database is called in the low-code world of Quickbase) that have many fields, there wasn't an easy way to make a multi-column layout. So another challenge was to give users control over column/row grid and let them make best use of the page's empty space.
Approach
After the initial research and competition analysis done in the team, we started crafting our builder trying to implement wide-spread best practices using our design system as if the form is already built in order to have all the limitations of space and the challenges where to put builder controls. We represented fields with all their details, options like help text or file upload area were all displayed. We experimented with popovers, "drag and drop" as well as sliding side menus in order to optimize space.
Each phase implementations went trough a round of user testing and QA testing to validate and see what can be improved for the next one. This is how we discovered how to improve the affordance of the draggable elements, placement of popovers and small refinements like automatically scroll down to the newly added fields and so on.
Later when we confirmed that we're on the right direction, we continued with the more technically complex functionalities like grouping, column resizing, multi-step form, previewing in different modes or user roles etc. We also had the obligation to make everything accessible according to the WCAG 2.1 AA guidelines, so we had to ensure that we have alternative ways for our functionalities like 'drag and drop' to work.
Creative direction
Solutions
-
Layout control:
The need for better layout control was achieved by allowing users to add up to 8 columns, which could be resized by dragging a handle or if a column is already populated it can swap place with another without the need to rework anything.
Our team worked on a requested feature by our users to have a way to tinted columns in order to highlight their importance. This was tricky job as we had to experiment and limit how coloring is applied so that we still meet the accessibility standards. -
Flexible, Discoverable & Quickly accessible:
We added flexibility of adding a field in 3 different ways - the add button in the bottom of each column, the plus button in between fields for exact placement as well as the kebab menu in the corner of each field thus avoiding the previous switching contexts and screens. Users then are presented with a popover from which they can choose from the list of already existing database fields, search for a field or create a new one. They also have the option to add multiple fields at once.
Once added, the field could be moved by "drag & drop" functionality and placed in seconds in the intended position - this functionality was the most important in improving efficiency of the builder.
When user selects a field a sidebar menu slides in where they can see and edit fields properties and settings. This reduced cognitive load and optimized the space in the layout.
We kept accuracy of the form by representing fields with all their details, options like help text or file upload area were all displayed and their respective size as they will look in the final form. -
Organising, Previewing & Reverting:
For the often complex industry use cases that Quickbase is usually used for, there was the need to organize bigger forms in sections like tabs or switch between sequential forms with steps. In order to help builders not get lost in their big forms we designed collapsible sections with clear separation.
We also made users feel more free to experiment by giving them the option to undo and redo their actions as well as preview the form with real data of records or in different modes than the edit one (View or Read-only) -
Future improvements:
Next iterations were focused on cases where we could speed up the builders by giving them the abilities tomove multiple fields to another section or duplicate elements & columns using the quick actions bar in the sliding side navigation.