ODI and the California Department of Technology (CDT) won Best IT Collaboration for our combined efforts on the California Design System. We accepted the award at the Digital Government Summit in Sacramento.
The Design System is a set of core principles, style guidelines, and components that makes it easier for state departments to develop user-friendly websites. Currently, most departments use the State Web Template, which has some older features that can cause issues such as slow load times. CDT’s goal is to replace the Template with the more modern Design System in the near future.
The team created the Design System based on components and practices developed during projects including covid19.ca.gov. We also used it to quickly develop several other sites including innovation.ca.gov, abortion.ca.gov, and drought.ca.gov.
The components are lightweight and independent of each other. They’re also customizable and usable in any framework. Each component is also in its own npm package. This means teams can install a component by itself anywhere, saving developers and designers time.
As this open source project enters the next stage, we’ll evaluate everything to make sure it serves Californians. We’re also reviewing the Design System from the state department perspective. We want it to be easy for all departments to use and modify.
Building a system that serves all Californians
Many ODI and CDT team members that worked on the Design System were also part of the alpha.ca.gov project. Alpha’s focus on iterative, user-driven development were guiding principles in the creation of the Design System.
One example was ensuring the Design System’s components perform well on all devices. This was essential because Californians use a variety of devices to access state websites. Their computers and phones range in age, processing speed, and power. We kept this top of mind during the development process.
Building a system from scratch also allowed us to experiment with new approaches and discard older tools. For example, the Design System doesn’t include jQuery or Bootstrap. This makes it more lightweight by default. Anyone using the Design System can leverage these tools in their projects, but you aren’t forced to deliver them to every visitor.
We want to hear from you
The key to the Design System’s ongoing success is iterative development based on user feedback. CDT uses the Digital Web Services Network (DWSN) to get feedback on the Design System from state departments. We also want to hear from individuals across the state about what they need.
Specifically, we’d love to know:
- What is your feedback on the latest version?
- Do you have any feature requests?
- Are there any features or functionality your team would like to contribute to help mature the Design System?
Since this project is open source, you can contribute. We have integrated code submissions from people outside the government. We even shipped big component refactors based on feedback.
Want to learn more? Check out the Design System website and the open source repository.