Implementing a Scalable Design System for Neuroscience Research
At the Keck School of Medicine, I led the creation of a scalable design system for a critical neuroscience research platform used in Alzheimer’s and Parkinson’s studies. The tool’s fragmented UI and lack of standardization slowed research and frustrated cross-functional teams.
Responsibilities
Workshop facilitation
Wireframes
UI Design
High fidelity prototypes
Component Developement
HTML/ CSS
Basic Java
Role
Ux Developer
Solution Preview
I built a unified system in Figma, HTML/SCSS, and documentation hubs that cut redundant design work by 80%, reduced dev time by 30%, and increased consistency across all products.
Consolidating styles
I audit all the screens, collected all variants of components and consolidated them to 1 style which was approved by all teams.
Creating Components
I created scalable components in both Figma and HTML/CSS which were integrated into the code base.
Documentation
Created clear documentation for both designers and developers on component guidelines and usage
Design system website
Created an easily accessible website to serve as a single source of truth for active design system components
The problem: 80% of components were being rebuilt across teams.
I began by auditing existing platforms and speaking with researchers and engineers. Most teams built tools in isolation, leading to inconsistent interfaces and repeated work. Visual Inconsistencies were common across products leading to extensive review cycles, frequently delaying and pushing deadlines.
Uncovering needs for tokens, documentation and usage guidelines
I facilitated workshops and 1:1 interviews to:
Identify usability issues in existing tools
Understand shared pain points across labs
Prioritize components based on user impact and dev effort
Then, to inform a scalable approach I conducted competitive analyses of design systems from Google, IBM, and Salesforce. Key takeaways included the importance of tokens, thorough documentation, and clearly defined roles for adoption and maintainability.
Finally I synthesized all the insights and ideas gathered during research into categorized themes, helping clarify user needs and guide the design system’s structure.
Planning for scalable, consistent and efficient foundations.
From there, I outlined all essential components following the atomic design method and prioritized them based on team needs. This allowed me to create a clear development roadmap. With this structure in place, I planned my approach to each component using three core principles; shaped directly by user research:
Consistency across all tools and interfaces
Scalability to support future products and features
Efficiency through reusable, modular components
Final Designs
Consolidating styles
First, I went through all the existing UI screens and consolidated available styles. I created color palettes, text styles, elevation styles and grid patterns that followed WCAG standards.
Then I went through all the UI screens to ensure that all styles were utilizing the newly established design tokens.
Creating Components
When creating components I focused on scalability, cohesion and ease. I began by creating efficient components in Figma using the styles I defined, reviewing them using the Nathan Curtis methodology to ensure that they meet all the requirements and finally adding them to the code base using the same nomenclature as in Figma file to ensure consistency.
Documentation
I created clear documentation for both designers and developers in component guidelines and usage in order to avoid any confusion.
Design System Website
Finally I created a design system website, to make component documentation easily accessible by all teams.
In order to create this website i sat down with several team members to discuss their process of developing a page and understand any pain points that they had in the process. The main points I noted were:
Developers are not as comfortable with Figma Dev they rather prefer using a simple website
When shown wireframes 90% of the time developers would immediately use the search bar to find their component, they wanted a high emphasis on the search bar feature.
All developers had some suggestions for design system improvements but forgot about them before they had the opportunity to voice them, they wanted an easy way to share feedback as they work
Reflections & Impact
This project taught me how important systems thinking is in UX. I learned how fragmented workflows can create friction not just for designers, but for the whole team, slowing down development times and creating friction among teams. By introducing a structured, scalable design system, I helped align cross-functional teams, reduce redundancy, and bring consistency to complex research tools. The process deepened my ability to translate messy internal processes into clear, reusable patterns that support both user and team efficiency.
Impact
Standardized UI across internal research tools, improving overall usability and reducing cognitive load for users.
Enabled developers to reuse 80% of components across platforms, streamlining design and engineering workflows.
Led to measurable reductions in user errors and onboarding time, enhancing confidence and clarity for researchers navigating between tools.