UX Case Study: Bulk Upload

A bulk upload function describes a product feature that allows the user to upload several different files at the same time and correctly process them.

The bulk upload function has been neglected for a long time, due to the fact that such a function often led to significant errors.

The import of files is a complicated process, hampered by unclean data, special cases, encoding formats and error validation. Especially with bulk function, many errors occur and lead to a great disorder, which cause frustration to the users in turn. However, a bulk upload function can add a lot of value to a product if it is thoughtfully developed.

First, we take a look at what basic difficulties users face with an upload function.

Typical questions a user might ask while uploading files:

• Unclear instructions (information needed for a smooth upload)
• What format can be uploaded?
• How big can the file be?
  • What must be done if the file is too large?
• How can I make sure that all formatting is correct?
• Vague error messages
• Vague wording on errors does not provide enough context for users to fix their issues before uploading the file / data

With this knowledge, let's now begin the process of creating a bulk upload function.

Ideally, a brief 1-1 with a developer is organized to discuss upload rules and potential errors. Next, we need to determine where the user can use the new bulk upload feature in the product.

To make the user experience even better, let's recall the common errors during the upload process described in the previous section and fix them.

The user knows at any time where he is in the upload process

• We add a process bar that shows the different steps that need to be gone through
  • In this example: Upload, Preview / Edit, Import

Before uploading the first files, the user gets detailed information about the format, size, etc.

To start the Upload the user has different options on selecting the files that should be uploaded. (Browse Files/Drag and Drop.

The user knows at any time how far each file has been uploaded.

We add a progress bar and a percentage indicator, which reflects the exact progress of the upload

To support the users process clear error but also success messages help the user to understand directly if the upload was successful or if something needs to be repeated.

Error messages are often kept compact and short, but in order for the user to understand them properly, we add an Error Message FAQ to avoid possible confusion

In the next step the user gets the possibility to view his files before importing them into the product, to make sure that all data has been transferred correctly.

Especially when the user wants to preview multiple files, a smooth user flow is a challenge. In this case it was solved with an additional screen.

After the upload, the user clicks on continue and gets to the view of the uploaded and assigned files.

Here he can use the preview button to view the individual files as an overlay.

(An edit function at this point would be possible, but is not desired in this case.)

If one of the uploaded files has errors, it can still be deleted, so that only correct data is imported into the product itself.

If all files have been uploaded correctly, the import can be continued. Only now the files are really inserted into the product. The user knows at any time how far the import process is, with the help of progress bars and percentages.