Introduction
In my career journey as a designer for SaaS products, I have worked on improving the dashboard experience for users. There are different purposes and levels of complexity for every product, which makes it challenging. In my previous position, I designed bulk uploads for product management within the dashboard. Once the products are uploaded, users can decide which products to display. Back then, I worked a lot with Point of Sale applications and their product management system. In my current role as a Product Designer for an online recruiting tool, I am responsible for improving our bulk upload capability. In the SaaS world, a bulk upload feature can be a useful tool, but it is often overlooked and poorly designed.

Description of problem

The bulk upload as a core feature has been neglected for a long time hence it is causing major bugs. File import as a process is broken due to messy data, edge cases, encoding formats, and error validation. This case is getting worse because the existing bulk upload feature does not provide clear instruction regarding the acceptable format file and the solution of occurred issues.Moreover, the effect of bulk upload issues leads to customer frustration and wasted engineering cycles rebuilding what those users already expect to have.

The most common issues with our bulk uploads

Unclear guidance

Questions users may ask during an import:

• Can I upload XLS, XLSX, CSV, or XML files?

• What is UTF-8 encoding?

• What if my file is 10 MB?

• Is it a problem if my file has special characters in column headers?

• What happens if my spreadsheet columns do not match the required fields?

• How do I fix my data? Do I need to save a duplicate CSV and upload that file instead?

Vague errors

Vague error messages do not provide enough context for users to confidently repair their issues prior to uploading their data. Without specific explanation of the problem, users are going to be stuck working through every possible fix until they find one that works (if any).

Inefficient CSV column-mapping

The data importer does not recognize columns on the user’s file and dropped the data out without any notice.

Objective

• Provide clear instruction or guidance for bulk upload feature regarding the acceptable format file and file size

• Create our core bulk attributes for mapping the attributes on the user’s file

• Provide clear error messages

• Create knowledge base center regarding import file by using bulk upload

Goals

• Improving hassle-free file import on bulk upload feature

• Increase customer satisfaction and less frustration in uploading bulk data

Importing data does not need to be the reason for customer frustration or churn during customer data onboarding.

The existing bulk upload feature

This is the initial bulk upload screen

There are no clear instructions or guidance on the initial bulk upload screen, as I mentioned in the most common problems above. We found that even though our users use the template we provide, they still encountered some errors during the import process.The creation of our core bulk attributes

The preview of bulk upload data

My next step was to create our core bulk attributes to configure our column-mapping process based on the attributes we already have.

Full Name

The legal name of your candidate., e.g: Karina Ivanovna.

• Letters only

• Maximum 250 characters

Data requirements: required, can’t be blank or missing.

Preferred Name

The name a candidate wishes to be known., e.g: Karin.

• Letters only

• Maximum 250 characters

Data requirements: required, can’t be blank or missing.

Phone Number

The active phone number of your candidate. This will be used to send notifications to a candidate.

• Number only

• Maximum 128 characters

• A contact number is formatted similarly to a WhatsApp number.

e.g: 
+618112000123 → +61 811–2000–123
49123456789 → +49 1 23 45 67 89

Data requirements: required, but can be blank.

Email

The active email of your candidate. This will be used to send the information regarding Q&A session to a candidate., e.g: karinaivanovna@gmail.com.

• Can include numbers, letters, or symbols

• Maximum 128 characters

• Validation by regex

Data requirements: required, can’t be blank or missing.

Location

The city where a candidate resides., e.g: Bandung, Jakarta, Bali, Sydney.

• Letters only

• Maximum 128 characters

Data requirements: required, but can be blank.

Additional ID

The unique identity key of a candidate., e.g: AST-6123.

• Alphanumeric

• Can contain special characters

• Maximum 50 characters

Data requirements: required, but can be blank.Benchmarking and research for bulk uploadsI conducted secondary research on similar platforms in order to analyse their user flow and user experience. The pieces of information were all collected into Whimsical.

The collection of bulk upload information.

Based on my analysis of this information, I concluded that:

• The clear and necessary information provided to users upfront will assist them in taking the necessary action

• A table with format error indicators will assist users in locating and correcting those errors

• A column-mapping allows users to match the attributes on the column header on their file

• The page navigation in the preview helps users jump to the intended page

• An error message or success message that is clearly written helps users move forward

The hi-fi wireframe of bulk upload

In creating bulk upload, I also involved the Frontend and Backend Engineers so that they could give me feedback on the design I made, particularly column mapping and validation of data on the rows.

Pre-import data and agreement

I provided the necessary information on the screen and a sample column header so users could see what their next step should be.

Based on our past experience, I asked my Product Managers what the accepted file format is and, from the Backend Engineer’s perspective, how many rows would be best for the system to handle since we want to ensure that our background process of importing the file will only take a few minutes.

The agreement stipulates that users also ensure the first row in their files contains column headings. Providing this information will at least reduce the likelihood of error.

Failed to upload case message

During the process of uploading files, as I discussed with the Frontend Engineer, the system will do a validation check of header columns upfront before users proceed with column mapping.

Failed case:

• no label at all in the column

• one or more column has no label

Column Mapping

Upon passing the validation check, users will be prompted to confirm every item attribute matches the correct column in their import file.

Users can match the attributes of their header columns to the attributes of our items. Sample data is included for each attribute.

The validation of column values

Users will proceed to the column value validation once the column mapping has been completed.

Here are a few things to keep in mind:

• Give a clear explanation of how the system will handle the values on each row and what to do if there are issues., e.g: Our system checks the values of each row and if any issues found you can easily edit it by clicking on the cell.

• Create a toast message to highlight errors or successes., e.g: All good! You’re ready to import the data.

• Display an error indicator icon and colour for each row

• The switch button will enable users to display only rows with problems.

Whenever errors occur, users can hover their mouse over the tooltips to view information on the context of the error., e.g: Invalid email address. The email format must be johndoe@example.com

The ‘View errors’ link allows users to view only errors. This behaves similarly to a toggle button, which only displays rows with errors.

The file import process

During the import process, we display the progress indicator in a percentage. Upon completion of the process, users are able to view a list of candidates by clicking ‘Go to Candidates’.

Feedback on my design decision and defense

I received two feedback from the CEO, who is the Chief Product Officer and the decision maker.

• To reduce the steps, he requested deleting information about pre-import data and agreements

• To allow users to enter additional information in header columns, he wanted to make them dynamic

Initially, I defended that the information we provided would avoid any possibility of error, users would know what action should be taken and how our system will handle the file. The analogy is like buying a medicine without any information about indication, procedure, or the dosage instructions. Someone who drinks the medicine will suffer from allergy or even bad symptoms due to the side effects.

Furthermore, we should reconsider what ‘simplicity’ means, in this case to reduce the number of steps. That simple does not always mean total reduction, or minimalism. Sometimes, to make things clearer you have to add a step. We make sure the import process of bulk upload is intuitive and functional, so users do not get lost or frustrated during this process.

Dynamic field is not something that has been agreed upon in Confluence as a scope of work. In Confluence, the scope of work was to improve bulk uploads. I also received support during my presentation from the Product Managers, pointing out that the dynamic field was not a scope of work we had previously agreed to. Yet, the scope is getting wider because he still intended to put this dynamic field into the scope.

I discussed this concern with my Lead Engineer and team because I need their input regarding the technical aspects of dynamic fields. Engineers could possibly build it, but it would come with some disadvantages.

• The validation process will take some time due to the queue during the editing of error rows in the dynamic fields

• The current database structure cannot accommodate additional data

• The column field will always change since users will be adding unique attributes to header columns, which will create another problem in the future

• Since header columns are not limited, our system will not recognize the key attributes used for column mapping

The takeaways

In many cases, bulk upload features are neglected, overlooked, or poorly designed. Nonetheless, its presence can be a valuable benefit for SaaS users. I invested lots of time and effort in this task to think about and analyze ways to improve our bulk uploads due to the complexity. It is also my responsibility as a designer to defend my design decisions and make sure stakeholders are aware of the advantages and disadvantages of their feedback as well. The team support can be helpful in achieving the company’s goals together. Furthermore, be patient, keep asking, and always listen.