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
This 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.
The original platform’s annotation feature was… a lot.
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.
First, we re-imagined the experience.
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:
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.
Regarding those updates, for those who are curious… after many discussions with stakeholders as this feature was being developed, we decided on an interim solution for V1 of the platform: When accounting codes are updated in a section that contains an annotation, that annotation remains but is detached from the specific text because the system cannot tell what parts of the content changed. In the side-panel and on the annotations page, the annotation has an alert icon appear beside it. When selected, a dialogue box appears, telling the user that the code has been updated and they are welcome to copy their comment and re-apply their annotation. The alert icon remains until the user deletes the un-attached annotation. This allows the user to copy and paste their original comment and assign the original category to the new annotation. In the future, the goal is to either use AI to help assign the annotation to a new text selection for user approval or allow the user to select a new selection to attach to the existing annotation.
But then we had to sell it.
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.
Horn Tooting Time!
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.
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.