UX Designer
Web App
Healthcare Research
4 months
UNDERSTANDING THE PROBLEM
What is the CTD Database?
The Comparative Toxicogenomics Database (CTD) is a federally-funded platform used by scientists and researchers to find connections between chemicals, genes, and diseases. CTD offers a powerful search function and a suite of analysis tools for interpreting complex toxicogenomic data.
CTD’s Homepage wasn’t effectively guiding users
Stakeholders said that the website felt visually heavy, likely causing users to spend extra time figuring out how to navigate. They were losing potential revenue because the users started moving to third-party tools for analysis instead of using its built-in tools.
"Just make this look nice"
When I first joined the project, the request was simple “Just make the homepage look nicer.” But soon, it became clear that aesthetics wasn't the only issue. Stakeholders revealed the real concern: “People don’t use our tools because the website feels too complex just from looking at the homepage.”
DISCOVERY & RESEARCH
Finding Patterns and Best Practices
In parallel, I reviewed other biological database websites that connect various types of data, to better understand how they handled showing complex data. The goal was to identify patterns and best practices that could guide our platform’s redesign.
After conducting a user survey, I found the real problem
My goal was to understand what the users actually struggled with. I launched a qualitative survey via Qualtrics with a few demographic questions and 10 open-ended ones. The results showed that users weren't even aware of most features.
Searching data felt overwhelming and inefficient
Website was crowded and text-heavy
Analysis tools were hard to discover
Users weren’t aware of all types of data available
1. Searching data felt overwhelming and inefficient
Users often had to re-type long chemical names multiple times and searches frequently returned over a thousand results, which felt overwhelming. On top of that, the results contained many different data types, making it difficult to filter or distinguish between them.
2. The website felt crowded and text-heavy
The website looked more complicated than it functionally was - lots of text, limited breathing room, and no visual hierarchy.
3. Analysis tools were hard to discover
Stakeholders initially assumed the users were not using the analysis tools since they were too complex. However, research showed that most users didn’t even know they existed. They downloaded data and used third-party sites for analysis because the tools were simply hidden under a dropdown menu.
4. Users weren’t aware of all types of data available
Majority of the users believed only Chemicals, Genes, and Diseases were available because of the word clouds in the original homepage.
DESIGN DECISION #1
Creating a smoother search experience
Added search recommendations with recent searches at the top. Used icons and clearer labels to separate data categories. Created a cleaner, balanced layout to make scanning easier.
DESIGN DECISION #2
Fresh Visual Identity & Design System
Created a new visual direction with cleaner layouts and more spacing. Simplified scientific data through icons, graphics, and charts.
DESIGN DECISION #3
Making Analysis Tools Easy to Discover
Added an Analysis Tools overview directly on the homepage. Gave users a visible entry point with hints to scroll for more details.
DESIGN DECISION #4
Converting Complex Data into Simple Visuals
Introduced an eye-catching rotating visual plus data chips.Each chip linked to a category page that explained the data in depth.
FINAL DESIGN & HANDOFF
Assembling All The Pieces Together
The CTD platform now has a new design system and is anchored by a search-first experience. Small chips below the search bar show all types of available data. A tools slider makes analysis features more discoverable. Redesigned icons and illustrations add clarity.
The new design system was extended to all pages to create a cohesive experience.
All pages were redesigned to follow the new guidelines improving spacing, layout and visual hierarchy.
Developer Handoff
Once the design solutions were finalized, I prepared a handoff kit for the development team. This included annotated detailed component behaviors and reusable design components to maintain consistency across pages. I also provided clear specifications on spacing, typography, and component states to reduce ambiguity.
Impact & Takeaways
I simplified the platform and search flow, improved discoverability of the analysis tools and made users aware of the platform’s full capabilities. It laid the groundwork for users to stay within the platform for analysis, making their research process faster.
The design is currently in development, and while impact metrics are not yet available, I plan to validate its effectiveness with a follow-up user survey and usability testing. I also plan to integrate Hotjar for understanding user behavior through out the website. This will help us measure improvements in search and usage of analysis tools.
Currently I am exploring AI tools (Cursor + Claude) to see how far I go with converting my Figma screens into production level code.
