A bioinformatics team I have worked with wants to add a new feature in their dendrogam application to allow the visualization of concatenated multiple sequence alignment (MSA) of heavy and light chain sequences of antibodies. In order to produce the deliverable, I have created wireframes, mockups, and conducted guerrilla usability testing. In this case study, I am simply showcasing the design process for the MVP which allows users to see two MSA tables under a dendrogram at the same time. For privacy and NDA purposes, I have omitted the name of the software and application.

The current application only allows the visualization of heavy and light chain MSA’s separately, but users want to be able to analyze both the heavy and light chain MSA’s at the same time. 

The prospective users for this application are genomic research and bioinformatic scientists that want to analyze their sequenced samples. These samples are analyzed  through a dendrogram, a hierarchical diagram that shows the relationship between objects, and the corresponding MSA, which is an array of genetic sequences.

The application allows users to visualize a dendrogram, zoom in, zoom out, pan, select node(s), and see the MSA’s for the selected node(s). Nodes on the dendrograms are numbered numerically based on the selection order or the nodes are numerically numbered from left to right if multiple nodes are selected at the same time. As for the MSA tables, users can scroll vertically and horizontally within the table.

With a defined userflow, I started to look at competitor products and conducted an analysis on three heuristics that I wanted to enhance for this design project:

1. User control and freedom
2. Aesthetics and minimalism
3. Recognizing, diagnosing, and recovering from errors

I made a few sketches trying to configure the new layout of the application page in order to improve the user experience and allow the visualization of two MSA tables.

These wireframes were designed and discussed with the team so that I could gather feedback and clarify the problem space before I designed my mockups.

As I finalized my wireframes, I implemented the company’s established style guide. I used my mockups to conduct guerrilla usability testing and gather information from prospective users about the dual heavy and light chain MSA visualization. 

The purpose of this usability test was to see if users felt that they understood the information being displayed, users felt that buttons and other features within the page were accessible, and to identify potential features that users would need to further help them assess the dual visualization of heavy and light chain MSA.

Major feedbacks:
1. Can the size of the MSA tables and dendrogram be adjustable?
2. When looking at both the heavy and light chain MSA at the same time, do both tables scroll together or separately?
3. Why is the MSA Color Scheme button far away from the MSA table?
4. Why are the dendrogram legend and MSA legend different types of buttons?
5. When looking at both the heavy and light chain MSA, visualization is limited, but I am able to see what I need to analyze. 

In addition to the major feedbacks, I took notes of some observations I’ve made while users were viewing my mockups:

1. Users were trying to scroll through each table.
2. Users were hovering on top of the small arrow next to the Multiple Sequence Alignment title.

This showed me that users were interested in seeing if the MSA tables were scrollable and what the small arrow next to the Multiple Sequence Alignment title entailed. In this case, my iterations would showcase a scroll bar for the scrollable content within the MSA tables, and I would showcase an MSA index while having the “Multiple Sequence Alignment” title selected.

As I presented my mockup iterations to my team, questions were raised if my design was the best solution for our users. Would two dendrograms in the same page help or are users satisfied with just one dendrogram?

To solve this problem, I conducted an A/B testing of two mockups using SurveyMonkey. The goal was to allow users to choose which mockup optimally presented the data.

Out of 5 participants, 100% chose my first design (outlined in green). Users felt that adding a second dendrogram would cause information overload. This data was presented to my team and helped drive the design decision to use my first design and to move forward with the project.

This was an interesting problem to solve where the initial design of the dendrogram application already contained large amounts of information. Adding a new feature to visualize both heavy and light chain MSA’s meant that we would be adding more viewable information which could overwhelm the users. Major feedback from the guerrilla usability testing was implemented into my iterations. The team concluded to allow the MSA table and dendrogram to be resized by users and allow the dual MSA tables to scroll together rather than separately. This project revolved around a feature that users requested and both parties felt it was required to efficiently conduct genomics and bioinformatics research.

Adding a dual visualization of heavy and light chain MSA’s was a challenge, but I must keep in mind other elements in the page that I could iterate to enhance the user experience, such as clarifying the reference sequence section of the MSA table. In addition, a new expand button that allowed users to fully view the dendrogram and select specific nodes within the expanded view would be a future assignment to tackle.