Lead UX Designer
Web App
Healthcare Research
4 months
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 nice.” 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.”
After conducting a user survey, we found the real problem
To understand what the users actually struggled with, I launched a qualitative survey via Qualtrics. 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
Creating a smoother search experience
Searching data was reduced from 5 steps to 2 by including a filter dropdown, recent searches at the top, relevant icons and clear labels for all the different types of data available.
Adopting a new design direction
The new design direction had less text, more whitespace, and proper visual hierarchy making it simple and easy-to-use. The data is now represented using icons and illustrations.
Making analysis tools easy to discover
Research showed that most users didn’t even these tools existed. I introduced an Analysis Tools carousel on the homepage improving discoverability and giving visible entry point to the users.
Converting complex data into simple visuals
Majority of the users believed only Chemicals, Genes, and Diseases data was available because of their word clouds on the original homepage. Introduced a rotating visual with all data categories linked to it's respective page that explained the data in depth.
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.
Expanding the new design system across the CTD platform
The entire platform was redesigned, adopting the new design system guidelines improving spacing, layout and visual hierarchy throughout the website including new icons and illustrations.
Developer Handoff
I prepared a handoff kit for the development team with annotated details and reusable design components to maintain consistency across pages with clear specifications on spacing, typography, and component states.
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 using Cursor + Claude to convert my Figma screens into front-end code in React.