‘File Uploader’ Design Pattern

Sr. User Experience Designer

Key takeaway

Designed reusable file uploader with drag-and-drop capability, standardizing upload experiences and accelerating development across products.

about

The File Uploader component supports three primary use cases: firmware updates, backup restoration, and appliance updates. The design ensures scalability for future use cases beyond these initial scenarios.

This project addressed two critical problems: First, inconsistent file uploader experiences across products due to siloed team development. Second, lack of drag-and-drop functionality—a modern standard explicitly requested by users.

File Uploader with instructional text (basic style) The below component is a basic file uploader. It describes a lot of the functionality and elements listed below. It is designed to be easy to use, familiar, with information set in a logical and natural order.

From stakeholder and team discussions, a baseline file uploader design is established. For example, it will have the following affordances and elements.

  • A file staging area. A drop zone area for the file to be staged.

  • A browse button for choosing a file.

  • Footer action buttons, e.g., Add, Upload,...

  • Other capabilities includes, a message banner, action mode options and a confirmation box.

  • Error states and text

  • Web & keyboard accessibility

upload_1.png

File Uploader with Warning message on a Banner

Below is a dialog example with a warning message or instructional text with a link.

upload_2.png

File Uploader with Mode Options

Referenced from a real world use case, this pattern enables the user to choose a mode to upload a file or select the mode in which a file is already staged by the system or from a previously staged action by another user.

upload_install.png

File Uploader with double confirmation

Shown here is a design pattern example and a real-world use case. This double confirmation pattern on a dialog is used when there are actions that might have major implications for the system and when initiated and cannot be canceled or undone after it has started.

upload_4.png

WHAT OTHERS ARE SAYING ABOUT JET AT HEWLETT PACKARD ENTERPRISE

Jet has been passionately driving the UX for Private Cloud Pack with great efforts! He has been giving valuable design suggestions for Skywalk, OneView and other customer issues. Jet is great in maintaining a remote partner relationship and he ensures that communication is always alive. I personally appreciate the extra effort he makes to ensure that we have UX discussions during our day-time.

Thanks, Jet for helping Bangalore team and for giving good UX to the pack.

Sr. Design Manager, Bangalore, India
Design partner at Hewlett Packard Enterprise

Jet is performing with opportunities for personal growth into areas of leadership. His contributions across design systems and throughout the organization are recognized, and he is seen as an excellent resource to execute on designs in both Piano design framework and Grommet design framework. Jet's potential lies in his ability to expand influence by asserting leadership and continuing to grow communication channels with both internal and external partners.

Sr. Design Manager, Fort Collins, CO, United States
Managed Jet directly at Hewlett Packard Enterprise

Passion for Customers - Acts as a trusted partner, providing relevant advice


In the UX designer role, Jet is a great advocate for customer experience.  This is a quote from a feedback provided by an Atlas team member “Jet is committed to delivering the best experience to customers, as his role demands.  He is detail-oriented, carefully considering the effect each of his choices has on a user”.

Sr. Design Manager, Palo Alto, CA, United States
Managed Jet directly at Hewlett Packard Enterprise