Modernizing a 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 aims to improve 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 65 live sites across Rutgers, The State University of New Jersey, is currently tethered to an outdated version of PatternLab-PHP, a design framework that has not seen updates since 2016. As the platform struggles with limitations in scalability and flexibility, our project seeks 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 have faced in this migration process, including compatibility issues with existing components and the complexities of working with legacy technology.

To address these challenges, we have proposed a comprehensive migration strategy that includes transitioning to a Single Directory Components (SDC) approach. SDC organizes components into self-contained directories, improving manageability and making development more efficient. This migration will not only modernize the RCCL framework but also integrate with WordPress and Joomla via a standalone component library using Storybook, providing centralized access for all content management systems.

In addition to the platform upgrade, the project also involves redesigning the Rutgers.edu homepage, which sees over 2.7 million page views annually. The redesign will focus on optimizing the homepage’s performance, particularly on mobile devices, where the site currently struggles with speed. The above-the-fold “hero” space, which is dominated by ambient video, will be revised, and the “mosaic” component will be refined. Our goal is to introduce new content presentation options that improve user engagement while significantly boosting the site’s performance on both desktop and mobile devices.
While the project is still ongoing, we have encountered and overcome several challenges, including issues with integrating Storybook into our development environment. We have worked around this by using a local Node.js version instead of relying on the ddev Node Package Manager, which was incompatible with Storybook.