Intuitive Bulk Importing
Overview
An OMS (operating management system) is an essential tool used by businesses to manage their daily operations and make informed decisions. It helps streamline processes, increase efficiency, and reduce costs. MasonHub is a third-party logistics (3PL) SaaS company that focuses on optimizing order management and fulfillment for its clients.
The OMS uses bulk uploading for importing a large number of SKUs (products) into their system, using a CSV (Comma Separated Values) file. This process allows for quick and efficient uploading of a large amount of data, as opposed to manually entering each SKU individually.
My Role
As the sole designer, I led the design for Bulk CSV Upload / Import and collaborated with the product manager, front-end dev team, and the head of product on the SKU Import experience.
The new and simplified experience was shipped for development at the time of publication of this case study - December 2022.
The Goal
The goal for this project was to redesign the current CSV bulk import to a user-friendly tool located in the OMS. From a business perspective it is important to improve this experience because this may be the first tool a new MasonHub client will use.
After clients are onboarded, to start operating, they are required to feed all of their SKUs into the MasonHub system. We wanted to make sure that the clients first true experience with the product and the MasonHub brand was easy and seamless.
MasonHub prefers to take the iterative approach (agile) when it comes to tackling products like Bulk SKU Import. Therefore, it was very important to differentiate between the user's needs and wants and the business's needs and wants when thinking through the MVP of this project.
The Challenge
The existing user experience wasn't very clear. It did a poor job error-handling and notifying it's users of the problems that came up. The user interface also lacked MasonHubs brand identity and user-centric design.
UX/UI Goals
The goal was to reimagine what the bulk uploading/importing experience should feel and look like at MasonHub. We wanted to design an easy experience for our users to understand all the steps in the uploading process and clearly display errors should they come up.
The likelihood of errors coming up while importing files is high due to the nature of uploading data-heavy external files. For example: something as simple as formatting or a missed required data field can throw an error.
It was very important to reduce these errors beforehand in the user interface which provides users the ability to view and resolve those errors seamlessly prior to importing into the OMS.
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 included:
- Hierarchy was very poor
- 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
- All the buttons were the same
- Users had to know their "user slug" in order to upload anything
- Users had an option to edit previously imported SKUs from the same UI
User Research
We conducted user research to understand the needs and pain points of our end users. We interviewed and observed employees at work to understand how they uploaded and imported SKUs for clients to identify areas of inefficiency.
While observing and interviewing users we discovered that there were no safeguards in place when editing SKU's. Since this tool gave users the ability to mass-update previously imported SKUs- users were able to make changes to many SKUs at once.
While observing a heavy user use the edit feature, we realized that this was a critical issue as it could result in costly consequences. When the user was inputting the account slug, the user unintentionally entered the wrong account slug (Large Retail Chain account instead of Large Retail Chain - Drop-ship account) which in return made edits to the wrong account.
The result of this mistake was very serious because the user deleted many SKUs from the wrong account and caused chaos in the OMS as there was no easy way to undo this action. It was costly because the development team had to get involved to understand and find the edit in the system and roll it back.
Another observation made was:
When users clicked the "recently uploaded" button, they got redirected to a blank screen where they were required to enter the account slug and were forced to select a date range.
This frustrated users because they had to input the information all over again.
Ideate
During the ideation process and brainstorm sessions we decided that it was important to separate the "import" from the "edit" experience. This decision was made to avoid confusion and potential costly mistakes.
Another significant user experience improvement was adding user permissions to clients accounts so that our system recognized the user account when users were logged in.
This allowed us to remove the "account slug" selection field as the system already identified the user is and the account associated with that user.
Design
After several iterations of rapid sketching, we had a good idea of where to start to refine and expand on our design process.
Low-fidelity
After some iterations, we decided to break the upload experience into 4 steps:
- Upload
- Map
- Confirm
- Import
Upload:
Users will have the ability to download a .xlsx template to reduce errors and follow a guide.
Users will have the ability to see more uploading instructions if needed.
Users will be able to drag and drop or select files to upload.
Map:
During the mapping process, users will have the ability to map their column naming convention to the naming convention the system is expecting.
For example: if the user is uploading an "order ID" named column and the system is expecting an "order identification" named column- users then can easily map the two by matching the required criteria column to the column they are uploading without having to change that in the CSV file.
The mapping system should be intuitive and the system should match the columns automatically (to the best of it's ability).
For clarity, we added an "Example" section so users can see the sample data the required criteria column is expecting.
Confirm:
The confirm step is very important because this is where the users can confirm they are uploading the correct data.
This is also where users can see if there are any errors in their upload data.
If there are any errors, users will have the ability to easily update them right in the user interface.
This is very helpful because users aren't forced to fix the errors in the CSV file and restart the entire process again.
Import:
Once all of the steps have been completed, users can then import their SKUs. In this step users shouldn't be getting any errors as the UI should have already caught that in the previous steps.
High-fidelity
We used color to highlight the most important features so users have a clear understanding of what is expected.
We included a prebuilt XLSX template for users to download to prevent mapping errors.
We added a quick guide at the top for clarity and error prevention.
For the first-time users, we added a link for more detailed instructions should it be needed.
Account Manager View
Account managers user permissions allow them to select which account they want to upload/import SKUs against so that they can continue helping their clients as needed.
Error Handling
Users can clearly understand errors when uploading an incorrect file.
Column Mapping
The system automatically maps the columns for the user to confirm and do a spot check.
Confirmation Default View
If there are no issues with the upload file, users will default to the confirm screen and get confirmation of a job well done.
Confirmation Error Handling
If there are any issues with the file, users will be able to spot that right away and resolve the issues in the user interface.
When iterating through the high-fidelity designs, we came across an edge case - what happens if there are many errors, what then?
To solve for this, we added a link to download the error report. The report clearly specifies all of the fields that have errors so users can bulk edit them in the CSV file.
Since users will be uploading a large sum of files, we were sure to include pagination.
For more clarity, data field hover tool tips were also included in the final designs.
Confirmation Errors Resolved
After users resolve the errors directly in the UI, a green checkmark indication appears in the row and at the top for feedback.
Once everything is ready to upload, the Import button changes from deactivate to active.
Confirmation - Show all rows
Users have the ability to view everything they have uploaded by toggling the "show all rows" checkbox.
Import - yay
Once the previous steps have been completed, users are then able to import the file error free!
Conclusion
In conclusion, the implementation of a more user-centric design and improved error handling for the bulk import feature has resulted in a significant increase in user satisfaction and efficiency.
By simplifying the process and providing clear feedback on any errors, users are now able to easily upload large amounts of data with minimal frustration.
Additionally, the inclusion of a preview feature and the ability to correct errors before final submission, has led to a reduction in the number of failed import attempts.
Overall, this new design has greatly improved the user experience and has made the bulk import feature a valuable asset for our organization.
