Bulk Upload

Apart from listing posts, we can add them. Not only by using a form, but also by bulk uploading them via CSV file.

Importing data is one of those features that might sound simple but in reality both from technical and design point of view it has many pitfalls.

Analyzing Current Version

This is how the current version looks like.

There are quite a few typical mistakes. One of the most common one is violating the law of proximity.

1. Avatars and the label compose one visual group, even though the label relates to the radio buttons below
2. The space between the dropdown and the radio button is too big, they have loose coupling.
3. The space between two radio buttons and the download link is exactly the same, making it unclear where the link belongs to
4. The space between radio buttons is too big
5. The upload button is shown before users have selected a file. Selecting a file is the first step, it’s impossible to upload a file that hasn’t been selected

Digging Deeper

There are three things we need to pay attention to.

First, some of the types require users to select a value in a dropdown (pipeline, optimized time), while others don't.

Second, for each type of bulk upload there are different CSV templates that users can download to see what columns there are.

Third, the upload button won't work until you select a file. Also, it's a bit confusing to have both "select file" and " upload" visible at the same time for a feature called "bulk upload"

Apart from that, every time you select an option, you'll have a link to download the CSV file. It feels like it can be shown somewhere once. I mean, in any case you will have that link, and probably it is more connected to selecting the file process rather than the type of "where the posts will go".

In any case, there are many ways to redesign it. I have checked out a couple of other services that have a similar functionality and got to the following ideas.

Should we use a separate page?

Bulk uploads (of any kind of data) are frequently placed on the page, where the data can be added manually. For example, if we have a list of leads in a CRM, usually right on the list page there are two buttons: add a lead and import them via CSV.

This brought me to the idea that instead of using a page, we can place the feature on the same page where users add posts manually.

In most cases it looks like a button that invokes a modal. But here we have two options.

Either all of the different cases of uploading a CSV will be placed inside the modal Or, we can use a different approach: ask what type of import the user wants to do before invoking the modal

Why I prefer the second approach?

When you upload a CSV file, there are many edge cases that may arise.

For example, in one of the apps that I checked, they show a modal where they ask the user what kind of import they want to do. When users select the type, another modal appears above, because it has some extra things that need to be shown ( at least a dropzone with file requirements).

So basically, if we try to put everything in a modal, it might become too busy.

That's why we can unload the modal by asking for the type in advance. This way, we will know whether we need a dropdown or not, as well as any other things we might need to show in the future.

Here are a couple of examples.

Now, of course, it's not that straightforward. There are many things to take into account.

1. Validation of the file
2. Smart mechanism of mapping columns of the CSV file with the option to adjust them
3. After the file is uploaded, the UI will change and the "upload" button will appear (the one that was in the very first screenshot)
4. The process of importing takes time, so we shouldn't forget about the message that the user can close everything, and once the import is done, they will be notified via email.

Another option would be to have the bulk upload on a separate page. That works too.