Redesigning A File Upload Flow

Discuss is a B2B web-based platform that provides tools for scheduling, running, and analyzing qualitative market research. A key feature of Discuss is its video-conferencing tool, which allows users to conduct and record interviews and focus groups within the platform. If a user does not want to use Discuss to run their interview sessions, they can upload their own video files into the platform for a fee.

In this case study, I cover my redesign of the flow for uploading these video files—which was driven by an influx of new customer requests. As a result of my redesign, I satisfied a long-standing customer request while also significantly reducing task completion time and improving the user experience.

Role

Lead Designer

Company

Discuss

Platform

Web

Methods

UX/UI Design, User Flows, Wireframes, Prototypes

Background

Uploads of off-platform recordings on Discuss have historically seen minimal interest and usage. However, this changed with the recent release of Genie, our generative-AI tool that creates text-based summaries of interview recordings. What used to take days to extract insights from a set of recordings could now be accomplished in minutes.

This new capability generated significant interest from clients, with several expressing the desire to start projects exclusively containing off-platform research for use with Genie. One client even stated that they planned to upload and summarize hundreds of hours of video content.

Despite the growing demand, our existing file upload flow was unequipped for this use case, as it only allowed for one file to be uploaded at a time among other limitations. To capitalize on the interest in summarizing off-platform research, we needed to redesign and streamline our file upload experience.

Project Objectives

  • Solve painpoint of tedious, single-file upload limitation
  • Address any other usability issues found within the existing upload flow

Outcomes

By targeting usability heuristics that the existing flow fell short of, I designed a new and streamlined upload experience that benefits new and existing users alike. As a result of this redesign, I was able to:

  • Shorten the process of uploading a recording from 9 clicks to 3 clicks—a 60% reduction
  • Improve feature discoverability and ease of access by adding a second upload flow entry point on the Overview page
  • Enhance system visibility by adding banners, toasts, and placeholders to communicate file upload progress
A flow chart of the original off-platform file upload flow. Flow starts with Overview page and ends with Recordings page, upload complete. There are 8 user steps and 3 system actions in between. 5 user steps and 1 system action are crossed out with a red X.

Diagram of original upload user flow. Steps that were removed in the final flow are marked with a red 'X.'

A user flow diagram of the final redesigned file upload experience. Starts at the Overview page and ends at the Recordings page, upload complete. Contains 3 user steps and 2 system actions in between start and end.

The final delivered upload flow

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

  • Increase in number of projects with uploads
  • Increase in average number of uploads per project
  • Increase in annual recurring revenue (via upload package purchases)

Comparisons of these numbers for customers with Genie subscriptions vs. customers without Genie subscriptions could also help illustrate how my redesigned upload flow impacted the above metrics without the influence of Genie.

Interactive Prototype

Prototype demonstrating the finalized flow that I designed for uploading off-platform research (start by scrolling down).

My Role

I started this project in November 2023 as the Design Lead and worked in a small team consisting of a Product Manager and an Engineer Lead. I was responsible for all UX and UI design from end-to-end, up until I handed off my designs to the Engineer Lead.

Responsibilities:

  • User flow diagrams
  • Low-fidelity wireframes
  • High-fidelity wireframes
  • Interactive prototypes
  • Design reviews w/ product team and stakeholders
  • Annotated UX & UI spec doc for engineers

Approach

I began this project before all of its requirements were officially defined, with the understanding that additional ones would be provided later by the Product Manager. The only requirement I had at the beginning was that the new upload flow must support multiple files per upload.

To kick off my design process, I performed 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

"Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another."

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

Numbered callouts (1-4) depicting the steps required to begin the existing file upload flow

2. Flexibility and Efficiency of Use

"Shortcuts — hidden from novice users — may speed up the interaction for the expert user so that the design can cater to both inexperienced and experienced users."

Not only are users forced to start uploads from the Recordings page, they also must specify the language of the file before it can be uploaded. The amount of clicks this requires makes for a tedious experience. At minimum, it takes 9 clicks to upload a file when starting from the platform home page and 7 clicks when starting from the Recordings page.

Breakdown of clicks needed to start an upload:

  • 4 clicks to navigate to the flow entry point on the Recordings page
  • 4 clicks to select a file to upload (begin flow, indicate language, select file, etc)
  • 1 click to confirm and begin the upload

3. Visibility of System Status

"The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time."

After a video file is uploaded to Discuss it must undergo post-processing before it becomes visible in the platform. Post-processing often 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.

Ideation

User Flows

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.

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.

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.

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:

  1. 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.”
  2. The Filestack upload dialog must remain open while an upload is in progress. Closing the dialog will cancel the upload.
  3. 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

Final designs for various Upload Section states (empty, uploaded, error, limit reached)

Final page designs (Overview page empty state, Upload in progress state, Overview page uploaded state, and Recordings page with new dropdown menu design)

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.