Enzyme Design System
Empowering complex pathology platforms with scalable design systems for clarity and efficiency
Summary
A system that standardized UI, improved developer handoff, and streamlined complex medical workflows
Overview
To address growing UI inconsistencies and workflow inefficiencies in our pathology-focused B2B platform, I participated in and led the creation of a scalable design system for aetherSlide. The system included a custom icon set tailored for medical accuracy and clarity, along with a reusable component library optimized for complex lab workflows and data-heavy screens. This solution improved interface consistency, accelerated cross-team collaboration, and laid the foundation for scalable product growth in a highly specialized domain.
Impact Highlights
-
Enhanced visual consistency across complex, data-heavy workflows
-
Achieved 92% design team satisfaction with improved workflow and system clarity
-
Increased design system adoption by 40% across new UI projects
-
Strengthened cross-functional collaboration among designers, developers, and PMs
-
Reduced handoff errors through standardized interaction states and reusable components
My Role
Product Designer
Project
Team Project
Timeline
Completed in 24 weeks (2025)
Platform
Desktop Web
Overview
To address growing UI inconsistencies and workflow inefficiencies in our pathology-focused B2B platform, I participated in and led the creation of a scalable design system for aetherSlide. The system included a custom icon set tailored for medical accuracy and clarity, along with a reusable component library optimized for complex lab workflows and data-heavy screens. This solution improved interface consistency, accelerated cross-team collaboration, and laid the foundation for scalable product growth in a highly specialized domain.
Impact
-
Improved visual consistency across complex, data-heavy pathology workflows
-
92% design team satisfaction with improved workflow and visual consistency
-
40% increase in design system adoption across new UI projects
-
Improved cross-functional alignment — designers, developers, and PMs adopted a shared system
-
Fewer handoff errors due to systemized interaction states and reusable components
My Role
Product Designer
Project
Team Project
Platform
Desktop Web
Timeline
Completed in 24 weeks (2025)
Enzyme / Design System
Scaling Clarity: Designing a Scalable System for Complex Medical Interfaces
Challenge
A lack of consistency across icons and components resulted in an unpolished interface and design inefficiencies
As aetherSlide evolved, its interface became visually inconsistent and increasingly inefficient to scale. Mismatched icons, duplicated components led to a fragmented experience — both for users navigating pathology workflows and for designers trying to maintain the system.
.webp)
Inconsistent Icons
Icons lacked visual consistency in size, style, and alignment—causing UI clutter and slowing user recognition.
Fragmented Components
Without reusable assets, designers rebuilt components locally—slowing delivery and causing UI drift.
Unclear Variants
Components with similar functions existed separately, lacking clear variant logic—slowing updates and reducing design efficiency.
Design Goal
The goal was to create a unified visual language and reusable component system that would streamline design workflows, improve developer handoff, and ensure a consistent user experience across the product
Unify the visual language across icons and UIs
A consistent visual system across icons and components reduced cognitive load, improved usability, and created a more polished, intuitive interface for users.
Build a reusable component system to scale efficiently
Reusable components enabled designers to build faster with fewer errors, while giving developers a single source of truth for scalable, maintainable user interface.
Accelerate Design and Dev through standardization
Clearly defined patterns and interaction states minimized ambiguity, accelerated design and development workflows, and improved handoff across teams.
Design Solution - Icon System
A unified icon system was created to enhance visual clarity, and support faster, more intuitive user recognition across the interface
The icon system was built using the Material Design grid and drawn with a consistent 1.5px stroke to ensure visual balance and clarity. By applying defined principles for scale, spacing, and structure, the redesigned icons brought cohesion to the product’s visual language—improving usability, reinforcing brand consistency, and supporting the complex workflows of a pathology platform.
Grid and Keyline shapes
All icons were constructed using a consistent grid, keyline alignment, and defined safe zones—ensuring visual balance, spatial harmony, and legibility across the interface.
Icon Standard
Standardized stroke, corner radius, and proportions ensured visual consistency. Icons were tested at low resolutions to maintain clarity and accessibility at small sizes.
Comparison
The updated icons replaced mismatched, uneven visuals with a streamlined, cohesive style—strengthening clarity, visual hierarchy, and overall product polish.
Because of the unique needs of pathology workflows, we designed specialized icons for uncommon tools and actions — guided by user research, stakeholder input, and rapid iteration
In addition to standard interface icons, the pathology context required us to design more intuitive and specialized icons for domain-specific actions and tools. These icons were developed through research, close collaboration with stakeholders, and iterative brainstorming to ensure clarity and ease of recognition for expert users.
Custom Icons
Some functions in pathology require specialized icons that generic libraries don't cover. For example, this icon represents a multi-line measurement tool used to analyze cells, designed specifically for our users' workflows.
Design Exploration
I analyzed user needs and explored existing patterns to define key characteristics for these specialized icons. This research helped create variants that matched both function and visual consistency.
User-Centered Refinement
Through team reviews and user feedback, I refined the icons to ensure they were intuitive and easy to recognize, turning complex actions into clear, usable shortcuts.
With improved visual consistency, the interface became more polished, intuitive, and easier to navigate — enabling users to operate the platform with greater confidence and efficiency
System Outcome
This icon system laid the foundation for visual consistency across the platform and supported faster, clearer interaction in complex pathology workflows.
“The new icon system made the overall UI look more consistent and professional. It also felt more intuitive to use, reducing the cognitive load for users during interactions.” - Product Designer B
Design Solution - Component System
The reusable component system sped up design work and streamlined development by reducing inconsistencies and eliminating guesswork
Recognizing the need for a consistent and maintainable UI foundation, I designed and implemented a robust component library tailored to the specialized needs of pathology workflows. Featuring essential elements such as inputs, dropdowns, buttons, and progress indicators, each component was carefully crafted with well-defined states, structural clarity, and standardized spacing rules to promote ease of use and reusability. Leveraging Figma, the library was structured with comprehensive variant documentation and logical naming conventions, empowering designers to work more efficiently and providing developers with a clear blueprint for implementation, thereby reducing handoff friction. This unified system not only improved UI consistency but also accelerated development cycles and proactively addressed potential design debt.
01.
Flexible Variants
By leveraging Figma’s properties and structured variants, we eliminated redundant components and made UI assembly faster and more scalable, ensuring every new screen stays aligned with system standards.
02.
Standardized Interactions
Standardizing micro-interactions (like hovered, pressed, current states) across components ensured a predictable user experience and streamlined developer implementation—reducing ambiguity and design inconsistencies.
03.
Clarity-Driven Efficiency
With detailed specs, naming conventions, and state definitions, the component documentation became a reliable source of truth—minimizing back-and-forth and accelerating the handoff process.
Standardizing components helped create a consistent visual language and simplified workflows across design and development
The component system created a unified design foundation that brought structure and clarity to previously inconsistent screens. With standardized interactions and spacing, UIs became easier to build, easier to use, and visually more cohesive across complex workflows.
System Outcome
The component library brought structure and consistency to the product’s UI, enabling faster iteration, smoother handoffs, and a more reliable user experience in pathology-driven workflows.
“The component library is clearly structured and easy to use, allowing us to quickly build screens while maintaining consistent design standards across different scenarios.” - Product Designer E
Impact
The icon and component systems formed the core of a scalable design foundation — driving visual consistency, improving usability, and enabling faster, more aligned product development
The design system delivered measurable improvements across design, development, and user experience. It enabled faster workflows, reduced ambiguity during handoff, and supported more consistent UI across complex pathology use cases. By aligning teams around a shared system, we laid a scalable foundation for future product growth.
Design System Adoption
+
0
%
Increased reusable component usage
Design Team Satisfaction
92%
Improved design system clarity
Developer Team Satisfaction
"The system enabled us to match designs faster and reduced back-and-forth communication during development." - Front-end Dev
Enabled faster dev handoff
Reflection
Design
Building a Design System Within an Existing Framework
Building a design system isn’t just about supporting designers — it’s about creating a better experience for users by maintaining both a consistent visual language and intuitive interactions. Working within an existing UI framework, I had to strike a balance between enforcing consistency and making components practical and flexible for real-world design use. This required a deep understanding of current design patterns and team workflows, so the system could evolve naturally rather than forcing a complete redesign. The process demanded empathy, collaboration, and systems thinking to create something truly scalable, usable, and impactful.
Research
Evaluating Existing Design to Gather Targeted, Actionable Insights
Before conducting research, it was essential to understand both the system constraints and the specific needs of our users. This ensured that the insights I gathered would lead to meaningful, actionable outcomes when designing components and icons. A key focus was evaluating the existing design structure — not just how things were built, but why they were designed that way, and whether they truly met the needs of our target users. I needed to uncover whether current behaviors were intentional or simply inherited. With that context, I analyzed patterns from other design systems and synthesized those findings to inform thoughtful, user-aligned component redesigns.