Form Creator

Viewpoint Form Creator

Project Overview

In the construction industry forms are everywhere, there are forms for every conceivable purpose. Viewpoint had a form creator that was very powerful, unfortunately it had a major flaw; it wasn’t very useable. In mid-November of 2019 I was tasked with redesigning the form creator. However, that came with a major caveat; I could not do anything that changed the backend functionality and I had only 6 weeks to get it done. To add to the pressure this was a pet project of a vice president.

Given the timeline I did not have much time for pencil sketches or wireframes. I did a few sketches to get on the same page as the developer, after that it was straight to high fidelity visuals following Viewpoint’s style guide. There wasn’t even time for a prototype and the first user test was when the finished product was unveiled to customer. Thankfully everything was well received.

When I was assigned this project I was fortunate that I had done something similar a few years ago for a different company. Due to that previous project I was able to conceive the idea of a drag & drop concept. The stake holders loved the idea from the beginning so there were no other concepts.

When a form is created, users need to be able to fill it out. After completing the form creator as a part of Viewpoint’s web based applications I was tasked with creating a way for users to fill out forms on mobile. Once again this was a fast turn around on the project, so the developers and I agreed to take advantage of native form elements wherever possible. This project had to be done in under two months, there was no time for pencil sketches or even wireframes, it was straight to visuals using the Viewpoint mobile style guide.

 

Process        

The project was broken down to 1 phase:

  • Design

Design
Everything went real quick, there is very little to describe.

Project Elements        

Pencil Sketch – Simple sketches to translate my ideas to the developer.

Prototype – The prototype focuses on the mobile component. Note: to return to the table of contents click the center of the blue header.

Forms Categories

In order to make it easier to track forms they were divided into categories. All forms required a category.

Forms Categories

Forms Categories: Dropdown Actions

Once a category is created the user can either rename it or delete it.

Forms Categories: Dropdown Actions

Forms Categories: Create New Category

Forms Categories: Create New Category

Forms Categories: Edit Category

Forms Categories: Edit Category

New Blank Form

When a user wants to create a new form template this is the blank screen they start with.

On the left are the question and section types. The right is where a user drags and drops a question. Everything is self contained, once a question has been created all the options are available.

New Blank Form

New Blank Form: Extras Expanded

The sections on the left are expandable/collapsable, with so many options we did not want to overwhelm the user.

New Blank Form: Extras Expanded

New Blank Form: Category Dropdown

All forms must be stored within a category. This field also allows the user to create a category "on the fly."

New Blank Form: Category Dropdown

New Blank Form: 1st Question

Once a user creates a question they are presented with several options. First they must type a question. In this case they have chosen to use a "lookup." A lookup refers to any multiple choice options including dropdowns, radio buttons, etc.

The user is also given other options like making the question required or duplicating a question as a time saver.

The question is not saved until the user clicks "apply."

New Blank Form: 1st Question

New Blank Form: Look Up

The look up selection is predictive search contained in a dropdown.

New Blank Form: Look Up

New Blank Form: New Look Up

If a user doesn't find the lookup they want, they can create one right here that gets saved with the rest of the lookups.

New Blank Form: New Look Up

New Blank Form: Look Up Selected

New Blank Form: Look Up Selected

New Blank Form: Question Options Expnded

Some questions require special options. These options include help text, questions are only visible to an admin, changing the column name the answers appear in, or the ability to allow the user to add comments.

New Blank Form: Question Options Expnded

New Blank Form: Question Preview

After the user clicks apply they are presented with a preview of the question and how it will look in a form.

New Blank Form: Question Preview

New Blank Form: Multiple Sections and Questions

A view of multiple sections and questions.

New Blank Form: Multiple Sections and Questions

Edit Template

If a template was saved and user wants to edit the template.

Edit Template

Final Form

This is the form the users would fill out. The design was based on ViewPoint's style guide.

Final Form

New Lookup

First time creating a lookup.

New Lookup

Edit Lookup

Edit Lookup

Instance Grid

This is where instances of templates are stored. An instance is a new form based off a template that does not change the actual template. For this page I had to create a new filter process.

Instance Grid

Mobile Form Examples: Checkboxes

Mobile Form Examples: Checkboxes

Mobile Form Examples: Dates

Mobile Form Examples: Dates

Mobile Form Examples: Dropdown

Mobile Form Examples: Dropdown

Mobile Form Examples: Multiple Choice

In this example a user can tap the X on the right to deselect a selection.

Mobile Form Examples: Multiple Choice

Mobile Form Examples: Pass/Fail

Mobile Form Examples: Pass/Fail

Mobile Form Examples: Percentage & Add Attachment

At this time the only mobile attachments allowed are photos.

Mobile Form Examples: Percentage & Add Attachment

Mobile Form Examples: Ratings

Mobile Form Examples: Ratings

Mobile Form Examples: Initials

Mobile Form Examples: Initials

Mobile Form Examples: Time

Mobile Form Examples: Time

Mobile Form Examples: Yes/No

Mobile Form Examples: Yes/No

Mobile Form Examples: Unfilled, Filled Out & Submitted

The first image is a form to be filled out. The middle image is a filled out form and the final image is after the form has been submitted.

Mobile Form Examples: Unfilled, Filled Out & Submitted