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.
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.
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.
Reorganizing the layout and structure. Updating the messages. Improving the visual. Ensuring the uploading status easily to read and understand.
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.
Updating the icon presenting "empty folder". Adding a bit humor with this message.
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.
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.
