Large organizations with multi-site online ecosystems can be divided into two categories: those who have design systems and those who wish they did. Before the relatively recent advent of the design system, updating a fleet of websites to ensure consistency in components and brand voice was an extremely time-consuming and tedious process, as it still is for companies and organizations that lack such a system.
If you’re new to the concept of design systems and why they matter to organizations with complex multi-site platforms, I recommend you read this post from last summer entitled Why Design Systems Matter for Large Organizations. In it I discuss many of the challenges inherent in creating and maintaining such systems as well as some of the organizations that Chapter Three has helped in creating new design systems and expanding existing ones.
Here I would like to discuss design systems within the context of our recent work with the Judicial Council of California (JCC), using this case as an example of the challenges inherent in expanding and adapting an existing design system to suit an organization’s needs as well as of why such systems are invaluable for organizations managing a large number of sites.
About the JCC Web Ecosystem
As the most populous state in the union, California possesses the country’s largest state court system, consisting of the Supreme Court, six Courts of Appeal, and 58 Superior Courts representing all 58 counties in the state. The JCC manages this massive court system as well as its fleet of websites, which includes 58 trial court sites and various other sites.
You can read all about our work with the JCC in this case study. In short, the JCC came to us with a disparate collection of sites with different building blocks and hosting arrangements, many of which were Drupal 7 sites that needed to be migrated. The goal was thus to migrate everything to a unified Drupal 9 (and ultimately Drupal 10) platform while creating a cohesive design system for the JCC that would make updating these sites much easier in future.
In the time since we implemented this new design system in collaboration with the JCC, we’ve already seen the organization make some small but not insignificant changes to their sites. We’ve therefore had a chance to see the design system we helped create in action, and can attest to both how challenging these systems can be to fine tune but also how they save considerable time and energy.
Themes and Schemas
An easy way to conceptualize how design systems work is to think of them as an interaction between ‘themes’ and ‘schemas’. A theme is a core set of components utilized across a web ecosystem – in this particular case Drupal components housed in Pattern Lab. A schema, by contrast, is a particular look and feel given to said components, be it specific colors, shapes, or contours.
In the case of the JCC, all the sites within the system consist of one of three schemas: a self-help portal schema, a schema for the trial court sites, and an ‘elevated’ schema for the higher court sites. As the design system evolves, the schemas expand as new components are added while the theme remains the same. Conversely, a schema can be modified through the addition of new visual elements while the theme of a site remains unchanged.
How The JCC Design System Has Evolved
In the time since the JCC site migration and consolidation, there have been three changes made to the organization’s design system. These changes have tested the robustness of the system we helped develop while also highlighting the importance of having a system of this kind in place.
One scenario that emerged was the need for a new color for the map features of the District Court of Appeals sites. As you can see in the map below, the county to which the displayed site pertains is highlighted in a vivid auburn red, a color that didn’t exist in the original schema, which contains very little in the way of primary colors.
In choosing a specific shade of red for the maps, we first did some research. It was clear we needed a vivid, saturated red but not one that stood out too much akin to an alert. We went through a color study in order to choose the right red, and once we had settled on the right shade we uploaded it to the design system so that every site within the system would have access to it and all the maps updated automatically.
Another change we made to the design system was to add photo attribution. This is an element that was missed in the original strategy and design and that was later brought up as a need. Thanks to the design system, we were able to add photographer credits to the photos quickly without having to painstakingly edit every single photograph. You can see below the before and after image, with and without the attribution.
A third change that had to be made was when the JCC updated its official seal by way of a design agency. This particular change highlighted an area for improvement in the design system, which is that the JCC logo (containing text and the seal) currently exists as individual SVG files. This meant that in order to update the seal across the system, every single site’s logo had to be updated with the new seal and the wording specific to that particular court site.
We are currently working on an alternative format for these logos, wherein the text component will exist outside the SVG file as editable text. Once this has been implemented, any future changes to the official seal will be updatable by way of a single change.
With design systems, there’s always a risk of building too many elements into the system that it gets overly complicated to use. In designing and refining the JCC design system, we’ve sought to walk a fine line between enabling developers and designers to make a wide range of changes quickly and not overwhelming them with possible options, which defeats the whole point of having a design system in the first place.
Conclusion
Design systems are still a very new thing. The concept was introduced to the world by Brad Frost, author of Atomic Design, who actually consulted us in the creation of the JCC system, and it remains something of a buzzword. The basic concept, however, is not new – it’s really no different from a brand guideline, something familiar to pretty much any organization. But brand guidelines are limited in their applicability to websites, as what works for print doesn’t necessarily work for the web. In addition to the JCC system, Chapter Three has also implemented and expanded design systems for organizations like the City and County of San Francisco (SF.gov) and the United Nations Development Program’s Human Development Reports Office (HDRO). We are enormous proponents of design systems for large organizations with multiple sites and have seen them pay off for numerous clients. If you’re an organization with a multi-site web ecosystem and you’re looking to implement or expand a design system, we would love to hear from you. Contact us today and get us working for you on making your online presence easier to manage.
