Upload & Download

Design the transfer UI for a product that handles both uploads and downloads. Treat this as two connected screens or panels: one for sending files in, one for pulling files out. The layout should make the current file, its status, and the next action obvious without extra explanation.

For upload, show how a user adds files, sees the queue, and tracks progress for one or many items. Include a clear idle state, in-progress state, paused state, success state, and failure state. If a file is too large or unsupported, the interface should say so in place and keep the original file context visible.

For download, show the same transfer language: what is available, what is active, how much is left, and what the user can do next. Make cancel, pause, resume, and retry easy to find, but keep them subordinate to the main status readout. If the design uses notifications or toasts, they should confirm completion without hiding the file row or card.

Think through accessibility and scale: readable text, visible focus, clear contrast, and a layout that still works when file names are long or several transfers run at once. This is a screen design exercise, so the finished mockup should feel like a real product surface, not a generic file picker.

Incorporate icons that users associate with uploading and downloading, like upward and downward arrows or cloud symbols, to create an intuitive experience.