Building a Flexible but Consistent Design System Across Multiple Websites

By Jim Keller

At conferences and in forums, we often discuss the ideal approach to our projects: deep content strategy, designing systems rather than pages, and implementing modular code that can be manipulated and repurposed as needs evolve. However, oftentimes the reality is far from ideal, and we're left falling into the same traps as before: page-based design, rushed code, and weak content.

This is the story of a project that was actually given the breathing room to thrive, and we'll take you through how we approached content strategy, design, and implementation when a core goal of the project was scalability.

In 2016, Eastern Standard partnered with a major Philadelphia university on a project to re-define their content strategy across multiple departments and schools, craft a flexible design system that would suit the needs of a variety of different use cases, and implement everything in Drupal as a series of modular features that can be enabled as-needed on multiple websites.

We'll talk about key areas of the project, including challenges, pitfalls, and lessons learned as they relate to:

Content strategy and information architecture, including how we used data intelligence to provide a basis for what types of content should be created
Designing a system that can meet the needs of many different types of websites, while avoiding the trap of creating "templates"
Implementing each individual component as its own Drupal feature, so that websites in the infrastructure have an "a la carte" menu of options to choose from
Sharing content across multiple websites (using both feeds and a custom remote entity solution that loads data in realtime from a remote API)
We're excited to share with you our approach and outcomes, and hope that the takeaways can help you organize and implement future projects

Audience Level:
Beginner (just starting, know basic terminology, content creation)
Intermediate (install and configure modules/themes)
Advanced (sysadmin, module developer)

Track:
Case Studies

Version:
Drupal 7

Prerequisites:
Probably the best prerequisite for this session is having gone through a mid to large scale web project before (whether from a client, PM, design, or implementation perspective) and having experienced some of the challenges in trying to implement strong content strategy, scalable design, and modular code

https://www.drupalcampnj.org/program/sessions/case-study-building-flexible-consistent-design-system-and-content-management

Drupal is a registered trademark of Dries Buytaert.