Improving A File Upload Flow

During my time at Discuss as a Product Designer, I worked on a number of projects involving our B2B product, a market research platform. In this case study, I cover how I improved the user experience of uploading video files into our platform.
Company: Discuss
Role: Product Designer
Tools: Figma
Methods: Wireframing, prototyping
Duration: 4 months (November 2023 - February 2024)
A screenshot of the Discuss research platform showcasing the uploaded state of the newly designed Upload Off-Platform Research section.A screenshot of the Discuss research platform showcasing an in-progress upload of off-platform research. Includes a warning banner at the top with the text "Closing this page will cancel all unfinished uploads. Open the Overview page in a new tab if you want to continue working on your project."A screenshot of the Recordings page within the Discuss platform. Showcases the empty state that appears when no recordings have been added or uploaded to the project yet.A screenshot of expanded Tools & Downloads dropdown menu on the Recordings Page. Includes the newly revised option to "Upload Interview Recordings"

Overview & Problem

Discuss is a B2B market research platform in which users can conduct online surveys and video interviews to learn more about their customers. Collected research can then be analyzed with features such as interactive transcripts, highlight reels, and a generative AI-powered summarization tool.

While a majority of users will collect research for their projects using Discuss, some upload externally conducted research into the platform and go straight into analysis and insights extraction. With the release of Genie, our gen-AI summarization tool, interest in uploading “off-platform” research into Discuss skyrocketed. Extracting insights from interview transcripts, which typically took days of work, could now be done in minutes with Genie.

Genie had compounded the value of analyzing off-platform research within Discuss. However, our existing file upload flow was unoptimized and limited users to uploading one file at a time among other issues. As such, we needed to update our file upload experience to better accommodate bulk uploads and increased usage.

...we needed to update our file upload experience to better accommodate bulk uploads and increased usage.

The Goal

Redesign our file upload flow to accommodate bulk uploads while also resolving any other identified areas of friction. Doing so will drive clients to purchase or renew their subscription add-on packages for off-platform uploads and Genie, ultimately increasing our Annual Recurring Revenue.

[Updating the file upload flow] will drive clients to purchase or renew their subscription add-on packages... ultimately increasing our Annual Recurring Revenue.

My Role

I started this project on November 2023 as the Design Lead and worked with a Product Manager and an Engineer Lead to deliver our new file upload flow.

I created wireframes and prototypes within Figma, frequently meeting with the Product and Design teams for feedback and iteration. I would also meet with the Engineer Lead to discuss the feasibility of my designs and anticipated technical constraints, tweaking my work as needed. Once my designs were finalized, I created annotated design documentation for our Engineers to follow as part of our handoff process.

Discovery

To kick off my design process, I reviewed the current off-platform research upload flow and conducted an informal heuristic evaluation using Nielsen Norman's 10 usability heuristics as my guideline. I identified three main heuristics that our existing flow failed:

1. Flexibility and Efficiency of Use

An issue I noticed immediately was that the flow required many clicks to complete. In total, it took 8 clicks to upload a file when starting from the home page of the platform and another 6 clicks to consecutively upload an additional file.

Breakdown of Upload Flow Clicks:

  • 2 clicks to navigate to the Recordings page (where the entry point is located)
  • 5 clicks to select a file to upload
  • 1 click to confirm and begin the upload

2. Visibility of System Status

After a video file is uploaded to Discuss it must undergo post-processing before it can be viewed. This step usually takes more time than the initial upload. However, there are no progress indicators or mentions of this required step, which often causes confusion for the user. This lack of visibility will only become even more of an issue once multiple files can be uploaded at a time.

3. Recognition Rather than Recall

To begin a file upload, users must navigate to the Recordings page, expand a dropdown titled "Tools & Downloads," and then select the upload option from a choice of up to 12 different actions within the dropdown. This method of entry into the upload flow is unfriendly and time-consuming to both new and existing users alike.

Illustration of the steps/clicks required to begin the existing file upload flow using numbered callouts

Ideation

My first round of designs focused on adding a new section to the Overview/Home page that was dedicated to uploading off-platform research. My intention was to make the upload flow easier to discover, especially for new users, by showing it up front instead of buried under the Recordings page. Doing so also eliminates the first 3 clicks needed to start uploading in the original flow.

After uploading, the user can then click on the "View Recordings" button to go directly to the Recordings page and continue their workflow.

1st iteration: Adding a Upload Interview Recordings section with drag & drop upload functionality to the Overview/Home page

Diagram of my proposed new Upload Flow starting from the Overview page

This new section also includes a target area where users can now drag-and-drop files in addition to selecting files via the Filestack picker. This design pattern is an intuitive way to upload multiple files and is commonly found in other products (Google Drive, Dropbox, etc). It also allows users to skip the initial click needed to open up the Filestack window.

As for improving the visibility of the system status, I designed a post-upload state that displays the names of the three most recent uploaded files and their current status: Processing or Uploaded. This lets the user know exactly when a file is available to view in the platform.

Uploaded state defaults to showing the last three uploaded files, with the option to show more

Option B: Search criteria are separated by related groups and are hidden until expanded to help with information overload. Name (or the most popular used search fields) are expanded by default.

Feedback (1st Round)

I presented my designs to the Product and Design team and received the following feedback:

  • Displaying the status of every uploaded file as its own line item within the Upload section could easily become overwhelming for large batch uploads. Consider exploring alternative ways of handling this.
  • Because users do not have context as to how the upload process works, the two statuses of Processing and Uploaded are too vague. It is also confusing that Uploaded means "completed" and is the step that comes after Processing, since users technically upload the files first before processing begins.
  • We will need to show users additional info regarding upload fees so that they can be aware of costs before proceeding to upload

Iteration (2nd Round)

For my second round of designs, I explored the idea of displaying file upload statuses by "batches." If a user were to upload 5 files at once, the status of that upload would be represented with a single line item as opposed to 5 separate line items.

I also designed distinct Completed and Error states for visual clarity. The error state includes a list of the failed file names and a button to retry the upload so that users do not have to manually reselect each file.

Below are different ideas I tried for visualizing the status of the file upload and communicating the number of steps involved to the user. Ultimately, I decided to forego the visualization and stuck to plain text to reduce the visual clutter when multiple file upload batches are shown within the Upload section.

Feedback (2nd Round)

At this point I met with the Lead Engineer, who had completed a proof of concept and was able to share feedback on my designs in regards to feasibility and technical constraints:

  • While the Drag & Drop pattern is possible, we would need to build it from scratch and it would require additional time and resources to implement
  • Similarly, real-time status updates for upload batches and completion time estimates would take additional development time
  • Contrary to my designs, when a batch of files is uploaded, each file begins processing immediately after it uploads instead of being uploaded and processed altogether in stages

Additionally, the Product Manager introduced several new requirements that I needed to address:

  • Uploads should be limited to a file size of 10 GB each
  • We will be introducing a new "Upload Allowance" subscription package add-on and users need visibility into their allowance (total size of files uploaded or total number of files uploaded)
  • We will be supporting additional filetypes (AVI, OGG, and MKV)

Iteration (3rd Round)

Considering my discussion with the Lead Engineer, I decided it was best to leverage as much of our existing upload flow via Filestack as possible, instead of redesigning everything.

Final Upload section empty state

Upload section filled state

Upload section error state

This final proposed flow requires 5 less clicks from the original flow, or 3 clicks in total. This is a ~60% reduction, making for a much faster experience.

The final proposed upload flow eliminates 5 clicks from the original flow.

The final proposed flow consists of only 3 clicks. This is a ~60% reduction from the original 8-click flow.