"What does it take to bring clarity to a messy, evolving enterprise platform used by the world’s top chemists?" Maya wasn’t just a design system—it was a strategic lever. It runs independently through a micro front-end framework (MFE) where each components is a standalone application. By building components that flexed across workflows, I helped unify the product, ship faster, and scale design decisions with rigor.
In 2024–2025, Built to serve complex scientific tools, Maya supported high-density data workflows, responsive lab interfaces, and WCAG compliance. I developed the foundational token structure, component library, and slot-based architecture—enabling engineers to build new features 66% faster while maintaining design consistency across legacy and new product surfaces.
66% faster development time
Flexible Component Content (Slot System)
Consistency via Semantic Tokens
Slot System and Semantic Tokens
Table and Smart Suggestion Patterns
Match with Engineering Architecture
Me –– designing!
1 Product Manager
2 Designers
Color, typography, spacing, components—all decided in the moment, all just to make it work! Engineers were styling buttons in 12 different ways. And accessibility? Let’s just say WCAG wasn't invited to the party.
So I built Maya: a system for consistency, speed, and just enough opinion to keep the chaos creative—but not destructive.
Components were vastly inconsistent before Maya
There were no standards for elements prior to Maya. In the example below, colors, rounded edges, and other properties would be vastly different across the product. This makes it hard to predict what each component does experientially for the user.
Key Constraints
Scientific complexity: Users weren’t browsing content—they were manipulating data-dense chemical records. Interfaces had to prioritize utility, not “delight.”
Accessibility and compliance: WCAG 2.0 AA wasn’t a bonus—it was the floor. Especially with enterprise clients like BASF and P&G.
Balancing between future and legacy styles as we worked on features. We'd have a legacy component library, the new design system, and then at least 4 different 3rd party code libraries we used for different things
Consistent
Creating intuitive, familiar and contextual experiences inside of the Alberts Web App
Accessible
Making Albert products usable for everyone by building inclusive experiences
Personalized
Enhancing experiences to be individualized and customized to each user.
Connected
I made constant assessments for our library to be WCAG 2.0 compliant.
Insightful
Creating serendipity for the users by showing data-driven recommendation
Semantic Tokens
When we started, I created primitive tokens for text and color and then converted them to semantic tokens so our team could easily search for and find tokens matched to their use case.
I took inspiration from well-defined systems like Ant Design and Radix to start this exploration. I also used our branding and styling across our surfaces to start our buildout.
WCAG 2.0 Compliance
After making tokens, I assessed our text colors across different backgrounds so that they would have a contrast ratio that is at least 4.5:1 for normal text and 3:1 for large text.
Creating Components
After setting semantic tokens, I set out to build a library of common components like buttons, chips, form fields, and more. I created general conventions around set up to keep things consistent all throughout.
Flexible Slot System
For each component we built, we had subcomponents labeled that can switch variants across different slot types. We use this to apply leading or trailing elements that can be icons, indents, and more.
Consistent Component States
Smart Suggestions on List Dropdowns
I created standardized dropdowns for each our main system objects that can be called from tables and from form fields. When opened, we typically give smart suggestions to keep the content personalized to the user's profile (eg., in your location, and recent items).
Issues with Our Current Table Patterns
Many of our second layer pages in Albert rely on tables, and our current ones have several issues.
Maya Table Structure
With this table pattern, our company closed three 7-figured deals, reduced engineering time on table-driven features by 66%, and reduced inquiries on customer data by 30% I designed the component architecture, collaborated with designer building key features, and worked closely with engineering and product to get this table out into our internal syste,
View Case Study
In 2024–2025, Built to serve complex scientific tools, Maya supported high-density data workflows, responsive lab interfaces, and WCAG compliance. I developed the foundational token structure, component library, and slot-based architecture—enabling engineers to build new features 66% faster while maintaining design consistency across legacy and new product surfaces.
66% faster development time
Flexible Component Content (Slot System)
Consistency via Semantic Tokens
Slot System and Semantic Tokens
Table and Smart Suggestion Patterns
Match with Engineering Architecture
Me –– designing!
1 Product Manager
2 Designers
