USG Submittal Prep App

01. Context

Submittal preparation is an important step in the construction process. The submittal process helps to decrease the risk of incorrect installations, construction delays, and defects by giving architects and engineers the ability to verify that the correct products and quantities will be used. Submittal packages include all relevant documentation for products that would be used in a construction project so that project owners can assess whether a contractor’s bid will meet city codes, green building certifications, and aesthetic requirements.

The USG marketing team wanted to create a frictionless submittal builder experience that would help improve brand loyalty. Since USG products have a higher price point than most of their competitors, the Submittal Prep tool needed to be representative of a high-end brand.

USG.com is built on AEM, and has a catalogue with hundreds of different skews. The primary goal of the Submittal Prep App was to build a solution on an pre-existing AEM infrastructure that would allow users to seamlessly navigate an extensive product catalogue to find product documentation, aggregate it, and output it in one elegant PDF file they could immediately submit to their next potential project.

02. UX Strategy

Through a combination of stakeholder interviews, desk research on the submittal process, and an extensive competitive analysis comparison, our team was able to identify which basic features were needed in order for our app to be the perfect solution during the submittal preparation process. Since the submittal preparation process is very time intensive, the basic intent of the tool was to facilitate assembling submittal packages so contractors would choose USG products over competitors’.

Summary of key findings from interviews:

Most submittals are generated by sub-contractors. However, some of these contractors have relationships with distributors, so when a bid comes in, they simply forward the construction specs to the distributor who then generates the submittal for them. Search mechanisms such as predictive search and search by skews became the most important feature of the tool.
Sub-contractors have very specific disciplines (mechanical, roofing, dry-wall, etc). These sub-contractors tend to re-use past submittals, with appropriate changes to products or quantities to fit the specific project. A way to store and retrieve past submittals became a priority.
Since submittals are intended to be re-used, notifications of updated documentation became necessary. The ability to clone a submittal package became necessary. This would ensure users would come back to the Submittal Prep App to download packages with the latest documentation and have “templated submittals” so they don’t have to start from scratch.
Having the ability to re-order documents in the Submittal Package is an important feature since contractors tend to build the package from the outside in (in the order in which products are assembled).
Ordering product samples to be included with submittal packages.
Typical users were males, between the ages of 30 and 55, who do not consider themselves ‘tech-savvy’. Most work with their hands, away from computers. Submittals are considered an inconvenient part of the new business generation cycle.

Summary of competitive research:

A total of 19 submittal builder applications were analyzed.
The best submittal builder applications allowed the users to customize cover pages for a professional look, had a table of contents to help recipients verify that all products were included, and had ‘shopping cart’ mechanisms to provide instant feedback when a new product was added to or removed from the submittal package.
While many of the competitors kept documentation separate, users made it clear that one singular, aggregated PDF was the best output for our tool.
Pre-packaged submittals were rare but useful, especially for entire building systems such as wall enclosure systems which included exterior surfaces, insulation, and dry-wall.

User Experience Vision Statement

The Submittal Prep Tool is a web application that helps distributors and contractors build, save, duplicate, and edit a single submittal package with a customizable cover sheet, a table of contents, and the latest product documentation. The Submittal Prep Tool is built to reduce frictions when creating construction submittals such as: organizing submittal documentation and providing version control mechanisms to automate the submittal building process as much as possible; creating search mechanisms to assist a demographic that is older and used to blue-collar manual labor; leveraging user interface patterns that our target demographic is used to seeing on iOS, amazon.com, and facebook.com to create a familiar experience.

03. Usability Testing

The team had a good idea of the key user interactions that needed to be designed from our first round of interviews. Multiple hypothetical solutions were designed and sketched to solve for those interactions, and mid-fidelity prototypes of those hypotheses were tested during usability testing sessions with 6 distributors and 7 contractors. From those mid-fidelity prototypes, we selected the best patterns to cater to our specific demographic.

Prototype 1

Users create submittal packages on one screen, where they can see submittal contents arranged by product, and have the ability to edit submittal details. To add documents, users have to add the product to the submittal package first. Then they add documents or samples to that product on the main page through a lightbox.

Prototype 2

Submittal Prep Tool is divided into three tabs. Tab 1 provides a search bar or dropdowns to help users find the right products. Once products are found, users can select documents from the accordions, which get added to the shopping cart side bar and allows users to edit contents at any time. Tab 2 allows users to edit submittal details. Tab 3 allows users to verify submittal information and generate package. This concept avoids page refreshes to help users navigate through the process in a linearly manner.

Summary of Results

Users vastly prefer prototype 2 over prototype 1. Prototype 2 helps the workflow of most users, while some expressed neither prototype would work since they are asked to submit their bids through Submittal Exchange. gyro recommended an integration with Submittal Exchange for a later phase of the project.

Users like Prototype 2 because it provides minimal choices, keeps documentation and information organized in a way that mimics how they would typically assemble a submittal package. During the product search, both the text search and the dropdown were used an equal amount. Some users preferred the dropdowns because they can’t type so fast.

Most users were happy to see that documentation within a submittal package gets updated automatically and that email notifications will be sent to the primary account notifying them that a new document is available.

Want to see the full prototype?

Get in touch!

04. Design System

Users of this tool do not work on a computer for a living. It was important for us to design patterns they would already be familiar with. We based large parts of our design on other user interface patterns these users see on a daily basis. We also ensured these UI patterns would be available throughout AEM to ensure they could be re-used when appropriate.

Basic flow – 3 tabs

Tab 1 – Users can search via the input text box or using dropdown to drill down product categories.
Tab 1 –A search catalogue was created that takes into account misspellings, skew numbers, and even industry nick-names (“blue lid”) to ease any frustrations during the search of a product.
Tab 2 – Details will populate the cover page of the project. Also allows users to store contacts for later reference.
Tab 3 – Verify details and download submittal package.

Tablet

Contractors tend to search for installation documentation while on the job site. It became essential that the Submittal Prep Tool provided an optimal tablet experience for document search and document viewing.
Shopping cart sidebar is hidden in a tab – on click, slides out and reveals contents.