SCREEN 3.0

Making genomic data accessible to researchers

Overview

SCREEN is a web-based visualization engine that allows researchers to explore 2.3+ million regulatory elements from ENCODE data without coding skills. Basically its a website tool that lets scientists browse through millions of parts of DNA that control our genes.

When the tool's earlier interface buried key features and confused new users, I led a complete redesign to transform how scientists discover and analyze genomic data.

My role

Responsible for complete interface redesign, information architecture, visual design, custom iconography, and logo design.
Collaborated with development team to customize MUI component library for scientific use cases

Timeline

Ongoing since July 2025

Team

1 Product Designer
4 Engineer
2 Principal Investigators

Why did SCREEN need a redesign?

SCREEN's earlier interface lacked clear introduction and navigation, making it difficult for researchers and clinicians to explore the database efficiently. New users were getting lost without a clear starting point or understanding of the tool's full capabilities.

Additionally, the PIs wanted to add more data types and comparison features, but the existing UI couldn't scale to accommodate future expansion. Based on their feedback and observations, several critical issues emerged :

Buried core functionality: Search was the most critical feature but wasn't prominent in the interface

Poor discoverability: New researchers struggled to understand what the tool could do and where to start

Scalability constraints: The existing UI couldn't accommodate the additional data types and comparison features PIs wanted to add

Onboarding gap: Without clear entry points, researchers were missing the tool's full capabilities

Working within the realities of academic research, I had to redesign SCREEN without the luxury of extensive user research. External deadlines for paper publications, grant submissions, and conference presentations meant design decisions had to be made efficiently based on available insights.

The challenge was designing for a highly specialized scientific audience while making the interface intuitive enough for newcomers, all without direct access to end users.

How did I approach the redesign?

I audited the existing site through a new user's lens, documenting every point where researchers got lost. Meeting with PIs helped me understand researcher workflows and pain points from domain experts who knew the science but struggled with the interface.

Without traditional user research, I had to be strategic about gathering insights and validating design decisions.
Working with available resources, I treated PIs as domain experts and user proxies, conducting structured feedback sessions to understand researcher workflows and pain points. While not ideal, this approach let me tap into their deep knowledge of how scientists actually work with genomic data.

This approach helped me come up with ideas to improve the overall usability of the site. Upon discussion and making sure my ideas were feasible and relevant I narrowed down the scope and began designing the screens.

Designing the solution

Starting with rough wireframes and testing with PIs as proxy users, I moved from low to high fidelity, gathering feedback at each stage to ensure scientific accuracy met user-friendly design.

Wireframes_homescreen -_ BED file upload [June 3 2025].png

Search-First Homepage with Multiple Entry Points

Search was the most critical feature but was buried in the original site. I elevated it to hero status while adding:

Spotlight section for Downloads (the second-most visited page) with available data types
Trending datasets with dynamic updates based on download frequency, helping researchers discover popular data
Example cards for new users to explore without prior knowledge

Gene Details Page with Hierarchical Navigation

When users search for a gene, they need multiple related data types without losing context. I designed:

Side navigation to categorize dense scientific data intuitively
Tab system allowing researchers to open multiple data subsets simultaneously
Switchable view modes (Table View, UMAP visualization) for different analysis needs
Custom iconography to quickly identify data types

Genome Browser Track Management System

One of the main features I redesigned was the genome browser - a tool that lets you explore DNA like a map, zooming in and out to see different parts and what they do. The industry-standard UCSC browser has a steep learning curve for managing tracks (the layers of data you can view). I designed a simpler solution for our SCREEN genome browser:

Two-panel layout separating available tracks (organized in folders) from active tracks
One-click toggle to show or hide tracks
Clear categorization to help users navigate hundreds of track options

I explored drag-to-reorder functionality but decided against it after consulting with the development team. Prioritizing core usability over advanced features aligned better with user needs and technical constraints.

Design System & Visual Language

The existing SCREEN browser lacked visual consistency, making it harder for non-computational researchers to navigate complex genomic data. Working with developers who were already using MUI, I built a design system to unify the experience:

Custom iconography system to help researchers quickly distinguish between data types
Clear typography hierarchy for dense information

The impact

The redesigned SCREEN browser launched on January 7, 2026, delivering measurable improvements in user engagement and validation of the design's effectiveness.

Post-launch analytics show users are exploring 2.2x more pages per visit, indicating improved discoverability and engagement. The 21% reduction in bounce rate demonstrates that the new information architecture successfully retains users and encourages deeper exploration of the platform's capabilities.

Beyond the numbers, researchers at consortium demos praised the intuitive interface, PIs report the design effectively showcases SCREEN during grant proposals, and lab testing sessions now focus on data accuracy rather than usability, confirming the interface is working as intended.

Reflection

Sometimes the most impactful design work isn't about reimagining entire systems. It's about finding and fixing the critical moments where user needs clash with interface assumptions. By listening closely to 62 travelers' frustrations, we turned a breaking point into a touchpoint that actually works.