Hightail annotation

OVERVIEW

SKIP TO: PROCESS • DESIGN • RESULT

At the core of Hightail is the ability to bring together designers and their clients online to comment and annotate on visual media. However, as Hightail matured from serving individual consumers to large businesses, it was clear that our lightweight features needed an upgrade.

I consulted with my colleagues in other departments to connect me with current customers, conduct user research, narrow down scope, and give insight into feasibility and details of the UX. I could not have done it without them.

PROCESS

SKIP TO: OVERVIEW • DESIGN • RESULT

User research + synthesis

I surveyed users on Hightail, sat in on sales negotiations and customer support calls to analyze what teams needed. I also read creative service industry reports to get insight into trends and the overall market. Here are some major insights on what creative service teams want:

Competitive + analogous analysis

When compared to other companies that have annotation and commenting features, Hightail sat on the light-weight end of the spectrum.

However, products specifically aimed at businesses, have a much richer feature set. For example, Frame.io targeted at film/video industry, has features such as sorting and filtering comments, the ability to draw any shape on the document (not just a box), and complex UX regarding setting timestamps on time-based media.

I also took a look at analogous companies such as Usertesting.com, because they had interaction worth noting:

Defining different behaviors for different file-types with job stories

Many competitive companies focus on just one specific file-type, such as Frame.io for video, or Ziflow for multi-page. I also observed that users talked about different behaviors depending on the file-type. I wrote job stories to help define what these behaviors should be:

Defining scope and sprint-planning

I wrote the scope document of each task, expanding details as I designed and iterated.

DESIGN

SKIP TO: OVERVIEW • PROCESS • RESULT

Freehand annotations

Since the launch of the product in 2015, Hightail’s main annotation feature was the box; a user could draw a box anywhere on an image and associate it with a comment:

There were many limitations with the simple box annotation:

• Limit of one box per comment; users could not select multiple regions.

• Copy editors had trouble highlighting a specific line of text using a box.

• No way of leaving symbols or highlighting regions using other shapes.

.

Keyboard shortcuts

Switching between drawing tools can be tiring using just the mouse, because a user has to drag their cursor off the canvas, switch tools, and drag their cursor back to the canvas. I created keyboard shortcuts so they can easily switch between drawing tools. I included a keyboard shortcuts menu easily accessible from the bottom of the screen.

File comparison

On Hightail, a user can version over a file by uploading a file with the same name. However, they could not easily compare the difference between version 1 or version 2, or pull up old comments. I created a file compare function that allows a user to compare 2 different files or versions of files:

Multi-page documents

There can often be up to 50 comments on a PDF, especially in a large organization. It’s important that users are able to navigate to a particular page quickly, see whether it has comments, and order the comments according to the page that they are on.

Timestamps on media

Before, the only way to associate a comment with a time on video was to annotate or draw something on the frame of that video; otherwise, the comment would be unassociated. I re-designed this interaction so that a comment would by default be timestamped, and comments for videos would be sorted by timestamp.

Timestamp ranges

Inspired by looking at the ability to create timestamp ranges at the analogous company, Usertesting.com, I designed timestamp ranges for audio/video in Hightail. Designing timestamp ranges required attention to detail in the micro-interactions that users who work with video have come to expect from video/audio editing software.

Redefining the zoombar

Previously, the simple zoom bar sat on the bottom of the screen and offered very limited zoom ranges. I set out to redesign the zoom bar to work for both image and multipage documents. I had to collaborate closely with the front-end developer to work out all the details of the final spec:

 RESULT

SKIP TO: OVERVIEW • PROCESS • DESIGN

The goal is to help some of our larger customers improve their experience with different media in our product, and ultimately improve retention of those customers. We hope to get further feedback from those customers as these new releases roll out, and compare NPS scores.

I have my own personal takeaways from this project. First is that any major UI changes of an oft-encountered functionality will encounter resistance, both from customers as well as internal stakeholders. But once everyone experiences the improved UX, most are onboard with the changes.

Second, I learned to design for volume. With larger customers, there are more files, more comments, more users etc. For example, I first designed approvals to the comment bar as an expanding accordion. But when you wanted to see comments on a file, you had to scroll past or collapse the approvals first. By switching to tabs, even if there are many comments, you can still easily jump to the approvals tab.