Drupal is an open-source content management system (CMS) with a large community of users and contributors. Unfortunately, it can be difficult to understand and navigate for new users. In order to make it more approachable, Drupal CMS was created as an easier, simplified entry point. To facilitate good and consistent designs for the new interface, the group owning the project decided to create a design system, basing it on the existing UI theme.
Drupal is foundational to the origin and work of Acquia, my employer. Thus, Acquia is one of the largest contributors to Drupal and a number of Acquia employees are working on various aspects of Drupal CMS. My part was to participate on the team of designers along with the developer who created the UI theme to create the design system. (By the time I joined, the foundations had been established – colours, typography, etc.)
Our first task was to create all of the basic components of the UI (buttons, inputs, etc.). We then moved on to defining the larger, more complex components, such as navigation and menus. And that sounds pretty straight-forward, but…
Having a team with members from different companies presented challenges in differing philosophies and methodologies for building a design system.
We had to align on priorities, how to document and build components, and relationships between components.
Working across continents offered limited working overlap to collaborate in real time, so we relied heavily on asynchronous use of Slack and comments in Figma.
Naturally, we aimed to have consistency in both aesthetics and construction across all components, and we all worked on numerous components, sometimes joining forces. A couple examples of components I built are the accordion and settings tray.
Click images to enlarge.
Accordion
Settings tray
In the space of about five weeks, we were able to create all of the needed components and generate mock-ups of all of the current screens using the new components. This laid the foundation for designers who would come in later to continue moving Drupal CMS forward.