Tool Style Panel

Why the redesign?

In the previous implementation, when users selected a tool to create an annotation, such as the highlighter tool, it would activate an additional set of four highlight tools, each providing options to preset colors or properties. The problem was that these settings only applied to newly created annotations and couldn't update existing annotations on the document, requiring a different user flow. For example, if there was already highlighted text on the document, selecting the highlighter tool and updating the color from the preset tools wouldn't modify its properties. Additionally, not all users needed a set of four presets, resulting in unnecessary space consumption in the toolbar.

Previous Implementation

The primary objective of this redesign is to provide a more efficient means of creating and editing both new and existing annotation.

Market Analysis

I conducted a market analysis among the top 6 competitors of PDF editors to compare annotation editing methods and evaluate their overall user experiences, highlighting the strengths and weaknesses.

Method

Strengths

Weaknesses

Flyout Menu

• Similar tool types are grouped together under one flyout menu

• Unclear how to edit existing annotations at first
• Requires double clicking into annotation to edit colors and properties

Flyout Menu

• Closely associate with selected tool

• Toolbar shifts every time a tool is selected to accommodate the extra '...' (more) button

Panel

• All tool properties easily available in the panel
• Panel can be closed but user can still modify selected annotation

• Cannot edit tool properties before drawing on document

Panel

• All tool properties easily available in the panel
• Each panel categorized and easy to use

• Not many

Toolbar

• Each property has its own button on the toolbar. Ex: color and stroke are individual buttons

• Many tools in one toolbar
• Color selection far from tools
‍

Toolbar

• Tool properties are always at the top of the screen, easily accessible

• Has a multilevel toolbar
• Requires a few selections before users can change tool properties

My main finding was there wasn't one method that was particularly favored. However, one competitor stood out as it offered a strong overall user experience for creating new annotations and editing existing ones. This discovery highlighted the need to refine our approach to editing tool styles. Building on the insights gathered from my market analysis, I began with some design explorations focused on the top two methods: the panel and flyout menu. Given our existing use of a flyout menu approach, my design exploration centered on finding ways to enhance its efficiency.

Exploration

High Fidelity

After thorough design exploration and design reviews with a senior designer, I created high fidelity designs for each user flow. The first design featured a flyout menu closely integrated with the selected tool, while the other utilized a button within the header to toggle the opening and closing of a panel. To gain further insights into which method our current customers would prefer, I created a prototype for each design to conduct user testing with a select group of our current customers.

Flyout Menu

The first design adopts a flyout menu approach, preserving familiarity with the old design. It enables users to edit tool properties directly with the selected tool.

Style Panel

The second design utilizes a panel approach with a toggle button for opening and closing, enabling users to keep tool properties visible during document editing. These properties apply to both new and existing tools. Users can choose to close or hide the panel when not making color changes while retaining the ability to edit the PDF.

User Testing

With the two design prototypes, we conducted user testing with 5 users who use WebViewer on a regular basis to see which method they preferred. Here are the key findings:

Initially, participants favored the flyout menu as it felt closely integrated with the selected tool. However, upon further consideration, they thought that the panel approach could offer more scalability and the potential for displaying more styling options in the panel in the future. This approach would simplify the editing process by eliminating the need to repeatedly open and close the flyout menu; instead, the panel could remain open until they decide to close it.

A pain point with the panel approach was that users found the style button felt somewhat disconnected from the tools as it was pretty far from the tools on the far left side. Although it wasn't immediately clear, after taking some time to explore, participants were able to locate it. Once identified, they found it to be easy to use.

Addressing pain points from the user testing

Based on user feedback, I continued to refine the style panel design to address the pain points mentioned during the user testing. The main issue was the feeling of the button being disconnected from the tools. From there, I worked on a few different iterations.

1. Tool Introduction

Introduce the panel by automatically opening the style panel the first time a user selects a tool. This approach would allow users to immediately understand the purpose and functionality of the style panel button without requiring any prior knowledge.

2. Integration with the tool button

Since participants in the user testing mentioned they liked the close integration of the chevron located next to the tool button, in this iteration, I merged the first two designs by introducing a button next to the tool to initiate the panel, creating a closer connection between the tool and its associated styling options.

3. Panel instantly opens

This approach involved removing the style button altogether. In this scenario, the panel would automatically open every time a user selects a tool. This design choice aims to eliminate any potential confusion or disconnection between the tools and the style panel.

Final Design

Revisiting our primary objective for this redesign, which is to establish an efficient method for annotating documents, we ultimately selected Option One, where the panel opens the first time a user interacts with a tool. This experience demonstrates to first-time users the purpose of the style button and clarifies that it is a separate button from the tool, enabling users to choose whether to open or keep it closed if they don't need it.

Exploring other tools within the product

Now that we've established the design approach for the panel interaction, I went through all the other tools offered in WebViewer to ensure this approach works with all tools. However, there were two tools where this approach would not work as expected: the signing tool and the stamps tool.

For these two tools, it is important that users have a visual representation of the signature or stamp they are selecting and applying to the document. Hence, the panel for these tools should stay open and not have the ability to be closed while users are actively using the signing or stamping tool to ensure a clear visual.
‍
To address this, these tools will perform a slightly different behavior. The panel will be controlled by the tool button itself, rather than a separate style button. This adjustment ensures that the panel remains open as long as the tool is active.

Signature

Stamps

Responsiveness

To ensure this works responsively on different screen sizes, these are the before and after's on a mobile phone.

Tool options

Signature Creation

Stamps Creation