Redesigning a File Upload Experience

Discuss is a B2B market research platform where users run projects to learn about market trends and customer behavior. Research projects typically involve conducting video interviews and then analyzing the recordings with insights tools—all done within the platform.

Users with other means of collecting research can still use Discuss by uploading off-platform video files into their projects. However, this feature had been underutilized since its launch, as there were several limitations that impaired its usability.

A recent spike in customer interest for off-platform uploads meant it was time for us to fix these problems. I led the redesign of the upload feature and flow, adapting it to accommodate bulk uploads and fixing several UX issues that I identified.

My Role

Lead Designer - UX/UI Design, User Flows, Wireframes, Prototypes

Team

Bryan Kai, SWE
Jilleun Eglin, PM

Timeline

3 months, launched Aug 2024

JUMP TO:

Highlights

Overview Page

Delivered redesign of the Overview page

Original design of the Overview page

Recordings Page

Delivered redesign of the Recordings page

Original design of the Recordings page

Upload In Progress

Delivered redesign of the Upload In Progress state

Original design of Upload In Progress

Context

Up until recently, uploading off-platform recordings on Discuss garnered minimal interest and usage. This all changed after we released Genie Summaries, a Gen-AI tool that can create a text-based summary of any interview recording or group of recordings within a project. What used to take researchers days to extract insights from a set of recordings could now be accomplished in minutes.
‍
As a result, interest in off-platform uploads surged. Clients reached out about starting projects that exclusively contained off-platform research for use with Genie. Some even planned on uploading and summarizing "hundreds of hours" of video content once it was easier to do so.

Problem

If we wanted to capitalize on the demand for summarizing off-platform research, we had some work to do.
As it stood, our current video upload feature was incompatible with the Genie workflow that our customers wanted. It was originally built as an MVP and centered around two technical requirements that were now major bottlenecks...

One file at a time. Users aren't allowed to select multiple files in the file picker and instead must upload them one-by-one.

Strict filetype requirement. Only .mp4 video files can be uploaded into our platform.

Objective

Redesign the file upload experience to eliminate existing bottlenecks and other identified sources of friction and usability issues.

Approach

I started the project with only one firm requirement: support for multi-file uploads. Additional requirements surfaced later as my team and I continued to refine our direction; but for now I explored design solutions freely.

To establish some guidelines for my exploration, I performed an informal heuristic evaluation of our upload flow. I used Nielsen Norman's 10 usability heuristics and noted three key heuristics that I felt our current flow fell short of. These served as north star principles throughout my design process.

Recognition Rather Than Recall
Minimize the user's memory load by making elements, actions, and options visible.

Flexibility and Efficiency of Use
Systems should be flexible enough to allow users to complete a given task using a variety of methods.

Visibility of System Status
Always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

As part of this groundwork, I also mapped out a task flow and marked the steps where I encountered these usability issues. This provided a high-level visualization of where I could start focusing my redesign efforts.

Existing task flow for uploading a video file, annotated with usability issues that I documented

Diagram of existing task flow for uploading a video file

Ideation

Flow Entry Point

Before a user can start an upload, they must navigate to the Recordings page to reach the flow entry point, or in this case, the "Import Recording" button (Figure 1.1).

Figure 1.1

Task flow of navigating to the Upload flow entry point

While the location of this entry point made sense at a high-level (manage and upload recordings on the Recordings page), the multi-step process required to reach it seemed unnecessarily cumbersome (Figure 1.2).

Figure 1.2

Current experience of navigating to the Upload flow entry point

There were two main factors that contributed to this

Flexibility and Efficiency of Use
‍Users must navigate to the Recordings page—which takes several clicks—every time they wish to make an upload.

Recognition Rather than Recall
‍The flow entry point and the page that it is located on are hidden in navigational dropdowns. This makes it difficult for new or infrequent users to find them.

Moving the Upload entry point out of the dropdown menu and onto the Recordings page

Adding an additional Upload entry point in a more visible location within the platform

Renaming the "Tools and Downloads" dropdown menu to be more descriptive of its contents

Moving the Upload entry point out of the dropdown menu and onto the Recordings page

Adding an additional Upload entry point in a more visible location within the platform

Of these three, I decided that adding an additional entry point would be the most impactful. The first two ideas would still require a user to be aware of the Recordings page and how to reach it. By placing an entry point somewhere like the Overview page (the "home page" of a project), users could skip the initial navigation process and remove it from their cognitive load altogether.

Taking a look at the Overview page, I felt the most suitable place for the extra entry point was alongside the Upcoming Interviews and Self Captures sections (Figure 1.3). These two sections are starting points for users to begin collecting research in the platform, which is similar to what uploading off-platform research achieves—bringing research into a project.

Figure 1.3

Potential placement of the additional Upload entry point on the Overview page

As for the contents and appearance of this new section, all I knew so far was that users should be able to initiate an upload from here. I started off with creating two basic designs (Figure 1.4) that would allow users to do just that. Once I knew what the rest of the flow would look like and what else this section needed, I would iterate accordingly.

Figure 1.4

Basic designs for new Upload Recordings section on the Overview page

File Selection

Figure 2.1

Task flow of selecting a video file to upload

Flexibility and Efficiency of Use
‍Users must specify the spoken language for every recording file that is uploaded.

After entering the upload flow, a dialog window opens and prompts the user to select the language spoken in the recording that they will be uploading. If a user needs to upload multiple files, they would have to undergo the tedious process of repeating this step for every file.

This had to change if we truly wanted to accommodate multi-file uploads. I explored potential flows for how we could improve the language selection process (Figure 2.2).

Figure 2.2

Options for reworking the language selection process

Option A was my ideal solution. If our platform could automatically detect the language of uploaded recordings, users could skip the language selection step altogether. This would speed up the flow and eliminate room for user-error during selection, without the need for any front-facing design or development.

Because Option A was dependent upon certain technical requirements though, I came up with some initial designs for Options B and C in case we needed to pivot (Figure 2.3).

Figure 2.3

Design concepts for alternate language selection flows

Thankfully, when I met with Bryan (SWE) to discuss these options, he informed me that our speech-to-text API had recently been upgraded and recording languages could in fact be auto-detected. This would all be done in the background and would not require any user interaction, allowing me trim the upload flow even further.

1st iteration of Overview page

However, this ideal flow was created under two major technical assumptions:

Recording file languages can be automatically detected upon upload. We could hopefully leverage the APIs that we use for recording transcription to achieve this

A new flow entry point can be added to the Overview page. This entry point would also support "drag-and-drop to upload" functionality.

Wireframes

At this point, I began exploring designs for my proposed ideal flow. My first iterations focused on:

1st iteration of Overview page

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

Outcomes

By identifying and targeting usability issues that the existing flow fell short of, I delivered a new upload experience that improved upon efficiency, visibility, and more.

Reduced clicks needed to upload a file by 60%. From 9 clicks down to 3 clicks.

Improved feature discoverability and ease of access by adding a second upload flow entry point on the Overview page

Enhanced system visibility by adding banners, toasts, and placeholders to communicate file upload progress

Although I left the company before I could see my designs implemented and their impact on users firsthand, a former colleague was kind enough to share the following metrics that were collected 1 month after launch.

137% increase in off-platform videos uploaded

47% increase in new projects with uploads

Further analysis of these metrics, including a comparison between customers with Genie subscriptions vs. customers without Genie subscriptions, could be beneficial in illustrating the impact of my redesigned upload flow without the influence of Genie.

Reflection

This project was unique for me in that I worked alongside an assigned Engineer Lead for its entirety. In past projects, designers would send any questions or requests in the #dev Slack channel and whoever had time or expertise would assist. Having a dedicated engineering 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 build a proof-of-concept (PoC) to validate my initial design proposals until after I had already done several rounds of iterations. After the PoC was presented, I discovered several aspects of my designs that were either unfeasible or were based on incorrect technical assumptions.

Despite this, I had prepared several alternative designs in the event that my favored design solution did not pan out. I reviewed these designs with the Engineer Lead and together we chose the 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.

← Prev Project

Next Project →