Skip to main content
UI Coach Logo
Back to challenges
Intermediate

Recover a Failed Video Upload

Design an upload and processing flow that preserves progress, explains failures, and gives creators a reliable path to publication.

Desktop web, Responsive web

The brief

Understand the problem

Background

Large video uploads can fail during transfer, verification, transcoding, or policy checks. A single progress bar hides which stage failed and whether retrying will duplicate work or discard metadata.

User context

Andre is uploading a 9 GB workshop recording from an unreliable connection. The transfer completes after two resumptions, but the high-resolution rendition fails during processing.

Product problem

Creators need confidence that their file and publishing details are safe, plus precise recovery actions for failures at different stages.

Objective

Create one upload journey from file validation through recoverable processing failure and successful publish readiness.

What to design

Define the experience

Required experience

  • Validate a file and confirm upload requirements
  • Monitor transfer separately from server processing
  • Resume after a connection interruption
  • Recover one failed rendition without restarting completed work

Screens and states

  • Upload setup
  • Transfer progress
  • Processing detail
  • Failure recovery

Core user flow

Follow the critical path

  1. 01

    Andre selects the workshop file and resolves a missing title before transfer

  2. 02

    The upload pauses when connectivity drops and resumes from the last verified part

  3. 03

    Processing completes for standard resolution but fails for high resolution

  4. 04

    Andre reviews the technical reason and retries only the failed rendition

  5. 05

    The video becomes ready for review with all metadata intact

Product rules

Requirements and constraints

Requirements

  • Label transfer, integrity check, processing, review, and publish readiness as separate stages
  • Save title, description, visibility, and caption settings independently of the media transfer
  • Show resumable progress based on verified uploaded parts
  • Offer recovery actions specific to the failed stage
  • Warn before replacing a file when existing captions or edits may no longer align

Constraints

  • Browser sessions may close before a large transfer finishes
  • Processing duration can only be estimated as a range
  • Only one source file can be active for this draft at a time

Reality check

States worth considering

The local file changes before upload resumes
Storage quota is reached after transfer begins
The source passes upload validation but contains an unsupported stream
A retry fails after some renditions are already available

Ready-to-use content

Mock data

Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.

File details

  • workshop-final.mp4
  • 9.1 GB
  • 3840 x 2160
  • 02:14:38 duration

Processing results

  • 360p ready
  • 720p ready
  • 1080p ready
  • 2160p failed: source frame timeout

Finish line

What to deliver

  • Four responsive screens showing interrupted transfer, partial processing failure, and recovery

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Color palette
#1B1A1A
#E9C5B7
#716561
#8B8C8A
#8C848C
Font pairing
Old Standard TTQuestrial

Old Standard TT & Questrial

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations