DNA Parts Messaging

@
Benchling logo
Problem
Benchling provides software for scientists to import and manipulate strings of DNA sequences. This is and important step in planning and executing experiments. An updated version of the DNA editor introduced more functionality for sections of the sequence users designated as "parts", but removed the ability to edit parts. We needed to communicate to users that for parts, editing is not allowed.
Solution
Created appropriate messaging for users to understand the connection between changes in sequence status and ability to edit.
Role
UX Designer, Spring 2022
Worked directly with the project manager and engineering team to define, develop, and deliver a decision based on existing problem discovery.
Background
"Parts" are a special class of entities in Benchling that help scientists give meaning to their DNA sequence. Beside my dismay at its unfortunately ambiguous name, they are quite useful when working with an otherwise meaningless string of As, Ts, Cs, and Gs. Users turn to parts for the following reasons:
  • Parts help users break down the makeup of large sequences into smaller, more meaningful chunks—sort of like section headers and a table of contents.
  • Parts help users get additional information about itself, like a footnote. Users will be able to see the same footnote no matter what DNA sequence contains the part.
Groups that are working on target sequences together like to use parts to keep information in sync and preserve data integrity across the team. If you've ever used components in Figma, you can think of parts in Benchling as similar to components in Figma. Both parts and components make sure the atoms that make up a larger item stay the same across the project or product for cohesion.

A common flow with parts

A flow chart showing importing a new sequence, identifying a part from the parts registry, and the imported sequence newly labeled as a part.

First, a scientist imports a sequence of DNA that they want to work with. Then, the scientist uses "Autofill Parts" to let Benchling automatically identify sections of the imported sequence that match with sequences registered by the scientist. Finally, the identified part is labeled and linked to all other instances of the part. The scientist can choose to unlink the part if they wish to change that section of the DNA.


A key product update removed the ability to make changes to parts in the DNA editor, and we needed to create messaging to communicate this to the user. By iterating with stakeholders, I was able to craft messaging that met my design goals of both continuous communication and maximized user control.
Design Exploration

Disentangling error messaging from status messaging

Previously, anything that appeared in the DNA editor was able to be edited. With the latest software update, DNA that was labeled as a part was no longer able to be edited.

The Benchling DNA editor showing a yellow warning pop up in the bottom left corner.

Engineers  put together an interim solution to communicate the lack of editing capability. However, the yellow toast that they chose to use was physically far away and not clearly associated with the parts designation. It was difficult to understand that the toast was appearing as a result of the user attempting to type or otherwise edit the part.

Furthermore, the yellow toast raised unnecessary alarm. In other parts of the product, the toast is used to alert users when there is an error such as an unsuccessful upload or inability to render a graph view. Not being able to edit seemed much lower on the error hierarchy.

Because the initial solution had been an error toast popup, I had initially thought about this project as improving error messaging. I realized after stepping through the intended communication and end goal, however, that we were not actually messaging about an error. Rather, we just needed to message about the status of a section of DNA — uneditable. There wasn't an issue being raised with trying to edit a part, just that the status of "part" didn't allow for it.

With this new framework, I considered toast alternatives that would indicate status change.

The Benchling DNA editor showing a scrolling mouse that has a no entry sign appear with the cursor as it moves over a part

One attempt was using a "no entry" symbol associated with the type cursor to indicate no typing. However, this solution was too broad. Other click actions, such as click+drag to highlight or right click, are still available. This does not clearly indicate that just editing was unavailable.

The Benchling DNA editor showing a part shaking to indicate error.

A different attempt used what I like to call the "Wordle shake" to indicate the area that would not allow the user to go forward with their action. However, this solution was jarring and did not follow the movement patterns of the rest of the product. Furthermore, it required the user to guess what was wrong.

The solution I decided on was a tooltip that would appear as the user tried to type. It provides explicit guidance for users to diagnose their error. It also places the messaging physically close to the area of interest, and implicitly communicates the appropriate degree of urgency (low) to the user.

The Benchling DNA editor showing a scrolling mouse that shows a tool tip when moving over the part.

An aside: messaging content

It was fun to explore what message should appear on the tooltip. As a big believer in user control, I felt strongly that the message should not just instruct the user how to edit if they wanted to edit that section of DNA, but also provide the action needed to let the user actually do it.

A not good tooltip that reads, "Sequences designated as parts can not be edited in order to preserve all containing sequences using this part". A better tootlip reading "Sequences designated as parts can not be edited in order to preserve all containing sequences using this part. Please unlink the part to this sequence to edit." A best tooltip with the same copy as the better tooltip, but also with a button to unlink part.

The option with the button would provide the most efficient path to the user's end goal. However, adding an "Unlink part" added both a significant information redesign and an engineering burden. If the user had a section where two parts overlapped, which would be unlinked? Would both be unlinked? Because parts was not originally built with overlaps in mind, the existing infrastructure could not support such an action button. Given time and personnel constraints, we opted to use the 'better' option for now, with the 'best' option noted as a potential future project when DNA parts were next updated.

Continuously indicating an uneditable status

While the tooltip provided reactive messaging, I also wanted to create an "always on" visual indicator to continually remind users that parts were not editable. This would improve users' experience through continuous communication, and avoid the need to navigate through disruptive messaging. A common way of indicating a disabled state is by graying out an item to reduce contrast.

Graying out parts within the DNA sequence tested very well with users. It was an elegant solution because it was a clear visual cue for users to understand that some functionality was disabled while keeping the sequence available for copying or other non-editing actions. However, with the aid of online tool-based inspection, the lowered contrast presented a clear accessibility challenge for users with low vision. This was doubly a problem whenever parts overlapped and the contrast continued to lower. The proposed coloring below shows the drop in readability when text was lightened to indicate a disabled state.

A graphic showing examples of decreasing contrast based on if text was grayed out to indicate a disabled status.

The default text on Benchling was a dark gray color on a white background that was fairly accessible. However, the visual designation for a part included a gray background. When combined with a lighter gray text to indicate function "disabled," the sequence becomes unreadable for differently abled users. The problem is exacerbated when parts are overlapping and the gray background becomes darker.

Designing for inclusion is important because we want everyone to be able to use Benchling. Furthermore, improving usability for users with low vision increases general usability for all. With that in mind, I turned to a different "always on" visual cue to indicate that parts were not editable.

The Benchling DNA editor showing a blinking cursor, then a nonblinking cursor when clicked into a part.

The blinking cursor changes into a non-blinking cursor when clicked into a part, providing a reminder that there is a change of status and editability in these specially designated areas.

As a user attempts to type, a tooltip appears to provide more explicit messaging. For users who are familiar with this functionality, the subtle change of the non-blinking cursor may be enough to remind them that they can’t edit that section. But if a user does attempt to type, a tooltip appears to provide more explicit messaging.

Altogether, the messaging that appears when a user attempts to edit a part looks like this:

The DNA sequence editor showing a blinking cursor, then a non blinking cursor when the mouse is clicked into a part, then a tooltip appear after a pause when user is typing.
Reflections
This started off sounding to me like a very straightforward project. The error message felt a little off, and I assumed tweaking the placement or message would fix it. However, I discovered it wasn't even about error messaging! I really learned the value of going back to fundamentals and asking, "What are we hoping for as an outcome? What steps are necessary to achieve this?" I also didn't have much firsthand access to our target users for this project, so this was also a great exercise in piecing together research from Benchling subject matter experts and pre-recorded notes from conversations with users.

As mentioned above, time constraints made adding an "Unlink Parts" action button to the tooltip messaging not possible...for now. Given more time and resources, I would pursue this path. It would require a new set of hierarchies to govern overlapping parts (which one is "on top"? How can you tell?) but I believe it would allow parts to be used much more widely, empowering teams to use them more flexibly and improve data integrity.

Lastly, it was very exciting to be working on parts because most scientists have never thought about DNA sections in this manner before! DNA manipulation software is relatively new compared to other data collection and manipulation software, such as SQL databases. Introducing a "parts" framework could help scientists approach their experiments differently. However, a valuable learning for me was that with such open space, strong guardrails are necessary to lay the foundation, or you will be met with more confusion than discovery.