Laserfiche Cloud

A content management solution transforms your office into a digital workplace

How it works

The start point is a 12 years old desktop software that is very cumbersome and complex to accommodate different persona and use cases, lots of functionalities are out of date and very hard to use. We decided to redesign the UI as well as the experience, to streamline, simplify, and refocus on making users' day to day task efficient.

Folder list view
Document detailes view

"The goal is to design a responsive web app to simplify the experience and gain a wider customer base."

People from a myriad of disciplines – marketing, design, technology, product management and strategy – gathered around the table in teams to deep-dive into the problem space of the product. Through quick iteration of sketch, present, critique and refine, we arrived at a diverse set of possible solutions and prioritized the features, all the while working through assumptions, user needs, feasibility and execution.

Role based user needs

Smiley face
Record Manager

"I spend 80% of my time in Laserfiche scanning documents and managing record life cycle. It takes me a lot of time everyday to manually fill the metadata and to collect the information I need on each document to decide what operations needed on these documents such as cutoff or destroy."

Smiley face
Financial Advisors

"I travel to meet out of state clients. I want to have easy access to the client's documents such as annual review report when I'm traveling. I sign or approve a document occasionally. I just want to spend less time gathering document so that I can spend more time to talk to my clients."

Smiley face
IT Admin

"We use it as a document achieving tool, anything imported to Laserfiche won't need future edit. I actually don't know how to set up the import profile for our record managers. I know it will save her a lot of time dealing with metadata."

Design for everyone

The right pane and the toolbar is contexual for everyone to use. User can switch the view by switching the tabs on the right pane to change metadata, preview the document, sign or approve a document. We organized the often used metadata into one place. This metadata summary pane provides information to meet different users' need, it also plays an educational role from where a user can go to the document timeline, detailed fields, business process.

Customize the view by switching the tabs on the right pane
Document details view with detailed fields pane open
Metadata summary pane, a window to the main features
Signature view
Take quick actions anywhere using the business process pane

Design for the special ones

Since the Record Manager is the dedicated person in a company who spends most of her time managing the document life cycle. We want to make her experience delightful. After interviewing, we summarized the actions she takes on each document life cycle, and the information needed to make a decision on whether to operate. The idea is to design a special workspace for her to easily find the document she wants, take batch actions on the eligible documents, and oversee the process and organizational efficiency.

Records life cycle
Actions
Information related to decision making is well organized and presented along with the document details view and list view
Record managers can quickly go through the document with all the informations needed on the right side; take batch actions using the call to action button in timeline in the information pane or contextual toolbar at the top or the right clicking on spot; and switch to another category using the customizable filter on the top left to take other actions.

Setting up an import profile is hard. I want to provide an easy and simple experience for IT admin to set up the profile and save the Record Manager's time for inputing metadata. I designed surveys using Google Forms and analyzed the result with the team, using the data we managed to clean up the features and streamline the process. I prototyped the new user flow.

Document Identification: Form recognition and validation on sample documents
Matadata Autofill: Metadata extraction and validation on sample documents
Import document and fill in metadata is a one second job for Record manager now

Distinguish the experience

A good example is the new search experience. The initial search redesign is to add a side by side editable search for Record Managers to easily tweak a search criterial. But the whole UI change after hiting a search button scared our common end users in different departments such as Financial Advisers, HRs, Accountants, who barely use the advanced search. So I distinguished experience, only advanced search will trigger the side by side edit, quick search won’t.

Basic search result
Advanced search result

Responsive across platform

UX Consistency Guildeline

The behavioral and visual consistency is a great way to increase usability of the UI design. UX team worked with developers and PMs and define UX standards 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
UX live guideline

Review the implementation with developers on a scrum base. Working with developers, we built a UX live guideline for the team to refer. I tend to find the code example of the exact animation I wanted for the developers and answer all the related questions.

Smiley face
Smiley face Smiley face
UX Review

Interview, Affinity walkthrough, Brainstorming studio

Smiley face
Through onsite interview and phone interview, we collect user data
Smiley face
Summarizing behavior patterns and pain points with executives
Smiley face
Bring every team member onboard

Comparative analysis

Smiley face

Survey

Survey was sent to both roles (Record Manager and IT admin), to find out what feature is important for them

Wireframing

Smiley face


Prototyping

I have created prototypes using invision and axure to give the team a better idea of how it works. Through iterations, team member's feedback is incorporated into the final design.

Smiley face

Contextual task test with end users

Smiley face
Smiley face