File Manager Redesign

Helping users organize their files better

My roles included UX and Visual Lead

Link to AutoCAD Web for the live demo

The file manager is a standard product feature where small improvements can make a big difference. It helps professionals to organize, store and share complex projects containing multiple files – all through a web-based app. Often overlooked, a best-in-class file management system helps users to work far more efficiently.

Redesign the UI to delivery a unified design

For this project, I redesigned the entire user interface as the UX and Visual Lead designer. After completing some user tests, we concluded that we must redesign the system to improve the interface and interactions. The new design delighted users with a more polished, streamlined experience. The redesign also circumvented some of the performance and latency issues common to online applications.

The design team closely observed the old product’s core behaviors to ensure that the design brought a consistent experience throughout any given user task. The major goal was to reduce the cognitive cost and deepen the product’s impression by delivery a unified design across the product’s structure and UI elements.

The team incorporated updates to the visual, interactive and logical elements for the following components:

Grid system, layout, header, thumbnails, loading animation, dialog boxes, search, download, delete, upload, fly out, tool tips, fonts, button styles and more. Samples of the visual comparison are depicted below.

1. File Uploading Dialog Box:

Reorganizing the layout and structure. Updating the messages. Improving the visual. Ensuring the uploading status easily to read and understand.

2. Thumbnail View:

Applying a new responsive grid system. Improving the relationships between the preview image and texts. Fixing the spacing issues. Updating the icons to the modern design. Enhancing the file management and interactions.

3. "Empty Folder" Message:

Updating the icon presenting "empty folder". Adding a bit humor with this message.

4. Header:

Reorganizing the information architecture of the header. Updating the visual. Relocating the search box to improve the space usage.

Simultaneously, we introduced the company’s branded design system to this legacy interface for a consistent brand experience across multiple products. I also worked with another designer to devise a design strategy for a complex hierarchical folder structure by using thumbnail previews for faster browsing.

AutoCAD file manager after the redesign:

This redesign included an improved layout and information architecture, a refreshed UI and introduced the modern visual language to the interface. These changes made the file manager easer to use by creating a more holistic and connected experience that was validated with subsequent user studies.