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.
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.
Results
Forms Categories
In order to make it easier to track forms they were divided into categories. All forms required a category.
Forms Categories: Dropdown Actions
Once a category is created the user can either rename it or delete it.
Forms Categories: Create New 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.
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: Extras Expanded
The sections on the left are expandable/collapsible, with so many options we did not want to overwhelm the user.
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: 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."
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: Look Up
The look up selection is predictive search contained in a dropdown.
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: Look Up Selected
New Blank Form: Question Options Expanded
Some questions require special options. These options include help text, questions 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 Preview
After clicking apply they are presented with a preview of the question and how it will look in a form.
New Blank Form: Multiple Sections and Questions
A view of multiple sections and questions.
Edit Template
If a template was saved and user wants to edit the template.
Final Form
This is the form the users would fill out. The design was based on ViewPoint's style guide.
New Lookup
First time creating a 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.
Mobile Forms
As a part of this project I created mobile form standards for Viewpoint's mobile applications. Before these layouts were produced Viewpoint did not have any consistency between applications when it came to form presentation.
Mobile Form Examples: Checkboxes
Mobile Form Examples: Dates
As a team we agreed to use native operating systems for our date picker.
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: Pass/Fail
Mobile Form Examples: Percentage & Add Attachment
At this time the only mobile attachments allowed are photos.
Mobile Form Examples: Ratings
Mobile Form Examples: Initials
Mobile Form Examples: Time
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.
