Improving a File Upload Flow

Background

Discuss is a B2B qualitative market research platform where users can conduct research and analyze it to learn more about their customers. Research is typically gathered using either the platform’s online survey or video interview tools. Alternatively, users can upload their own video files for a fee. This allows them to leverage the platform’s various insights extraction tools with previously conducted research or research done outside of the platform.

Interest and usage of this upload feature had historically been low. Less than 3% of all projects within Discuss contained "off-platform" uploads. This minimal interest changed after we released Genie, a generative AI tool that creates text-based summaries of interview recordings. Extracting insights from a set of recordings—which could take days of work—could now be done in minutes. Several clients expressed interest in starting projects that exclusively contained off-platform research for use with Genie, with one planning to upload hundreds of hours of video content.

However, our existing file upload flow was not built to support this use case and only allowed uploads of one file at a time, among other issues. If we wanted to sell this ability to summarize off-platform research, we needed to redesign and streamline our current file upload experience.

Goal

Redesign our file upload flow to support bulk uploads and resolve any other identified usability issues. Reducing friction within the off-platform upload flow will increase the sales and renewals of related subscription add-ons, ultimately increasing our Annual Recurring Revenue.

"Reducing friction within the off-platform upload flow will increase the sales and renewals of related subscription add-ons, ultimately increasing our Annual Recurring Revenue."

My Role

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

I created wireframes and prototypes within Figma, which I presented to the Product and Design teams for feedback and iteration. I also met several times with the Engineer Lead to discuss the feasibility of my designs and anticipated technical constraints, adjusting my work as needed. Once my designs were finalized, I created annotated design documentation for our Engineers to follow during implementation.

Approach

I began this project before all of its requirements were defined, with the understanding that additional requirements would be provided later by the Product Manager. The only requirement I had at the beginning was that the upload flow must support bulk uploads. I decided to start by performing an informal heuristic evaluation of the existing upload flow using Nielsen Norman's 10 usability heuristics. During this evaluation, I identified three primary heuristics where our current flow fell short and used those to guide my design decisions throughout the project. These three heuristics were...

1. Recognition Rather than Recall

To begin a file upload, users must first navigate to the Recordings page (Steps 1 and 2 below). Next, they must expand a dropdown titled "Tools & Downloads" (Step 3) and then select the upload option within the dropdown (Step 4). The buried placement of this entry point forces users to search for it and harms feature discoverability for new users.

2. Visibility of System Status

After a video file is uploaded to Discuss it must undergo post-processing before it becomes visible in the platform. Post-processing usually takes more time than the initial file upload itself. However, there are no progress indicators or any mention that this is a required step. This can cause confusion for the user when their file upload is "completed" but the video is nowhere to be found and will be even more of an issue once multiple files can be uploaded at a time.

3. Flexibility and Efficiency of Use

Not only are users forced to begin an upload from the Recordings page, they also must specify the language of each file before they can upload it. The amount of clicks this requires makes for a frictional experience. In total, it takes 8 clicks minimum to upload a file when starting from the home page of the platform and 6 clicks minimum to upload a file starting from the Recordings page.

Breakdown of Upload Flow Clicks:

2 clicks to navigate to the Recordings page (where the flow entry point is located)
5 clicks to select a file to upload (expand dropdown, indicate file language, open file picker)
1 click to confirm and begin the upload

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

Ideation

My first round 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.

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.

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.

At this point, I formally met with the Lead Engineer to discuss my designs and their feasibility in depth. This conversation was insightful and revealed several things contrary to my initial design assumptions:

During a bulk upload, our backend will process each file individually as soon as it finishes uploading. It will not wait for all files in the batch to finish uploading before beginning a collective processing “step.”
The Filestack upload dialog must remain open while an upload is in progress. Closing the dialog will cancel the upload.
The drag-and-drop to upload feature and upload time estimates within the new Upload section are possible, but would be particularly costly to implement.

I worked with him to revise my designs so that they adhered to technical constraints and minimized engineering debt, while still delivering the optimal user experience that I envisioned.

My final iterations resulted in:

Removing drag-and-drop functionality in favor of using the existing Filestack file picker dialog for selection
Removing Upload Progress Cards in favor of the existing upload progress bars in the Filestack dialog
Displaying a placeholder on the Recordings page for each file that has begun processing
Adding information regarding supported file types and file size
Adding an "Upload Allowance" counter to support a newly introduced monetization structure for file uploads
Designing additional banners, toasts, dialogs, and page & component states as needed

Impact

The final upload flow that I designed shaved off 5 clicks from the original, making it possible to start an upload in just 3 clicks. This was a ~60% reduction and made for a snappier experience, especially when uploading multiple batches of files.

Although I left the company before I could see my designs implemented their impact on metrics, some of the projected outcomes were:

Increase in customers with an off-platform upload subscription
Increase in customers with a Genie subscription
Increase in annual recurring revenue

I'd also like to track customers who have an off-platform upload subscription but no Genie subscription, including metrics like the average number of uploaded files in their projects. This would help me understand the impact of my redesigned upload flow without Genie's influence.

Reflection

This was the first project at Discuss where I had a dedicated Engineer Lead that I could consult and work with during my design process. Having this resource and additional perspective to help guide my design decisions was invaluable. However, this project was not without its hiccups.

Due to differing schedules and priorities, the Engineer Lead wasn't able to validate my initial design proposals with a proof-of-concept until after I had already done several rounds of iterations. This revealed several incorrect technical assumptions that I had made, requiring me to revise my work.

Despite this, I had prepared several alternative designs in the event that my favored design solution did not pan out. Together, we reviewed these designs and devised an optimal workaround. I was then able to confidently deliver an improved final solution that met our design, technical, and business requirements.

This new upload flow would not have been possible, or would have at least taken much longer to produce, had I not been able to work so closely with an Engineer Lead. I look forward to future projects where I have the privilege of designing with and learning from developers, and am excited to see what we can accomplish.

Updating A File Upload Flow

Role

Company

Platform

Methods