Element Design System — Scaling Consistency Across a Cross-Suite Portfolio

______________________________________________________________________________________

Case Study Snapshot:

AspenTech's portfolio suffered from fundamental inconsistencies—visual style, interaction patterns, accessibility, and component behavior varied across ~20 products, driving UI defects, rework, slow handoffs, and engineering mistrust. I led the creation of Element, a design system built as both a product and an operating model. I drove the vision, information architecture, token architecture, component specs, executive buy-in, and governance—delivering a token-based, themeable system with accessibility baked in, not bolted on.

Element shipped with everything teams needed to move fast: hero components for data-dense enterprise workflows (tables, filters, bulk actions, navigation), dozens of templated pages, synced Figma libraries and Storybook implementation, and automation via linting plugins, token pipelines, and CI checks. Governance included a design system council, SAFe-aligned intake, and a hybrid contribution model. The results were measurable: 60% cycle time reduction, 80% fewer UI defects, 100% component reuse, and a 40-point NPS increase—transforming the portfolio from "many products, many styles" into a coherent, scalable system.

______________________________________________________________________________________

Context:

AspenTech needed to modernize and scale product development across a cross-suite ecosystem—starting with ~20 products and expanding toward all Aspen products (including Emerson). To make that scale possible, all new development standardized on a design system called Element—built to support data-dense enterprise workflows like the one shown (tables, filters, states, and multi-step workflows).

Problem:

• The portfolio suffered from inconsistency across the fundamentals:

• Visual style and interaction patterns

• Information architecture and component behavior

• Accessibility and responsiveness

The cost was real: UI defects, rework, slow handoffs, divergent implementations, engineering mistrust, and accessibility regressions. A rebrand plus legacy design debt forced the issue—quality and coherence had to improve without slowing delivery.

Approach:

We treated Element as a product and an operating model, not just a library. The system was built to be:

• Token-based + variable-driven (color/typography/spacing)

• Themeable (light/dark/high-contrast)

• Implementation-practical for teams shipping under real constraints

• I drove the vision, IA, token architecture, component specs, executive buy-in, and governance—supported by a cross-functional build team.

What shipped:

• System foundations

• Token + variable architecture

• Themes (including high-contrast)

• Accessibility patterns baked into components

• Responsive behavior rules (especially for dense tables and workflows)

• Hero components for enterprise UX

• Data tables, filters, tabs, bulk actions

• Workflow steps, status indicators, notifications

• Navigation (side nav/top bar), forms, charts

Templates:

• Dozens of templated pages so teams could ship consistent workflows quickly, not assemble everything from scratch

• Tooling + delivery

• Figma libraries + Storybook implementation (language-agnostic; designed to scale across stacks)

• Design/code kept in sync via component naming conventions, Artifactory, and versioning

• Automation baked into the pipeline: linting/audit plugins, token pipelines, and CI checks

Element ran with real governance:

• A design system council

• SAFe-aligned intake and approval gates

• A hybrid contribution model: centralized core team + federated contributors

Adoption was driven top-down and executed with a predictable rollout:

• Started with ~20 products, adding 6–10 products per PI

• Adoption included both new work and refactoring

Measured impact:

• 60% cycle time reduction

• 80% UI defect reduction

• 100% component reuse (standard components used consistently vs one-off rebuilds)

• Improved accessibility compliance across products

• +40% NPS increase

Why it mattered:

Element changed the portfolio from “many products, many styles” into a coherent, scalable system. It increased engineering trust in design fidelity, reduced defects and rework, accelerated delivery, and ensured accessibility and theming were built-in—not bolted on.