Jotter1

Background

An Ancient Legacy Jotter Tool

Legacy Jotter was ancient in visuals and usability, but did have some benefits. It's persistent usefulness led to a group of core superusers that heavily relied on this functionality in their day-to-day work.

Legacy Jotter is antiquated and difficult to use, but has some useful features.

Legacy Jotter's Benefits:

Integrated with stylus/tablet, common choices for superusers
Few clicks are required to navigate the tool
User can document on more than one template at a time

Legacy Jotter's Challenges:

Difficult to scan and search for templates
Canvas size was often too small for users to add annotations; users needed to create their own templates just to have enough drawing space
Not designed for repetitive documentation - documenting on the same templates, with the same markings, for multiple patients
A frequent bug factory

The Internship Re-Design

The summer internship team was tasked with creating a new Jotter tool in React and bringing it to parity with the legacy tool. They were able to go above and beyond and explore additional features beyond parity, a critical one being the Labels feature.

In his research, the UX intern Colby identified that the switching between stylus and keyboard was a pain-point for our tablet users. Instead, they might opt to handwrite annotations, which has space and legibility limitations. He and the intern team introduced the concept of labels, which were saved text snippets that could be reused across patients.

The parity+ Jotter design created by our intern, Colby

Label creation is possible in the top right corner of the canvas

Usability Testing Revealed New Problems

In fall of 2022, after the summer internship season had concluded, I resumed ownership of the project to bring it to completion. Though the intern team had made substantial progress and had created a running app, there were outstanding design and technical questions to be answered. I conducted a series of usability tests to pressure test the new Jotter and identify critical areas of improvement. Our core questions were:

Are users able to navigate around the new tool with their existing familiarity with Legacy Jotter and other drawing applications?
Are there any usability challenges with navigating around an infinite canvas? (introduced by TL;Draw)
Are there any usability challenges with the new Label tool?

Usability Findings

Our users are not familiar with design or drawing software

Users had issues identifying the tool bar icons, especially the Shape icon
They also had great difficulty navigating an infinite canvas, and would easily get "lost" and uncenter themselves from the template image

The new Jotter lacked efficiencies that were found in the legacy tool

Despite the cleaner UI, some users found it more burdensome to search for image templates from the dropdown rather than selecting with one click.
Users had issues finding features that were not grouped together, like undo/redo and the labels functionality

Labels lacked functionality that they have today with the Text tool

One user mentioned that she likes to match the color of her labels with the color of the pen drawing. Another expressed that she uses very long labels and was concerned they would not fit on the page.
Two users struggled with the drag-and-drop of labels

Overall, it was clear that athena's tool needed to be designed for the specific use case of anatomical annotations
While TL;Draw was a massive development boon, it offered too much drawing capability. Jotter was your typical MS Paint or whiteboarding tool. With these findings, I realigned the team on the need to build a tool that allowed quick, repetitive annotations on anatomical images.

Improved Designs

Redesigned Tool Bar

I regrouped and labeled the icons in the tool bar, with on tools on the left and canvas-level changes on the right. I also updated the Shape tool, which originally opened a sub-menu that contained different shape options. To improve recognizability and efficiency, I laid out all the shapes in the toolbar and used a dark stroke color to distinguish the shapes from typical icons.

Labeled icons in the tool bar; shapes are displayed without a sub-menu to reduce clicks.

Improved Template Selection

In testing we observed that users preferred to either 1) queue up templates before the exam and delete unused ones as they go, or 2) only document on one template per type of visit. Users never wanted to draw on a blank canvas without a template. I opted to design a 2-stage template selection.

Users can search, but the design optimizes for point and click.

If multiple templates are selected, they are displayed as "pages" in the left panel.

Fixed canvas size

Instead of allowing users to pan around the canvas using scroll bars or touch pad, I locked down all panning and opted for zoom in and out buttons. This allows users to gain more drawing space if needed, but eliminates the ability to get lost on the canvas.

‍

Label creation tool that integrates with the Text tool

Instead of investing more development effort into the Label feature to bring it to parity with the Text tool, it seemed much more efficient to combine the two. This would give Labels all the desired functionality while speeding up the time it would take to get this feature out to alpha.

In the new design, Labels are essentially saved text boxes; any selected text box can be saved as a reusable label. To remove the issues of drag and drop, labels are placed through 2 clicks, making it easy to use for both stylus and mouse users.

Final Musings

Unfortunately, team priorities changed and the Jotter project was shelved at the end of 2022. However, I cherish the time spend on this project and the ability to get out of our collective comfort zone to work on such a specialized tool. I felt like I could flex my design abilities more when working on a feature that was so different from our typical workflows.

That said, the best part of this project was the user conversations. It was amazing to see our physicians' creative side; some had illustrated their own image templates when they found athena's content to be lacking. I also saw firsthand that our users do not shy away from anatomy whatsoever—nothing embarrasses them, unlike my poor developers who sometimes got a little more information than they asked for when observing our usability sessions :) It really increased my appreciation for our physicians' work.

yg

Jotter Drawing Tool 🎨