ACS – FUSION DESIGN SYSTEM

OVERVIEW

Fusion is a cross-platform design system created to support the modernization of ACS publishing products.

At the start of this initiative, there was no existing design system or shared UI foundation across ACS Publications. Multiple internal teams and external contractors worked independently, often taking broad creative freedom. This resulted in highly fragmented interfaces, inconsistent interaction patterns, and significant usability and maintenance challenges. In one documented case, the same basic UI element appeared in 30+ visually and behaviorally different implementations across products.

Fusion was created to establish a single, scalable foundation for design and development, aligning teams around shared components, patterns, and accessibility standards. The system serves both as a UI toolkit and as a strategic coordination layer between design, engineering, and product teams during ongoing platform modernization.

Screenshot of the Finished Fusion site for documentation

Project Goals

• Create a single, unified design language to replace fragmented and inconsistent UI patterns across publishing products.
• Eliminate redundant and conflicting component implementations introduced by parallel contractor and team workflows.
• Improve usability and accessibility consistency for authors, editors, reviewers, and internal users.
• Enable scalable product development through reusable components and shared interaction patterns.
• Establish a clear bridge between design intent and front-end implementation to reduce rework and drift.

My Role

Methodologies & Responsibilities

• Design System Strategy: Selected Flowbite as a starting reference system to accelerate setup and provide a concrete baseline for component structure, states, and variants.
• Framework Alignment: Used Tailwind CSS as the initial implementation language to enforce consistency and reduce stylistic drift.
• Component & Pattern Design: Audited existing products to identify duplication and inconsistency, then designed standardized components grounded in real workflows.
• Design–Engineering Collaboration Pipeline: Defined workflows for design-to-code handoff, review cycles, and ownership models.
• Platform Alignment: Ensured the system supported legacy products while enabling smoother migration paths and faster product creation.
• Governance & Documentation: Established contribution models, usage guidelines, and documentation to prevent regression into one-off designs.

Key Features Designed

• Core Component Library: Standardized buttons, form controls, tables, navigation, modals, and alerts.
• Layout & Page Templates: Reusable layouts for dashboards, editorial tools, and administrative interfaces.
• Interaction Patterns: Shared behaviors for filtering, sorting, pagination, bulk actions, and system feedback states.
• Accessibility Foundations: WCAG-aligned components including keyboard navigation and focus management.
• Tokenization & Theming: Design tokens for color, typography, spacing, and elevation.

Tools

Design & Research

Figma, FigJam, Miro, Dovetail, Flowbite, Tailwind CSS, SharePoint, Zeroheight, Hotjar, Google Analytics

Communication

Microsoft Teams, Figma, Jira, ClickUp