Meet Karl and Maya: Redesigning SF.gov for the Future

By Cyd Harrell

Earlier this week, SF Digital and Data Services launched a redesigned and replatformed SF.gov website. Internally, we’re calling this the launch of Karl the CMS and of Maya, our new design system. As the person with the privilege to lead this team, I want to share a little more about the decisions we made and the future we’re planning, for our web and civic tech community.

Basics about Karl and Maya

Karl the CMS, SF’s new central website backend, is built on Wagtail, the open-source CMS platform also used by forward thinking federal agencies like the CFPB and NASA JPL. It gives our team the flexibility to embed new types of content and tools, customize publishing workflows, and use repeatable components to build more services for San Franciscans. This also brings our team into the Python/Django community, greatly expanding our pool of local engineering talent to hire from. Karl is of course named for SF’s iconic fog.

Maya, our new design system, takes us to the next stage of accessible, responsive design. Later this year, Maya will be available to all City agencies as a consumable, Gitbook-based library for their websites and apps with React front-ends. Maya is named for Maya Angelou, an iconic San Franciscan whose career encompasses both poetry and infrastructure, as a design system does.

Why we made the change

Since its 2019 launch, SF.gov has grown from a site that primarily hosted small department services and COVID information (though it always had grand ambitions) to a site that hosts more than 200 departments, divisions, programs, boards, and commissions along with the services they provide, receiving about 750,000 unique visits per month. These days, about 300 active editors maintain pages and publish content for different City bodies and services.

With increasing need for web accessibility based on SF’s own high standards and recent DOJ rulings, combined with the challenging budget environment in the City, San Francisco needs a flexible central site that can accommodate the needs of many more departments and all of their diverse public customers. To do that, we needed a CMS that:

• has an easy to use interface
• allows us to make changes quickly, to better serve our editors and San Franciscans
• provides greater flexibility to administrators and developers

Wagtail meets all these needs, and offers a cost savings as well, because Digital and Data Services can handle all development and maintenance rather than contracting out for expert services on Drupal, our previous CMS platform.

In concert with the software change, our user research team took a hard look at what makes residents of a city both trust that a website is official and feel like it is theirs. That research suggested some lightweight design changes could make a substantial difference to the San Francisco-ness of the site while maintaining the excellent accessibility scores that SF.gov is known for. There’s more to come from Maya - this is just a first design pass - but we’re very pleased to start here!

The promise of SF.gov and the future of digital services in SF

Every San Franciscan (I am one myself) wants it to be easy to get the services and information we need from our government. When we have a civic obligation or want to participate in our City’s democracy, we want that to be smooth and easy too. An accessible, easy to understand website that reflects San Francisco’s values is an essential foundation for that relationship in the 21st century.

As technology advances, there are many valuable things - maps, forms, data, AI tools - that San Franciscans will be able to find and use here. This change is very much a beginning rather than an end, and we look forward to making it easier and easier to work with SF government from the comfort of your home or phone, for many years to come.