Redesigning a File Upload Experience

After my heuristic evaluation, I mapped out a user flow of the current upload experience. This helped me visualize where the flow could be tweaked to incorporate bulk uploads and improve usability as well as which steps must be carried over.

Diagram of the current upload flow which takes 9 clicks to open the file picker, select a file, specify language, and upload it.

I then mapped out alternative user flows. I started with an "ideal upload flow," meant to be my vision of the shortest and simplest possible way of uploading files. Because the ideal flow relied on two technical assumptions that I hadn't yet confirmed with the Engineer Lead, I also explored additional flows without those assumptions.

Proposed ideal upload flow

This ideal flow was created under two major technical assumptions:

• Recording file language can be automatically detected upon upload and does not require manual selection by the user. We could hopefully leverage the APIs that we use for recording transcription to achieve this
  
• A "drag-and-drop to upload" UX pattern can be implemented on the platform Overview page
  

Because these assumptions hadn't yet been confirmed with the Engineer Lead, I also explored additional flows independent of these assumptions.

Wireframes

At this point, I began exploring designs for my proposed ideal flow (while also fleshing out some of the alternative flows on the side). My first iteration of designs focused on:

• Adding a dedicated Upload section with drag-and-drop support to the Overview page. This would allow users to skip the first four clicks of navigating to the Recordings page and selecting the Upload option from the dropdown menu.
  
• Supporting bulk file uploads. This would eliminate the need to repeat the upload flow for every single file and save users time.
  
• Allowing users to close the upload dialog and continue working in the platform while uploads run in the background. This paired with clear visibility of the upload progress would be beneficial for bulk uploads that take longer to complete.
  

Overview page design with newly added section for uploading off-platform research

New Upload section designs with drag-and-drop functionality and upload status

After receiving feedback from the Product team during a design critique, my next iterations revolved around:

• Showing upload status by "batches" instead of by individual files. In scenarios where many files are uploaded, this would reduce the size of the Upload section and accompanying visual clutter.
  
• Providing an estimate of the time remaining until an upload completes.
  
• Providing informative error states that display the names of all files that failed to upload within a batch.
  
• Handling errors for failed uploads via a "Retry uploads" button. Clicking this would retry uploading all failed files within a batch, saving users the hassle of having to start a new upload, recalling the names, and re-selecting all files that failed.
  

Next iteration of Upload Recordings section and Upload Progress Cards

I also explored alternate designs of the file upload status cards that included progress steppers, as I thought that informing users of all the steps involved up front would be helpful. In the end, I opted for a plainer design with no stepper as this design choice was based on a hunch and adding one would introduce more complexity for the engineers.

Exploration of various Upload Progress Card designs with steppers to give users additional context into the upload process.