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.

pdftron webviewer multi devices mockup


How might we improve the structure of the app to help developers build faster and a range of end users to use more efficiently?


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.


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.

pdftron webviewer viewing vs annotation mode animation on desktop
pdftron webviewer viewing vs annotation mode animation on tabletpdftron webviewer viewing vs annotation mode animation on phone

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.

pdftron webviewer new panels animation on desktop
pdftron webviewer new panels animation on tabletpdftron webviewer new panels animation on phone

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.

pdftron webviewer design system in light modepdftron webviewer design system in light modepdftron webviewer design system in dark mode

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.

pdftron webviewer design system in light modepdftron webviewer design system in dark mode
pdftron webviewer ui in light modepdftron webviewer ui in dark mode


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.

pdftron brainstorming workshop session


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.

pdftron webviewer old ui analysis

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.

pdftron webviewer old workflow analysis

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.

pdftron webviewer old ui panel analysis

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.

pdftron webviewer tasks card sorting exercisepdftron webviewer tools card sorting exercise


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.

pdftron webviewer key findings diagram


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.

pdftron webviewer key findings diagram

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.

pdftron webviewer initial sketchespdftron webviewer user flow

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.

pdftron webviewer initial mockup exploration of tool customizations in a panelpdftron webviewer initial mockup exploration of dedicated styling area
pdftron webviewer initial mockup exploration of movable tool menuspdftron webviewer initial mockup exploration of dark mode


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.