Easier Import

Spring 2022

Designer & Developer

This project was a re-design and re-implementation of a web applications file import process. The file import process allowed the user to upload 3d or 2d data which was processed on the server and then display in the application. Viewing this data was one of the primary uses of the application so it was important that the users be able to successfully upload their data.

Problems

There were three major problems with the existing file import process that updated version addressed:

It wasn't always clear which option to choose. The user needed to read the fine print for each option to determine if it was suitable.
There was no back button. This meant if the user made an incorrect choice, or decided that they wanted a different choice, they needed to close the dialog and start the processes over again.
The implementation was difficult to maintain. There was no logic shared between different steps that accepted similar input.

Screenshot of a modal dialog with three options: upload data, import from Propellor, and import drone files — Previous: the first step prompted the user to select the data location.

Screenshot of a modal dialog with eight options: preconstruction survey, point cloud survey, DTM/DSM survey, as built, design surface, design linework, ortho image, vector overlay. Each option has a list of supported file types below it. — Previous: The second step required users to select how they wanted to classify their data in the application.

Screenshot of a modal dialog with multiple input fields in a haphazard layout. — Previous: The third step of the previous import process where users uploaded their file and provided details.

Solution

The major change was to reverse the process and take a file first approach. The new method prompts the user for the file to upload as the first step. Based on the type of file provided, only the relevant options are shown. This eliminated the need to read the fine print on each option to determine if it would work with the file type that was being uploaded.

The entire dialog was re-built using shared components for logic reuse. It also included dedicated logic to manage the stack of steps. This management included the ability to go backwards to previous steps.

Screenshot of a modal dialog with two sections: import from smart construction solutions, and upload files — Updated: the first step provides users a direct way to add files to import.

Screenshot of a modal dialog with four input options arranged in a column. A collapsed advanced settings section is collapsed. — Updated: in second step of the process, users are shown only the options relevant to the file they provided.

Screenshot of a modal dialog with input options arranged in a column. An advanced settings section is expanded revealing four additional input options. — Updated: Many of the less frequently used options were moved under an *advanced settings* collapsible section to help focus on the important fields.