Vazco Case Study – Kuba Bogucki

Original

Translated

Vazco is a software house from Poland. It developed FormBuilder, a React tool that allows to create custom forms.

In its early stage, the web app already had the core functionalities in place, but was operated through a list of nested dropdown menus and popups.

To enhance the user experience, Vazco needed a prototype to test the app, and to set foundations for future GUI that would improve the user experience.

The Background

FormBuilder is addressed to no-code and professional (dev) users. The new interface was especially important for the first group. Up to this point, the product development was primarily focused on implementing core features, neglecting user experience, especially usability. This resulted in a high learning curve for new users, as many functions were hidden and required specialised knowledge to set up and create form fields. Additionally, the current design also leaves room for errors that could be avoided with better UI design.

A few screens from the call with Formbuilder introduction call showing a general idea of what early stage FormBuilder looked like. This is also the moment when I learned to always taka a good quality screenshots of the "before" stage :)

The Solution

The objectives for the initial project include:

maintaining all functions of FormBuilder,
simplifying the discovery and use of its features,
ensuring stable synchronisation between code and no-code methods
enabling customisation of form styling
improving the visual appeal of the product
reducing the potential for errors and implementing error handling
implementing a drag-and-drop workflow

The first step of the project was an extensive research of competitor or similar tools. I created multiple forms, checked the similarities and differences. After that I received a deep training in FormBuilder operation to get a good understanding of its functions. Based on that I listed all jobs-to-be-done by users, to collect all FormBuilder that needed to be retained in the prototype.

After that, based on these information, I designed the prototype with a number of feedback sessions form Vazco FormBuilder team.

The result is a prototype of a web app that allows users to switch between Visual and Code editors. The visual editor features the main canvas for displaying the form, with two palettes – "Add components" on the left and "Edit field" on the right.

Visual editor

Code editor

Components

"Basic" components are the simplest fields users can add onto canvas – like text fields or dropdown and set it up themselves.

Pre-defined components are a faster way to add fields to a form. They allow to focus not on a type of field users want to add to, but on a type of data. Ex. users don't have to analyse if radio box or checkbox is better way for collecting single choice data. These components are also grouped semantically according to type .

Drag and drop

Users can add components onto canvas simply by dragging items from Components palette. They can also reorder items in canvas by dragging them.

Sections

Sections are a way of tidying up the form and bulk manage fields.

Sections allow to group fields with displaying them vertically or horizontally.

Logic

Setting up rules for displaying or hiding certain fields in a form was the hardest-to-understand element of early stage Form Builder. It was also generating a lot of errors.

The most important change was limiting the number of possible fields combinations to those that make sense. Eg. comparing a value of a boolean field to a value of a text field will always generate error, so users shouldn't be able to set up this combination. I tidied up possible combination decreasing the number from 20+ to 10.

After that I designed the new logic as a modal window opened from the "Edit field" palette.

The finished prototype design met all of the primary criteria and was transferred to Vazco for coding and conducting the user tests.

The testing showed a few areas to improve – like changing the names of the component groups and section management mechanic. These changes were implemented by Vazco team independently.