Upload Progress Tracker

Upload Progress Tracker

Problem

Users uploading multiple files often feel uncertain
about the upload status, remaining time,
and available actions.
This lack of feedback can create frustration and
reduce trust in the system.




Goal

Design a simple and intuitive upload component
that keeps users informed throughout the
upload process while providing quick controls to
manage the upload.




Solution

Created an upload progress card displaying:

  • Number of files being uploaded

  • Upload progress percentage

  • Estimated time remaining

  • Visual progress bar

  • Pause upload action

  • Cancel upload action

  • Expand and more options controls




Design Decisions

  • Large progress percentage for quick status

  • recognition.

  • Time remaining indicator to reduce uncertainty.

  • Minimal action icons to avoid visual clutter.

  • Progress bar at the bottom for continuous visual feedback.

  • Clean card layout following Material Design principles.



Prototype Highlights

  • Progress bar animates from 0% to 100%.

  • Pause button temporarily stops progress.

  • Cancel button resets upload state.

  • Hover states added for interactive controls.




Outcome

The prototype improves upload transparency,
gives users more control over the process, and
creates a smoother file-upload experience.

Tools Used: Figma, Interactive Components, Smart
Animate, Prototyping

Problem

Users uploading multiple files often feel uncertain about the upload status, remaining time,
and available actions.
This lack of feedback can create frustration and reduce trust in the system.




Goal

Design a simple and intuitive upload component that keeps users informed throughout the
upload process while providing quick controls to manage the upload.




Solution

Created an upload progress card displaying:

  • Number of files being uploaded

  • Upload progress percentage

  • Estimated time remaining

  • Visual progress bar

  • Pause upload action

  • Cancel upload action

  • Expand and more options controls




Design Decisions

  • Large progress percentage for quick status recognition.

  • Time remaining indicator to reduce uncertainty.

  • Minimal action icons to avoid visual clutter.

  • Progress bar at the bottom for continuous visual feedback.

  • Clean card layout following Material Design principles.



Prototype Highlights

  • Progress bar animates from 0% to 100%.

  • Pause button temporarily stops progress.

  • Cancel button resets upload state.

  • Hover states added for interactive controls.




Outcome

The prototype improves upload transparency, gives users more control over the process, and creates a
smoother file-upload experience.

Tools Used: Figma, Interactive Components, Smart Animate, Prototyping