Context

Following Boeing’s acquisition of Inmedius, leadership conducted a technical and product review of the Spectrum suite—enterprise aviation tools used by aerospace manufacturers, airlines, and defense organizations to create and manage aircraft technical documentation. The suite included S1000D Manager, AuthorPro, and Prism, which supported mission-critical maintenance and operational workflows across global customers.

While functionally valuable, the applications relied on outdated front-end architecture, including HTML frames and table-based layouts. The UI was inconsistent, difficult to maintain, and increasingly misaligned with modern web standards.

Boeing committed to a multi-year modernization effort to preserve the product suite’s competitiveness and long-term viability. A foundational requirement was establishing a scalable design system to modernize the interface, improve engineering efficiency, enable incremental migration, and ensure long-term maintainability.

I led design system strategy, architecture, and implementation in close partnership with product management, engineering, and two designers on my team.

Objective

The goal was to create a scalable, code-based design system to serve as the foundation for modernizing Spectrum’s entire product suite.

Specifically, we aimed to:

• Replace outdated UI patterns with a modern, accessible interface framework

• Establish reusable components aligned with engineering architecture

• Enable gradual migration alongside legacy interfaces

• Improve consistency across applications

• Increase design and development efficiency

• Ensure long-term scalability and maintainability

Approach

I led a one-year initiative to design and implement the initial system, aligned with the first phase of the broader modernization roadmap.

1. Establishing Design System Architecture and Roadmap

We evaluated frameworks such as Bootstrap and Foundation but determined they could not support Spectrum’s complex, specialized workflows. I led the decision to build a custom system aligned with engineering’s adoption of AngularJS.

I introduced Brad Frost’s Atomic Design methodology to structure the system into reusable components and enable scalable growth.

Working with product and engineering, we prioritized modernization targets, including:

• Application shell and layout framework

• Navigation and command structures

• Toolbars and interaction controls

• Core UI components

This prioritization informed a structured component roadmap managed through Jira.

2. Defining the Visual Language and Component Framework

I created modernized UI concepts establishing the system’s visual and interaction foundation, including typography, color, layout, and component patterns. I also defined CSS architecture and component conventions to ensure scalability and maintainability.

From this foundation, we built a comprehensive component library. Components were designed to adapt across contexts—for example, buttons automatically adjusted styling based on placement within toolbars, dialogs, or inline content.

We also developed specialized components supporting technical authoring workflows, including:

• Advanced data table frameworks

• Multi-select interaction controls

• WYSIWYG editing environments

All components were designed to meet WCAG accessibility standards.

3. Integrating Design and Engineering Through Code-Driven Implementation

To ensure implementation fidelity, designers authored production-ready HTML and CSS directly and participated fully in engineering workflows, including version control, code reviews, and Angular component integration.

I trained the team in modern CSS architecture and established a collaborative workflow where design, engineering, product, and QA reviewed components together before release.

This eliminated translation gaps between design and engineering and significantly improved quality and efficiency.

4. Enabling Incremental Modernization Across Legacy Applications

Because Spectrum consisted of large, mature applications, full replacement was not feasible. We designed the system to coexist with legacy interfaces, allowing teams to modernize screens and workflows incrementally without disrupting customers.

This reduced modernization risk while steadily improving usability and maintainability.

5. Improving Development Velocity and Consistency

“The reusable user interface framework we assembled has accelerated the rate at which we can build high-quality applications with a consistent and aesthetically pleasing look and feel.” – Engineering Lead

Once established, the system fundamentally changed how interfaces were built. Designers and engineers could assemble new screens rapidly using existing components, often moving directly from sketches to working UI.

This significantly reduced redundant engineering effort while improving:

• Development speed

• Interface consistency

• Maintainability

• Cross-functional collaboration