Modernizing Rutgers University's Design System with Drupal SDC and Storybook

In this session, we will present a case study of a collaborative project between Rutgers University Department of Communications and Marketing and the Cheppers to modernize the Rutgers Core Component Library (RCCL) platform and redesign the rutgers.edu homepage. This initiative improved the sustainability and accessibility of the RCCL system while enhancing the user experience and performance of one of the most visited higher education homepages in the country.

The RCCL, which supports over 80 live sites across Rutgers, The State University of New Jersey, was tethered to an outdated version of PatternLab-PHP, a design framework that has not seen updates since 2016. The platform struggled with limitations in scalability and flexibility. Our proposal sought to migrate the RCCL to a modern, supported solution while maintaining or improving its accessibility standards. In this session, we will discuss the challenges we faced during the migration process, including compatibility issues with existing components and the complexities of working with legacy technology.

To address these challenges, we completed a comprehensive migration strategy that included transitioning to a Single Directory Components (SDC) approach. SDC organizes components into self-contained directories, improving manageability and making development more efficient. This migration not only modernized the RCCL framework but also laid the foundations for a platform-agnostic component library using Storybook, which provides centralized access for multiple content management systems.

In addition to the platform upgrade, the project also involved redesigning the Rutgers.edu homepage, which sees over 2.7 million page views annually. The redesign focused on optimizing the homepage’s performance, particularly on mobile devices, where content delivery speed was lacking. The above-the-fold “hero” space, which was dominated by ambient video, was replaced by a “mosaic” component. New content presentation options were introduced, which improved user engagement while significantly boosting the site’s performance on both desktop and mobile devices.

We encountered and overcame several challenges, including issues with integrating Storybook into the development environment. We worked around this by using a local Node.js version instead of relying on the ddev Node Package Manager, which was incompatible with Storybook.