Form content patterns — City and County of San Francisco

 

The problem

Regardless of how you’re working or who you’re working with, building and maintaining a design system means working with content. In order to scale the work that Digital Services is doing to bring city services online, we have to document content patterns within forms, one of the most used type of content in government services.

 

What I did

This was a foundational MVP version of a content pattern repository, designed to serve as a key building block for our design system. The primary goal was to document common question types, associated components, terminology, and approved calls-to-action, ensuring the Digital Services team and stakeholders across departments could reuse them consistently. Additionally, I created a concise one-pager on form principles to help non-technologists take the first steps toward designing digital, accessible forms.

 

Results

I included content patterns in our design system to support the following goals when creating forms:

  • Consistency: System-wide rules about tone, naming, and punctuation.

  • Usability: Vetted content standards for accessibility, inclusivity, and translation-friendliness to support consistency across a product ecosystem.

  • Speed: These content patterns speeded up design, research, translation, and checks for accessibility and inclusion.

In a survey of stakeholders from departments piloting our form-creation tools, 92% said they were happy with the supporting guidelines. The time it took to create forms dropped by about 46% for these teams. In follow-ups, they shared that reusable question templates and page structure guidance made a big difference. Not having to worry about writing error or confirmation messages for each field was also a huge relief.

 
SFGOV form - form principles.jpg
SFGOV form - inputs.jpg
SFGOV form - conditionals.jpg
SFGOV form - errors, small frame.jpg
 

People I worked with

  • UX product designers

  • UX researchers

  • Service designers

  • Stakeholders from 6 different government departments

Next steps

The final goal of the form design system is to help different government departments self-serve when working on digitalizing their services.

The Digital Services team is creating processes, artifacts, guidelines, and design patterns to help non-design folks in government scale their service delivery. This must be done in a user-friendly, lo-fi, and accessible way. For now, these guidelines are in Confluence. Still, as the team builds a more robust toolkit, they'll explore other ways of presenting this info so government employees from all walks of life understand how to create experiences that help San Franciscans get things done.