Annotations for Accountants

Annotations for Accountants & Auditors

Context Setting

While building out a new research portal for accountants and auditors at Deloitte, one of the features I designed as the UX/UI Lead enabled users to highlight and comment on the texts in the library.

The research portal contains a massive amount of accounting and auditing content that is constantly being updated, making it an especially complex challenge.

The previous iteration of the platform did have annotation abilities, so an annotation feature in the new portal was eagerly awaited as well as necessary for parity. However, while the annotation feature in the previous portal was designed with constant updates in mind, it was overall clunky and difficult to use and our users had many complaints about it.

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.

Wireframe of Annotations in Previous Platform

TL;DR

As UX/UI Lead for Deloitte’s new research portal:

I designed a modern annotation feature that let users highlight and comment on constantly updated content.
Building on familiar patterns from tools like Adobe PDF and Word, I created user journeys, collaborated on initial designs, and led iteration based on stakeholder feedback.
I won stakeholder buy-in by building a high-fidelity prototype and used it in testing, where it received overwhelmingly positive reviews.
I partnered closely with developers through build and solved a key challenge around content updates.

In the end, 94% of users called Annotations their favorite feature and 100% of them said it was an improvement.

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 would be a dream scenario? What was actually possible?

I created a user journey based on our conversations and we landed on the following, which incorporated both familiar interactions as well as unique useful actions:

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.

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.

Design & Refine

Another designer designed the initial visuals based upon my specifications and I took over from there, iterating on them as I met with stakeholders and tested the designs with future users. By the end, only the initial UX choices were retained as the “skin” of the UI was updated to match new brand guidelines

Validate & Iterate

The entire research portal project involved many global stakeholders, leaders of national accounting and auditing groups, who were detail-oriented and used to having their priorities prioritized. Many had used the previous platform for over a decade and some were deeply attached to it.

In early meetings, I realized that, while my team could discuss features conceptually, stakeholders needed specifics. These stakeholders needed to see a fully built, high-fidelity prototype with real data to stay focused and engaged. I successfully lobbied for the time allocation and built out a full prototype in Adobe XD (later on in the project, I successfully lobbied for the time allocation to move the project into Figma).

With it, I presented to multiple stakeholder groups, explaining our design decisions and securing full approval. We also used the prototype in user testing, with resoundingly positive feedback.

Build

With approval in hand, I wrote out detailed documentation for the developers, answered questions at daily standup, and collaborated 1:1 with developers to troubleshoot implementation issues.

It was during the build phase that the question of updates came up. With the codes being updated frequently, what would that mean for the annotations tied to updated or removed text? With input from developers, I designed a workflow that would both notify the user of updates and allow for re-assignment of the annotations.

Results

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.