IE11 Not Supported

For optimal browsing, we recommend Chrome, Firefox or Safari browsers.

State Unveils Beta Guidelines for Website Design, Code, Content

The design system is intended to create a consistent look, feel and navigation path, so Californians can more easily find the online information they need across departments and agencies. With a focus on “user experience” (UX), the design system addresses such elements as typography, design style, content and components.

State technologists have unveiled the beta version of the California Design System, a comprehensive guide for state agencies and departments on the best tools, principles, practices and styles to use when designing, creating or revamping their websites.

The system is an open source collaboration between the California Department of Technology and the Office of Digital Innovation, both within the Government Operations Agency.

“I could not be prouder of this (beta) debut and all of the exciting ways it will empower digital teams and services across the State of CA for years to come,” state Chief Web Officer Blaine Wasylkiw wrote in a LinkedIn post. “Onward!”

The design system is intended to create a consistent look, feel and navigation path so Californians can more easily find the online information they need across departments and agencies. With a focus on “user experience” (UX), the design system addresses such elements as typography, design style, content and components, and it advises developers to create clean, uncluttered sites so even users with low bandwidth can easily navigate them. It even addresses the verbiage on state sites, recommending a sixth-grade reading level for content to ensure comprehension.

The design system is an outgrowth of work begun by ODI’s Alpha Project, a digital innovation workshop that was led by Angelica Quirarte, a former ODI deputy director. Quirarte, who’s now the Federal Partnerships director for the Tech Talent Project, oversaw Alpha’s work in prototyping a new approach to designing government services under the ca.gov banner.

Quirarte responded to Wasylkiw’s LinkedIn post with her own comment: “This concept was born post Alpha.ca.gov and during the pandemic. The win: seeing both ODI and CDT come together to build on this. So proud of you all! Can’t wait to see where you and other teams take this.”

The design system includes sections aimed at developers, UX and visual designers, content designers and users. It also spells out eight key principles:
  • “Design for people’s needs. Put the needs of Californians first in everything you do. Make your guiding question, ‘What does someone need to do?’”
  • “Do the hard work to make it simple and elegant. Government services often put the burden on people to understand and navigate services and policies. Break down these barriers for them to create simple, understandable services.”
  • “Prioritize accessibility. Make your services accessible for all Californians. Think about people who have been traditionally excluded, like people who use screen readers or reside in low bandwidth regions.”
  • “Be concise. Things are easy to use when they’re simple. Ask yourself, ‘Does this word, image, or functionality help people do what they need to do?’”
  • “Design with data: Use research and analytics to understand how people use your services and products. This keeps us focused on their needs, not preconceived solutions.”
  • “Iterate, then iterate again. Services and products are never finished. Rigorously test and refine your work to make sure it’s robust and useful.”
  • “Be consistent, but not uniform. Use the component, content and visual guidelines. This creates a shared, consistent experience across state departments.”
  • “Optimize performance. Not every Californian has a high-end device. When you build services and products, think about people on a range of devices and internet speeds.”
  • “Make things open. As part of our commitment to transparency and collaboration, our default state is to share. Design System work is open to the public.”

“All of the Design System code is open source and hosted on Github,” the notice states. “This means anyone can see how it’s built, suggest improvements, or adapt it for their own purposes.”

The new standards have been adopted by two state sites — the California Department of Cannabis Control and a COVID-19 feedback web page, covid19.ca.gov.
Dennis Noone is Executive Editor of Industry Insider. He is a career journalist, having worked at small-town newspapers and major metropolitan dailies including USA Today in Washington, D.C.