making document markups efficient
WebViewer is PDFTron’s flagship document SDK product. It is a web application that has built-in document rendering and viewing technology, as well as markup features for customers to purchase. Developers and/or engineers would then use the technology provided to integrate and customize into their cross-platform projects for their end users to use with less effort. Therefore, the product consists of both back-end and front-end solutions.
To augment both the developers and end users’ productivity experiences, I was involved in redesigning the visual patterns to improve the efficiency for developers to implement, as well as specific product features for beginners and power users to use.
CHALLENGE
How might we improve the structure of the app to help developers build faster and a range of end users to use more efficiently?
OUTCOME
The product was updated with a strict predetermined layout system where developers can easily edit components to jumpstart their projects, and end users to customize their work environment.
SOLUTIONS
Viewing vs annotation mode.
Two modes are broken out to target different use cases. In viewing mode, developers can now have an entire bar to manipulate high level operations for a document, while end users can simply view documents without annotation tools in the way. As for the annotation mode, there is now a dedicated area for developers to add or remove tool functionalities with more space, and end users to access all the tools available.
Efficient panels.
Rather than having all functionalities inside a single panel, they are now broken out with their own set of features. This helps developers find where to make appropriate changes, and create greater efficiency for end users. For example, one can navigate quickly between pages in a large document and look through the relevant comments at the same time.
Other improved feature interactions.
Some more minor, but causes significances in the overall user experience of the product includes: combined a single and full search feature to one search, easier way to change ink colour for signature, using both icons and text to explain the different page manipulation options to alleviate ambiguity, page numbers are placed on the top centre instead of hidden in a blind spot at the bottom left corner, the operations of undo, redo, and eraser are made more prominent.
Design System.
Due to the lack of design documentation, the product’s design language was getting out of hand. As a result, I also developed a components library that encompases flexible layout structures with defined redlines to guide external and internal developers, as well as designers to build seamless experiences across devices. Furthermore, a dark and light mode was created.
PROBLEM
The company was losing leads to competitors and customers were complaining that the initial impression looked unfinished, UI behaviours were not expected, and it was hard for developers to make customizations.
Despite being a leader in the document rendering and markup technology, this provided an opportunity for a redesign by making incremental changes of not only improving the visual assets and layout, but to rethink the interactions of working with documents. Henceforth, the goal is to bring design at par with the technology offerings.
RESEARCH
Heuristic evaluation was first used to determine usability issues, along with competitor analysis to make comparisons. Expert interviews were also done to understand the rich history of the product and how different people use it. The problems are identified and analyzed below to the existing UI.
An overwhelming header.
The existing UI contains document viewing and annotation features on the same bar, which causes space issues when more features get added or if the application is used on a smaller device. Furthermore, the product is often embedded into another application, where there is even less screen estate. The default solution was to hide everything in an overflow tab, which made it difficult for both end users and developers to understand where to find items.
Inefficient workflows.
Changing tools and its styles is tedious and redundant as multiple clicks were required. Developers would also need to replicate the same interactions for each tool. As for colour presets, there was confusion as to why only colour presets were given to some tools, which also prevents developers from understanding when to use what.
Unorganized panel behaviours.
Page navigation features and comments were grouped under a single panel and can only be accessed one at a time. This caused users the need to switch back and forth between tabs when reviewing a large document with numerous pages.
After gaining contextual information, I lead a card sorting exercise among stakeholders to organize the type of tools we have available and how tools should be presented. We first determined the types of tasks at hand, followed by grouping tools and their order based on the tasks.
FINDINGS
Based on the analysis done, three key findings were determined as a basis to make improvements.
1. End users are having a hard time finding and switching tools with their tasks at hand due to hundreds of rich features that our product offers.
2. Developers are spending too much time trying to understand, integrate, and customize the product into their multi-platform projects due to a lack of flexibility and structure.
3. The UI needs to be able to accommodate various user types and use cases as we ship a document SDK product for a range of industries to embed into their applications.
EXPLORATIONS
After understanding the problems to address I stripped out the UI to its most basic information hierarchy to identify how to organize content better. As a result many important items were either all grouped at the high level which causes cognitive overheard, or some of the important items were buried in a lower level.
With the underlying architecture of the product in place, sketches, user flows and mockups were done to test and conceptualize ideas. The HEART framework was used to validate the success of the ideas, primarily gaging user satisfaction and usability.
Some iterations include using patterns of drawing software by putting tool customizations into a panel so that the annotation mode is at the centre of focus, having distinct sections of choosing a tool and changing its styles, being able to move the toolbar and tool menus, as well as offering slots to customize presets.
However, the ideas were not pursued due to varying opinions, disconnections in interaction, technical limitations at time, as well as time and effort constraints.
RESULTS
1. Positive feedback from internal user study and surveys among stakeholders.
2. Have 6 closed beta customers signed up and are getting their end users to try the updated product.
3. By simply sharing a demo, already got a few customers wanting to renew their licence for the new ui.