Problem
Legacy tools were fragmented across multiple systems with inconsistent layouts, spacing, and hierarchy. Many relied on placeholders and tooltips for input guidance, breaking accessibility and causing issues for screen readers. With no shared layout or component standards, rebranding each tool required manual redesigns, slowing React development and creating brand inconsistencies.
Outcome
Partnering with our Behavioral Experience Designer and the Ethos team, I created a modular framework that scaled across all input-based tools. It introduced a three-column responsive layout with defined content zones, unified spacing, and token-aligned patterns for headings, inputs, steppers, and data visualization. We replaced placeholder-based inputs with accessible labels and contextual help patterns following WCAG 2.1 AA standards. Implemented as a reusable AEM experience fragment, the framework allowed React teams to rebrand and rebuild tools faster while maintaining visual and behavioral consistency.
What we built
The calculator framework unified more than 30 tools under one accessible, scalable system. It eliminated layout fragmentation, improved usability, and reduced delivery time by over 50%. The framework now serves as the foundation for future enterprise tools, ensuring every new experience remains consistent, accessible, and aligned with TIAA’s design system.
