Bringing Clarity to the Bulk Upload Feature
In my current role as a Product Designer for a compliance tool , I was responsible for improving our existing bulk upload capability. In the startup world, a bulk upload feature can be a useful tool, but it is often overlooked and poorly designed. We need a bulk upload feature to improve the efficiency, accuracy, and scalability of compliance processes for our client; Jubilee Life Insurance helping them meet regulatory requirements effectively.
Issues that existed in the system
Unclear guidance
Questions compliance offers asked while using our bulk upload feature during import:
- Is there any restrictions to the number of files I can import?
- Can I upload XLS, XLSX, CSV, or XML files?
- Is it a problem if my file has special characters inside the fields?
- Will the file still export if certain fields are missing?
- What happens if my spreadsheet columns do not match the required fields?
- How do I fix my data?
- Do I need to duplicate my file to fix errors and re-upload that file?
- Are these changes being tracked for an audit trail?
Vague Error Messages
Vague error messages do not provide enough context for compliance offers to confidently repair their issues prior to uploading their data. Without a clear explanation of why the problem occurred, officers would resort to using manual means to explore fixes prolonging the bulk-upload process.
We needed a way to provide feedback to our clients about empty rows or incorrect information
Empty fields being passed
The current bulk upload system could not tell whether if a row is empty. System gave a response, ‘File validated, bulk upload process initiated”
The customer was created, but the name screening engine could not run due to the date of birth field being empty.
There was no records of file kept
The client wanted to have a helpful way to keep a record of each and every upload of information, such as:
- File name
- Time of upload
- No. of records in each upload
- Time Taken to process all errors
- Total no. of alerts generated on that upload
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 a progress bar to show the user where they are on their journey
Benchmarking and research on bulk upload
I conducted secondary research on similar platforms in order to analyse their user flow and user experience
Based on conversations with front-end and back-end developers, it was evident that the new bulk upload would need:
- 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 that helps clients see progress of their current upload or previous upload
- An error message or success message that is clearly written helps users move forward
- A separate bulk upload for corporate and individual customers
Gathering clarity over data before importing
The necessary information was displayed on the screen, along with a sample column header, enabling our clients to understand their next steps.
The arrange of information also assumed that our clients will also ensure the first row in their files contains column headings. I assumed the providing this information will at least reduce the likelihood of error
Better Error message
The system needed to do a validation check of header columns upfront before users proceed with the next steps
The engineer told me there would be two reasons why a file would fail to upload:
Failed case:
- no label at all in the column
- one or more column has no label
Multi-upload Option
Jubilee wanted an option to upload multiple files simultaneously for the sake allows compliance offers to streamline their workflow by uploading several files in a single operation, saving them time and effort compared to uploading each file individually.
The validation of column values
Users will proceed to the column value validation once the file has been uploaded
Here are a I kept in mind while designing this:
- The system will 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: Invalid date of birth.
Date exists in the future. - Added an an error indicator icon and the semantic colour for each row
- Added switch button will to enable our clients 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
Enabling the toggle button will only displays those rows with errors.
Fix the values
We provide our clients with the ability to edit the values once they are aware of the errors, and our system will automatically validate them once again. The success indicator appears once the fixing is complete.
Clients will be shown a toast success message once all errors have been fixed, e.g: All good! Errors have been fixed. You can now switch off the toggle to see complete data.
Feedback on my design decision
I received to feedback from the front-end and the back-end developer to add an edit icon to all of these columns.
- Clarity: The edit icon provides a clear visual cue that the file is editable. Without it, the developers argues that the user might not immediately realize that they can click on the file to edit it
- Consistency: Having an edit icon on the side maintained consistency within the existing system. If other columns have edit icons for editing, users might expect the same functionality in the file column.
I additionally added time-to-process and size of the file for better visibility on the system’s performance and quick response to any bugs.