A multi-repository B2B document management system - UX and UI

Category: Web Interface

Date: Summer 2018

ABOUT THE CLIENT

A global enterprise solutions and technology company that collaborates with clients by providing products, services, support, and training to put unstructured data to work. Utilizing best-in-class technologies, the company has successfully implemented thousands of business solutions across a diverse spectrum of organizations of varying size and vertical focus in order to meet aggressive business needs.

PROBLEM, REQUIREMENTS, AND GOALS

The company is in need of a new B2B cloud-based document management system based on multiple repositories, such as Amazon S3, Web Center Content, CEC, etc. Besides being multi-repository, the system offers users with various, paid add-on widgets, such as Redaction Manager used for redacting sensitive information out of the documents, Retention Manager used for managing documents lifespan, eSignature, eForms, etc.
The system needs to cater for different user types, being that some businesses orient more on data and text-heavy files, while others need a more visually oriented interface for images and other media files.
The system offers auto-classification of files, tagging and organizing files using AI analysis of file content and context.
Please note that there has to be a way for users to organize files for themselves as well, without disrupting the automated system logic.

DESIGN PROCESS AND SOLUTION

The design process started with an in-depth analysis of current B2B and B2C document management systems. Drawing from both their strengths and shortcomings, the sketching and wireframing process started, iterating each version with the client and refining the experience to cater to our specific needs while still retaining a familiar and easy-to-navigate user flow.

The interface comprises of the main left side navigation with all the files together, as well as separated by the repositories which they belong to, and the custom color-based tagging area used to organize files in a custom manner for each separate user.
The main area is used to preview folders and files in a list, tile and “teamCM” view, the latter being a compound view providing users with most important file metadata and a file preview at the same time.
Search function offers basic search abilities providing users with search suggestions, recent files, and most accurate query results, with an advanced search being just a click away under the arrow in the search field. The right-most panel is used for actions related to the selected file(s), while the bottom right area features icons with available add-on widgets. The bought and ready-to-use widgets are displayed in full color, while the dimmed out ones are here as a constant reminder to the users that they are available to enhance the system. Clicking on the bought add-on icon opens the widget in the right overlay tab (with the ability to open each in full size in a new tab) while clicking on the dimmed icon triggers a pop-up window with pricing options for the selected widget.

The UI is designed to give users with a clean, modern interface that is pleasant on the eyes and easy to visually scan through. The pastel color palette discretely divides the system into sections, and at the same time differentiates the look and feel from default material-design based interfaces.