Objectives

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

The main goal of this project was to redesign the current bulk import feature to a user-friendly tool located in the CRM.

The user needs the ability to bulk upload hundreds of candidate profiles into the system with very minimal steps.

Improving hassle-free file import on bulk upload feature.

Increase customer satisfaction and less frustration in uploading bulk data.

UI/UX Needs (From Prod)

Ability to upload multiple file formats (.csv, .xlsx, .zip).

Provide download instructions along with a sample template.

Display errors(validation, file data) clearly should they come up.

Ability to fix the errors within the application (Phase 2).

Ability to map column header (both standard fields and custom fields).

Download uploaded files with error details (if any).

Ability to Manage Duplicates and adding those to folder.

WHAT was your role?

As the sole designer, I led the design for Bulk Upload / Import and collaborated with the fellow designer, product manager and the front-end dev team.

WHAT was the timeline of the project?

3 Weeks.

WHAT were the constraints?

Lack of time to perform external user research, technical limitations due to being built on older framework.

WHAT were the tools used?

Figma, Adobe Illustrator, Miro.

Discovery

During our initial discovery work it was clear that this tool wasn't very user friendly and improvements were needed.

Pain points discovered during our early findings(PRD from the product team, internal focus group discussion) included:

Overwhelming amount of data/instructions for the process. This has to be simplified and easier for users to digest

Colors and style didn't adhere to the company brand and vision. The user interface is a mix of old XCloud UI and Phaser Design System.

System validation issues.

Benchmarking and Research

I conducted secondary research on similar platforms(Tap Clicks, Google, Epicollect5 etc) in order to analyse their user flow and user experience.

Findings

Show a preview that indicates the progress while uploading a file including percentage, validation etc.

Display a summary of the upload report. No of valid, invalid and duplicate entries. Also suggesting the user to go ahead with the next step incase everything seems good or recommend them to download the uploaded file with error details and make the changes using an external editing app.

Show a tooltip message against each data cells that are considered as invalid.

Column mapping feature within the app.

Allow the user to complete the process even if there are invalid rows.

Solution: Bulk Upload Feature Implementation:

Based on the analysis, the following solutions were identified:

Create a user-friendly interface for bulk uploading candidate data, featuring clear instructions and guidance prompts.

Enable the platform to support various file formats (e.g., CSV, Excel) for uploading candidate data, accommodating users' preferences and existing data formats.

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.

Implement validation checks to identify errors in uploaded data, such as missing fields or formatting inconsistencies, and provide informative error messages and suggestions for resolution.

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

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

The existing bulk upload feature landing page

 

Sample Bulk Import Template Preview(csv file)

 

Bulk Import Instructions

  View OLD UI

Problem Statement

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 process of creating a contact was straightforward while adding multiple contacts using Bulk Upload flow was very complex and was less user-friendly. The user interface also lacked the company’s brand identity and user-centric design.

IA

 

Steps

 

The Hi-Fi Wireframe

 

The Designs

Upload

Ability to upload multiple file formats (.csv, .xlsx, .zip).

They will have the ability to see more uploading instructions if needed.

They will be able to drag and drop or select files to upload.

 

Upload Completed

 

Map Column Headers

During the mapping process, users will have the ability to map their column naming convention to the naming convention the system is expecting.

The mapping system should be intuitive and the system should match the columns automatically (to the best of its ability).

   

 

 

Fix Errors

The records uploaded from your spreadsheet will be displayed in a grid where any errors will be highlighted in red for you to correct. Entries that are too long or in the wrong format are typical causes of errors.

An error indicator icon in red color will be displayed next to the invalid cells and on hover you see a tooltip with details

Fixing all the invalid rows is not mandatory for the MVP version but will be considered for the latest phases.

Users will be given an option to delete duplicate entries on this page.

Filter and sorting options will be implemented in the next phase.

   

 

Duplicate Handling & Add to Folder

Users should either overwrite the duplicate contacts or skip them

They should also add all the imported contacts to a folder(existing or create a new folder)

And save

 

 

Folder Details

Users will be taken to the specific folder that they have selected in the previous step.

 

  View LIVE PROTOTYPE

Next Steps (Phase 1 Plans)

CSV View Integration: Seamless integration of a CSV view within the app

Auto fill column headers: Fill the non matching column headers with appropriate fields

Copy-Paste Functionality: Simplified data transfer by allowing users to copy data from a CSV sheet and paste it within the system, and vice versa.

Progress Step UI pattern/ widget

Save as Draft: Introduced a ‘Save as Draft’ feature for added convenience, allowing the users to revisit and complete it anytime.

Results

We provided a comprehensive solution that integrated UI enhancements and patterns aimed at making this process easier. Even without proper UX research, we received positive feedback from external users on ease of use and how it improved their work.

Improved efficiency: The bulk upload feature reduces the time and effort required for data entry, allowing recruiting teams to focus on strategic tasks.

Enhanced Accuracy: Validation checks and error handling mechanisms minimize data entry errors, ensuring the integrity of candidate information.

Facilitated Scalability: Recruiting teams can scale their recruitment efforts seamlessly, accommodating large volumes of candidate data without compromising efficiency.

Positive User Feedback: Users appreciate the simplicity and effectiveness of the bulk upload feature, resulting in improved user satisfaction and engagement.

Conclusion

By implementing a bulk upload feature within the CRM platform, we have addressed the challenges faced by recruiting teams, enhancing efficiency, accuracy, and scalability in candidate management processes. Through user-centric design and continuous iteration, we have achieved a significant improvement in user experience, empowering recruiting professionals to streamline their workflows and make more informed hiring decisions.