image of Visier Analyses File Management System on a Macbook Pro

visier analyses file management system

A redesigned file management system for user created documents (analyses) in Visier’s primary application: Visier People. The goal is to improve on the existing file management experience to better help HR analysts effectively manage and delegate analyses to the right people.

problem

Before this project, the user experience for file management was difficult to navigate and lacked the core functionality of common file management systems such as Google Drive and Dropbox. The experience of creating, reading, updating, and deleting documents was inconsistent, difficult to access, and tedious to scan.

image of old analyses file management system

design process

research + audit

Before diving into user experience and interaction design, I analyzed the commonalities between existing file management systems and email clients. Examples I’ve looked at include: Google Drive, Gmail, Dropbox, and Jira by Atlassian. I identified common user interface and interaction patterns between each application to see how it might fit within our current design system, and made sure I understood the design decisions made.

explorations

After auditing existing file management systems, I created multiple iterations on Sketch to explore different visual and interaction options and prepared them for design feedback sessions.

image of analyses Sketch iterations

peer feedback

An important aspect of this project was getting feedback from other designers when there wasn’t a clear-cut choice for a particular iteration. An example was when I had to choose between two approaches for a multi selection pattern: an adapted version of Dropbox’s pattern versus Google Drive’s pattern. Dropbox uses a checkbox layout for multi selection, while Google Drive uses the standard desktop file manager metaphor for multi selection (‘shift’ key multi-select).

image of Dropbox multi selection pattern image of Google Drive multi selection pattern

After our feedback session weighing out the pros and cons of each approach, I came to a conclusion that Dropbox’s pattern better aligned with our application, since Google Drive’s pattern is heavily dependent on a custom right click menu that allows the desktop file manager metaphor to work effectively. Our application currently doesn’t support a custom right-click menu, so Dropbox’s pattern better aligned within the scope of the project.

image of analyses multi selection

solution

optimizing navigation

A common pattern that was leveraged from other file management systems was the use of different tabs or sub-sections to allow users to easily navigate and access documents based on ownership type (user created documents vs shared documents). We decided to use tabs instead of a dropdown menu since there weren’t a lot of options we needed to surface; in other words, we didn’t have to hide the options because we had the screen space to display it all at once.

image of optimized analyses navigation

revealing meaningful information

What was missing in the previous experience was the ability to easily scan and identify documents based on key metadata. Aside from what was already existing in the previous experience (user generated document titles), we decided to display other key metadata (user generated subtitles, date modified, and document owner) based on what’s commonly displayed on Google Drive and Dropbox.

image of optimized analyses metadata

surfacing file management functionality

In the previous experience, a number of key actions that are available when entering an individual document are not available in the list of overall documents (analyses room). Since we want these actions to be consistently accessible across different surfaces, we decided to leverage these actions in the analyses room as inline actions for each individually-listed document.

image of surfaced analyses actions

reflection

Apart from working on visual design, I had the chance to work on a full feature UX project under the guidance of my supervisor and manager. I’ve learned that projects require numerous feedback sessions not only to consider every detail within the feature, but also to consider the details of how it might affect existing features within the current application. Due to project deprioritization, I wasn’t able to directly work with developers to see this project implemented; regardless, this project was a valuable experience that helped shape my understanding of user experience design.

next project: visier ui library →