Base Sequence Viewer

@
PROBLEM
Visualize sequencing information at a nucleotide level so scientists can answer the questions, “Did I create the plasmid I designed? If I didn’t…what happened? Can I still use it?”
‍
SOLUTION
Created a cohesive, intuitive, and scalable base viewer used across multiple products in the Plasmidsaurus platform. Decreased time-to-answer and improved platform stickiness.
ROLE
Solo Designer & Researcher
Owned end-to-end design; partnered with frontend engineer as product team.
RESULTS
77% ↑
increase in Amplicon orders after the introduction of Genotyping Analysis, a base-viewer focused product
Background
When scientists send off a plasmid for sequencing, they're answering a high-stakes question: Did I build the plasmid I intended to build? And if not, can I still use it?

When I came onto this project, our platform returned sequencing results as a comparison against a user-uploaded reference. It would mark samples as “match” or “no match”, but gave scientists almost nothing to work with when the answer was something messier than yes or no.
The number one ask was: Can I see what's actually happening at the base sequence level?
User research made the gap clear. Our sequencing technology was allowing for an unprecedented full view of the entire plasmid, but we were not showing the crucial details users wanted to see.
Historically, the technology for sequencing plasmids used short reads so scientists would only sequence the region they engineered, but miss errors and mismatches elsewhere on the plasmid. These errors could propagate forward, surfacing as unexplained failures later on where debugging and redoing the work cost far more in time and resources than catching the error early would have.
‍
We had the technology to guarantee that users’ entire plasmid wasn’t hiding any errors that could threaten their experiment…but our visualizations were falling short of giving users the information they actually wanted. When our platform couldn’t give the answers they wanted, users would download the raw data and move to a different platform to look at the sequence base-by-base.

My goal was to shift how users thought about Plasmidsaurus: from the lab step in my workflow to the place where I get answers and confidence to move forward. The result was a base viewer that focused users on the most salient parts of their base level sequence, and eventually expanded to be used across multiple products in Plasmidsaurus’s platform.
Designing the base viewer
The existing solution was to build a full-featured sequence viewer. Benchling and SnapGene both have large, scrollable, interfaces built for primer design and sequence exploration. They're powerful tools if sequence analysis is your primary job.
APE, a common free DNA visualizer
Benchling, an enterprise-level electronic lab notebook that includes a sequence map
An initial sketch of how bases could be shown, along with some sequencing quality information
However, my insight was that our users don't need a sequence explorer. They needed to make a decision about each sample, based on what evidence they had. That distinction drove every design decision. Rather than build a viewer that puts sequence exploration front and center, I went with a "mini" viewer: a focused, contextual display that surfaces the delta between what they actually built and what they were hoping to build, aka their reference. 
Typically the first question is, "What's different from my reference?" Any mismatches are prominently flagged prominently, and correspondingly highlighted in the base viewer. Users can click through each one to see what mutation occurred. Due to our sequencing technology, some called mutations were likely sequencing artifacts: we made sure to mark those accordingly. 
While the focus was on the mismatch areas, it was still important to let people see other parts of the sequence to contextualize the mismatch. A scrollable and scrubbable text string lets users investigate upstream and downstream, as well as copy + paste their updated sequence into their design software.

I also added an amino acid track to show what translational effect a mutation would have. This clearly highlighted if a mutation was silent and would have no downstream effect, or if it had a larger effect such as an early stop codon.
I tucked the sequence quality information as a track above the bases, and showed confidence scores for each base call at each position. It's a lot of information that most scientists don't look for until digging deeper, so I chose to show it only on hover in the visualizer.
The focus on giving users just enough information to make decisions helped me refine the feature set and ensured we weren’t just rebuilding existing tools to be prettier, but giving our users an optimized results experience. The mini viewer was also built with expansion in mind. Plasmidsaurus's motto is to “Sequence Everything,” and base-level results aren't unique to just the plasmid product. As part of my design, I made a bet that we would need to keep reusing this base viewer with product-specific nuances layered on top. Therefore I made deliberate design decisions for the visualizer and its interactions to be agnostic to sequence length, sequence type, and different match conditions. 
Expanding the base viewer
The base viewer became assumed infrastructure. Users expected to see their sequence at the base level and PMs started specced new products around that expectation. My bet that the base viewer would become a platform-wide component was validated, especially when our new Genotyping Analysis product was built with the base viewer as a central piece of product differentiation.

In our Genotyping Analysis product, we run sequencing results through an algorithm that assigns mutations to the right allele. 
Sanger (an older technology) isn't able to assign mutations to specific alleles. Not only can Plasmidsaurus's technology do that, but we would also visualize it for users!
Other tools like Snapgene offer a MSA visualizer, but using it requres entering a separate dedicated flow.
Users wanted to see what distinct alleles made up each sample, and what mutations were seen on each allele. This meant we needed to show each of these alleles stacked up to a reference sequence. Multiple sequence alignment (which can be used outside of an alleles-in-a-sample context) scales exponentially with the number of sequences being compared, causing it to get computationally expensive very quickly. As a result, most other software that have this feature require it be used in a dedicated view.  
‍
However, our users had the same end goal: they wanted to make a decision about what samples to move forward with, and moving to a separate interface introduced unnecessary friction. I was able to partner with our engineers who developed a smarter algorithm that handled the combinatorial alignment in a more efficient manner. As a result, I could expand the base viewer to directly show the stacked alleles. I also showed each allele in the full-length preview (above the base viewer) as a track rather than an annotated plasmid map to highlight where the mismatches were: 
In this much more data-dense version, I introduced some new interactions that cut down on complexity:
Reflections
What I'm most proud of in this base viewer is the vision to build a highly extensible component that would be used across multiple products. As a sequencing company, it seems like a no-brainer that users would want to see base level sequences of their results, no matter what they're sequencing or what they're hoping to answer with their sequencing. Using the base viewer as the fundamental building block that product-specific visualizations sit on top of means it's very easy for each product to start with a foundation of shared design language, interactions, and visual logic.

I'm confident that we'll continue to use this in the future. I'm already thinking about how to show areas of high variability (such as in CRISPR-cas system knockout regions) or how to let users pick their most effective guides.

The hardest part of this extensible component though is scope creep. There are a lot of interesting things that can be shown, and easy to keep adding things particularly when there's no dedicated product team. The constraint I kept coming back to was: does this help someone make a decision in their workflow? If it doesn't, it doesn't belong in this view. That filter made a lot of decisions easier, and it will continue to guide product-specific usage as we continue using the base viewer across our platform.
Back to ProjectsLinkedInInstagram