Viewpoint: Form Creator
Summary
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.
Client
Viewpoint
Services
- Information Architecture
- User Experience Design
- User Interface Design
Tools
- Sketch
Process
Design
The design process moved very fast due to my limited timeline. I met with the developer on the project, did some pencil sketches that I gave to him and he started the building process. We were moving simultaneously to meet our deadline.Â
Design Elements
Outcomes
Designs: Desktop
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.
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: 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.”
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 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 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: Multiple Sections and Questions
A view of multiple sections and questions.
