Smiley face

Laserfiche is an enterprise document management system, used mostly by government and justice systems to store paper documents securely, locate information quickly and route document automatically to specific users for approval or data entry. We have this 12 year-old product that is very cumbersome and complex to accommodate different persona and use cases. We decided to redesign the UI as well as the experience, to streamline, simplify, and refocus on making users' day to day task efficient.


We interviewed current users from different market segments to understand their workflow, pain points and how they are using laserfiche. Starting with financial advisors, we conducted 13 interviews. Affinity Diagram is used to group information into categories, from where we see patterns and trends.

Smiley face

Persona

After the interpretation, persona is created to illustrate our target demographic and their goals.

Design studio

Design studio the best way to gather product owner, developers, QA, designers and writer to work on the same problem. Based on the findings from interview, we brainstormed possible solutions and prioritized the features within the whole team. We are able to get ideas out of different roles, and getting team member on board with the new design.

Smiley face

Comparative Analysis

Smiley face

We looked at various competitor products and highlight what advantages we have and what we lack. We found out that most enterprise document management software provide only folder structure, but very few allow customers to create metadata along with document. We saw the opportunity to help users create metadata and use it efficiently. We also did the responsive research.

Smiley face

Paper sketch

Smiley face

Ideation

After all the data gathered, I like to sketch out my ideas using pencil and paper. It's the best way to quickly draw out different possible solutions and see if it works.

Low-fidelity Prototypes

Wireframe Example
Smiley face

Prototypes

I have created a prototype for tablet responsive to give the team a better idea how it would work. Through iterations, team member's feedback is incorporated into the final design.

Invision
Smiley face

Comp & Consistency

Smiley face

Specs

After the visual designer put together the UI elements, I created mockups and specs so developers can start the implementation.

UX standard & Consistency

During development, I work with other designers to define standards and behaviors for different UI element. Reviewing the latest build to ensure the behaviors meet the standard is one of my daily task. It's a major goal of mine to ensure the product suite is consistent not only in Laserfiche Cloud, but in other products as well.

Smiley face

Usability Testing

We tested out our new design internally first and fixed most of the findings first so we can get the best out of user testing with real customers. We set up a booth at our annual Laserfiche conference to test the implemented product. We conducted usability test with 10 Laserfiche users, both old and new. After the test, we present the findings and recommendations to the team.

User Study Findings
Smiley face

Final Product

The product is currently in beta. We have invited several beta users and resellers and gathered feedback from them. The feedback has been very positive, our reseller express they can't wait for the official release to come out. They already have several customers waiting in line to start use it. Currently I'm planning on the next user testing to get users feedback.

Smiley face

Folder browser

Folder browser is a three pane layout that the user can easily navigate within. It has the quick path bar that a user can click or type in to go to a recent place. Action bar is at the top right corner and is contextual.

Smiley face
Smiley face

Metadata pane

We integrated all the metadata dialogs into a single pane, user can toggle it on or off. Advanced metadata is on demand.

Document viewer

It is used for the user to have a look at the details. Users can view the pages, click through thumbnail, and stamp the annotate. Users can customize the view by clicking on "Display Options".

Smiley face

Search

Search is another big change. We noticed that the current search behavior is really complex and we want to make it easier to use. The most often used is the quick search on the top, we made it a lot prominent. Once clicked on the Advance search, the dialog pops up with the most common advanced search type displayed at default. Users can configure their search by adding different search types.

During user study, user expressed the ease of use of advanced search comparing to the old design. And they appreciate the default set to get them started.

Smiley face

Responsive

Smiley face

Final Product Demo