Forms

An advanced form builder tool

Overview

Forms was designed as a specialized form builder, built to work along side Workflows and Task Center. Forms is able to work as a regular form builder, with the additional capability to bring in data from outside sources and populating options or pre-fill fields. This gives Forms increased flexibly and allows users to reuse forms with up to date information.

Design Process

Designing a form builder started out as one of the more straight forwards projects I’ve worked on. As the capability of the form builder increased however, so did it’s complexity.

The first iteration was easy. It involved ways to create, duplicate and rearrange questions and sections, ability to select different question types, preview mode, etc. It also included more unique capability such as version history, response datasets, and a 'field contract’. For the first iteration, these where listed along the top of the form builder as tabs.


1st Iteration Mocks
Homepage Design Option 2
Homepage Design Option 2
Homepage Design Option 2
Homepage Design Option 2
Homepage Design Option 2

Design Process (continued)

During the second iteration, we began to focus on more advanced features. Adding all these features and settings however, made things crowded and confusing for the user to know what was required and what was optional. This is where the new side panel came in. I redesigned the top bar, moved settings to an overview panel, and created a new question detail panel that would include advanced settings specific to individual question. The question detail panel included the ability to filter, sort, power questions with datasets, and define input/outputs.

Inputs and outputs related to the field contract we’d created earlier. They provided a way for users to link a question to a parameter in Workflows. This allowed Workflows to take the answer to a question, capture the information, and use it down the line.

2nd Iteration Mocks
Homepage Design Option 2
Homepage Design Option 2
Homepage Design Option 2
Homepage Design Option 2
Homepage Design Option 2