Gene-neuro Exploration

Improving research efficiency through interactive data visualization

MY ROLE

UX Designer

Software Developer

TIME

TIME

July 2025

SKILLS

SKILLS

UX Research

UX Design

Front-end Development

Overview

My team and I built an intuitive visual workspace to generate 3D gene visualizations by just drag-and-drop interaction, reducing the technical learning-curve that holds back research efficiency.

The Problem❓

Neuroscientists have to write complex queries to generate node-graph visualizations of gene relationships. This is steep learning curve, especially for researchers without query-writing experience.

How we approach the problem space 🔎

🚩 MAPPING PAIN POINTS

We want to build an interactive UI search engine to help the neuroscientists but not sure what they need. Therefore, our team conducted a qualitative interview with 8 neuroscientists and observed their experience in the research process, where we were able to see the clear frustration decrease research efficiency.

As going going over the insights, we found out the major frustration that they encounter:

High learning curve 📈

"There is no way to generate the gene visualizations if we don't write queries, but we are not programmers."

Room for errors 🔧

"Even when it works, I’m never fully confident the query is doing exactly what I intended."

Debugging queries take long 🐞

"I spent half a day debugging the query, which I am supposed to spend on researching instead."

✍🏻 RAPID-SKETCH

We dropped some ideas and rapid-sketching to visualize "how do we solve the problems?"

2 main opportunities to enhance scientists' research efficiency:

🔎 Replace the necessity for writing queries with a search box that enables users to look up gene connections.

🧬 Enable direct interaction with the data by allowing scientist to click, drag, and explore a 3D visualization of gene connections, facilitating continuous interaction.

✏️ DESIGN ITERATIONS

I created a low-fidelity wireframe & prototypes to give the neuroscience team a preview of the UI, then continuously iterate design through their feedback

DESIGN ITERATION #1

What I tried?

I tested a design where users select a placeholder, then choose a gene to fill that position. Users could also define relationships between genes and view basic gene details on hover.

What went wrong?

Users didn’t intuitively understand the two-step interaction of selecting a placeholder first and then choosing a gene, which caused confusion and slowed down the workflow. The neuroscience team also needed access to more detailed gene information.

DESIGN ITERATION #2

What I tried?

Allowed users to click a gene and drag it directly into the placeholder to create a continuous workflow. I also added gene-type visuals inside each sphere and moved the gene name to the top for quicker identification. Additional gene details were included to help users better understand each selection.

Why it worked?

Removing the confusing two-step interaction from the first design made the workflow more intuitive. The clearer visuals, repositioned gene names, and additional gene details also helped neuroscientists identify the right genes more quickly and aligned better with their expectations for how the interaction should work.

✍🏻 RAPID-SKETCH

We dropped some ideas and rapid-sketching to visualize "how do we solve the problems?"

2 main opportunities to enhance scientists' research efficiency:

🔎 Replace the necessity for writing queries with a search box that enables users to look up gene connections.

🧬 Enable direct interaction with the data by allowing scientist to click, drag, and explore a 3D visualization of gene connections, facilitating continuous interaction.

✏️ DESIGN ITERATIONS

I created a low-fidelity wireframe & prototypes to give the neuroscience team a preview of the UI, then continuously iterate design through their feedback

DESIGN ITERATION #1

What I tried?

I tested a design where users select a placeholder, then choose a gene to fill that position. Users could also define relationships between genes and view basic gene details on hover.

What went wrong?

Users didn’t intuitively understand the two-step interaction of selecting a placeholder first and then choosing a gene, which caused confusion and slowed down the workflow. The neuroscience team also needed access to more detailed gene information.

DESIGN ITERATION #2

What I tried?

Allowed users to click a gene and drag it directly into the placeholder to create a continuous workflow. I also added gene-type visuals inside each sphere and moved the gene name to the top for quicker identification. Additional gene details were included to help users better understand each selection.

Why it worked?

Removing the confusing two-step interaction from the first design made the workflow more intuitive. The clearer visuals, repositioned gene names, and additional gene details also helped neuroscientists identify the right genes more quickly and aligned better with their expectations for how the interaction should work.

✍🏻 RAPID-SKETCH

We dropped some ideas and rapid-sketching to visualize "how do we solve the problems?"

2 main opportunities to enhance scientists' research efficiency:

🔎 Replace the necessity for writing queries with a search box that enables users to look up gene connections.

🧬 Enable direct interaction with the data by allowing scientist to click, drag, and explore a 3D visualization of gene connections, facilitating continuous interaction.

✏️ DESIGN ITERATIONS

I created a low-fidelity wireframe & prototypes to give the neuroscience team a preview of the UI, then continuously iterate design through their feedback.

DESIGN ITERATION #1

What I tried?

I tested a design where users select a placeholder, then choose a gene to fill that position. Users could also define relationships between genes and view basic gene details on hover.

What went wrong?

Users didn’t intuitively understand the two-step interaction of selecting a placeholder first and then choosing a gene, which caused confusion and slowed down the workflow. The neuroscience team also needed access to more detailed gene information.

DESIGN ITERATION #2

What I tried?

Allowed users to click a gene and drag it directly into the placeholder to create a continuous workflow. I also added gene-type visuals inside each sphere and moved the gene name to the top for quicker identification. Additional gene details were included to help users better understand each selection.

Why it worked?

Removing the confusing two-step interaction from the first design made the workflow more intuitive. The clearer visuals, repositioned gene names, and additional gene details also helped neuroscientists identify the right genes more quickly and aligned better with their expectations for how the interaction should work.

📦 FINAL PRODUCTS

I developed the interactive prototype in Unity3D. Since I had never used Unity before, I taught myself the basics from scratch and ramped up within 4 weeks. During that same timeframe, I completed the entire workflow, from sketching ideas to building the functional prototype, under a tight project deadline. ⏰

The product is planned to be integrated into the company’s research pipeline to improve efficiency for neuroscientists.


✅ Researchers can generate complex gene graphs through simple search instead of writing Cypher queries.

✅ The real-time, interactive 3D visualization enables faster pattern recognition and helps uncover meaningful relationships.

✅ Gene details, relationships, and visual context are consolidated in one place, reducing context switching and accelerating hypothesis validation.


Looking ahead, the tool can be enhanced with richer filters, automated suggestions, and deeper database integration to further streamline exploration and support more advanced research workflows.

How I Grew Through This Project 📝

I learned how to rapidly adopt new tools

I learnt and delivered a functional Unity3D from scratch within three weeks, strengthening my ability to learn fast under tight deadlines.

Simplifying complex workflows creates the biggest impact

Users don’t need more features, they need less friction. Streamlining complicated steps can dramatically improve efficiency in any domain.

Cross-functional collaboration shaped a better product

Partnering closely with domain experts helped me translate complex goals into clear, intuitive interfaces and iterate with real user feedback.

Kind words from my manager ✉️

"From the moment Hayley joined our team, it was evident that she possessed an exceptional level of commitment and enthusiasm. Even before her official start date, she proactively prepared herself for the role, demonstrating her eagerness to contribute effectively. Throughout her internship, Hayley consistently exhibited a strong work ethic and a genuine passion for her field."

Ryan Chandler

Knowledge Graph Engineer, AbbVie

Our presentation at R&D showcase and received “Top Innovation” recognition among the intern projects🏅
Hang out with the scientists 😄👩🏻‍🔬
Our presentation at R&D showcase and received “Top Innovation” recognition among the intern projects🏅
Hang out with the scientists 😄👩🏻‍🔬
Our presentation at R&D showcase and received “Top Innovation” recognition among the intern projects🏅
Hang out with the scientists 😄👩🏻‍🔬