Modernizing Rutgers University’s Design System with SDC and Storybook

Rutgers University maintains a large digital ecosystem consisting of more than 80 Drupal websites supported by a shared component library. Over time, the frontend architecture had become difficult to maintain. The existing design system was built around Pattern Lab PHP, which was no longer actively maintained, making it harder to evolve alongside modern Drupal development practices.

The goal of the project was not only to redesign the Rutgers homepage, but also to modernize the underlying component architecture without disrupting the established design system. Rutgers wanted to preserve its existing investment in reusable components while moving to a solution that better aligned with Drupal's direction and would be easier to maintain in the future.

Cheppers worked closely with Rutgers to redesign the homepage, improve content hierarchy and user engagement, and migrate the existing component library from Pattern Lab to Drupal Single Directory Components (SDC). Existing components were reviewed, updated where necessary, and adapted to the new architecture rather than being recreated from scratch. Storybook was introduced as the primary environment for developing, documenting, and testing components independently of Drupal pages.

The new homepage delivered a significantly improved visitor experience, while the migration to SDC established a modern, Drupal-native component architecture that can continue to evolve with the platform. Improvements made during the project can now be reused across Rutgers' wider ecosystem of more than 70 websites, reducing maintenance effort and providing a stronger foundation for future development.