Annotations for Accountants & Auditors

CLIENT

Deloitte

ROLE

UX/UI Lead

SPECIAL NOTE

I am able to share actual screens in a live interview, but all screens shown here are simply "Proof of Concept."

Background

The Annotation feature was part of a larger initiative to build a new research portal for accountants and auditors at Deloitte. The research portal contains a massive amount of accounting and auditing content. The previous iteration of the platform had annotation abilities, so an annotation feature in the new portal was eagerly awaited as well as necessary for parity.

TL;DR

As the UX/UI Lead, I conceptualized and designed an annotation feature for the new Deloitte Accounting Research Tool for accountants and auditors. The previous platform's annotation system was complex and cumbersome, requiring users to toggle between the text and their comments. Collaborating with designers, developers, and product owners, I developed a streamlined solution inspired by familiar tools like Adobe PDF and Microsoft Word. I secured budget approval for a high-fidelity prototype, which was crucial in convincing detail-oriented global stakeholders and facilitating user testing.

The new design was a success, with 94% of users rating it as their favorite feature and 100% recognizing it as an improvement over the old system.

1. Context Setting

Wireframe showing greyed out boxes for toolbars on the top and left side of the screen. On the right two thirds of the screen, sections of text are arranged vertically and each section has icons to comment, save, or share.

Complexity
On the original research platform, each paragraph of information in each codebook was grouped with its own icons for highlighting and leaving comments on the paragraph. Comments were then stored on a separate page that linked back to the source paragraph.

The reason for this design was solid. Accounting and auditing codes are constantly being updated, sometimes even just single words or commas. When this platform was built, an update to a paragraph in a codebook meant that the entire codebook was considered updated and therefore any comments or highlights would be removed. Separating the codes out into individual paragraph objects allowed comments and highlights to be tied to that section rather than the entire book.

This solution fixed the issues with updates, but was overall clunky and difficult to use. It made the codebook itself overly complicated and difficult to read and it required the user to toggle back and forth between the code in context and the comments they had left.

2. Exploration

I worked with another designer, our development team, and the product owners at Deloitte to brainstorm what a new solution could look like. How did other programs, such as Adobe PDF and Microsoft Word, handle annotations with large amounts of text? What was conventional and would be intuitive to our users coming in? What was actually possible and how could we avoid the issues around the codebooks being updated?

I created a user journey based on our conversations and we landed on the following:

Annotation User Journey: the user selects text and a tooltip allows them to copy, share or annotate. When the user selects the annotation icon, they are able to select a category, add comments, and save. They are also able to edit or add categories from a dropdown menu. If the user just saves a category, the text is highlighted with the color. If the user leaves a comment, a clickable comment icon appears at the end of the selection. When the user selects this icon, an annotation panel opens to the right and the selected annotation is featured. The user can filter the annotations or close the panel. When a comment is selected, the user is able to edit the category or comment or delete the annotation. If the user selects another comment in the panel, that comment is now featured and the page scrolls to the connected text.

This solution allowed the user to annotate the specific text that they were interested in without taking the extra space to include icons with each text section. Having a side panel allows the user to navigate all the annotations for a given article without leaving the page, though I also provided an Annotations (as well as Bookmarks and History) page to allow users to see and search all their annotations from one spot. Since annotations were tied to sections still in the programming code (not to be confused with accounting codes!), when accounting codes updated we were able to have the updates only affect the annotations tied to the updated text.

3. Design & Refine

The thing about this entire research portal initiative is that there were a lot of global stakeholders. These stakeholders were the individuals who ran the accounting or auditing groups in their country and were all used to having their priorities prioritized across the board. These people were also accountants or auditors by trade and therefore very detail oriented (by nature or training)! To further complicate the call-in process, these stakeholders had been using the previous platform for 10+ years and were almost universally very attached.

In early individual meetings with some of these stakeholders, it became clear that I needed to build out a full, high fidelity prototype with correct data in order to minimize distractions. I also found that, while my team could talk about functions and interactions and be on the same page, the stakeholders needed to be shown specifics rather than told. I lobbied for the budget to build out a full prototype and was successful in presenting my case.

With the full prototype in hand, I made multiple presentations to groups of stakeholders. I was able to advocate for our design choices and gain full approval. We were also able to use the full prototype in user testing.

New Research Tool view, with no text selected. There is a navigation bar across the top and on the left side. 75% of the screen is text from codes. The code number (1.1) is seen as well as the sub-section numbers (1.1.1-1.1.3). The sub-sections are indented.

4. Validate & Iterate

Users overwhelmingly loved the designs.

94% of users rated the new Annotations capabilities as their favorite feature in the new tool.
100% of users rated the new Annotations as an improvement over the previous tool.