Duration

May – Aug 2024

Roles

UI/UX Engineer

Colaborations

Developers

Overview

An interactive 3D tool that helps neuroscientists explore gene relationships through search and drag-and-drop interactions.

PROBLEM

Neuroscientists had to write complex queries to visualize gene relationships, creating a barrier for researchers without programming experience. Debugging took time away from research, and even when a query worked, they weren’t always confident it reflected what they intended to explore.

UNDERSTAND THE USERS

As we interview with the neuroscientsists, we see the common pain points among them:

Query writing creates a barrier

Researchers need to write database queries to visualize gene relationships, making exploration difficult for those without query-writing experience

Working queries don’t guarantee confidence

Even when a query runs successfully, researchers may be unsure whether it captures the gene relationships they intended to explore.

Debugging takes time away from research

Finding and fixing query errors interrupts exploration and leaves researchers with less time to investigate their scientific questions.

Rapid Sketching

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

Here, we see 2 main opportunities to enhance research efficiency:

🔎

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

🔎

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.

🧬

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

DESIGN DECISION #1

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.

Limitation

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 DECISION #2

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 works?

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 PRODUCT DEMO

✅ 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.

HOW I GREW THROUGH THIS PROJECT

🚀

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

🧩

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

🧩

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

💬

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

💬

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."