FORMS ON SF.GOV
Powering San Francisco's digital services
Role
Lead Designer
Client
City & County of San Francisco
Disciplines
UX Design, Strategy
Industry
Government
FORMS ON SF.GOV
Powering San Francisco's digital services
Role
Lead Designer
Client
City & County of San Francisco
Disciplines
UX Design, Strategy
Industry
Government
FORMS ON SF.GOV
Powering San Francisco's digital services
Role
Lead Designer
Client
City & County of San Francisco
Disciplines
UX Design, Strategy
Industry
Government
85
Digital forms
300
k
Submissions per year
35
End-to-end digital services
Overview
I lead the design of Forms on SF.gov, providing residents with consistent and accessible touchpoints across city services. As Service Design lead I identify and research common needs across city programs to inform our product roadmap and strategy. I also lead end-to-end digital transformation projects, leveraging service patterns and low-code tools to build the systems that staff use to run city services.
Below are some specific examples of the breadth of work I take on.
Overview
I lead the design of Forms on SF.gov, providing residents with consistent and accessible touchpoints across city services. As Service Design lead I identify and research common needs across city programs to inform our product roadmap and strategy. I also lead end-to-end digital transformation projects, leveraging service patterns and low-code tools to build the systems that staff use to run city services.
Below are some specific examples of the breadth of work I take on.
Overview
I lead the design of Forms on SF.gov, providing residents with consistent and accessible touchpoints across city services. As Service Design lead I identify and research common needs across city programs to inform our product roadmap and strategy. I also lead end-to-end digital transformation projects, leveraging service patterns and low-code tools to build the systems that staff use to run city services.
Below are some specific examples of the breadth of work I take on.
Forms management
Our SF.gov CMS was built around “content types”, which consistently, and rigidly, define the components of a page. However, my work defining service patterns throughout the city makes clear that there are repeating ways that content types work together. A department’s “agency” page is always connected to “information pages” that describe the services they provide.
With our strategic shift to empower more city staff to build their own services, there would be an increase in “forms” pages made by people who aren’t frequent SF.gov editors. I recognized this as an opportunity to rethink how the CMS handles related pages. After pitching the project to department leadership, I created a quick mockup to convey the opportunity and brought together the Forms and CMS product teams to understand the constraints. This work is ongoing, but it represents the biggest cross-product effort the department has taken on.
Forms management
Our SF.gov CMS was built around “content types”, which consistently, and rigidly, define the components of a page. However, my work defining service patterns throughout the city makes clear that there are repeating ways that content types work together. A department’s “agency” page is always connected to “information pages” that describe the services they provide.
With our strategic shift to empower more city staff to build their own services, there would be an increase in “forms” pages made by people who aren’t frequent SF.gov editors. I recognized this as an opportunity to rethink how the CMS handles related pages. After pitching the project to department leadership, I created a quick mockup to convey the opportunity and brought together the Forms and CMS product teams to understand the constraints. This work is ongoing, but it represents the biggest cross-product effort the department has taken on.
Forms management
Our SF.gov CMS was built around “content types”, which consistently, and rigidly, define the components of a page. However, my work defining service patterns throughout the city makes clear that there are repeating ways that content types work together. A department’s “agency” page is always connected to “information pages” that describe the services they provide.
With our strategic shift to empower more city staff to build their own services, there would be an increase in “forms” pages made by people who aren’t frequent SF.gov editors. I recognized this as an opportunity to rethink how the CMS handles related pages. After pitching the project to department leadership, I created a quick mockup to convey the opportunity and brought together the Forms and CMS product teams to understand the constraints. This work is ongoing, but it represents the biggest cross-product effort the department has taken on.
Hours of operation
With his recent election, our new mayor has made a point of highlighting city services through short social media videos. When I found out he would soon be featuring a program with a form that collects a business’ hours of operation, I saw an opportunity to make long overdue improvements to that component.
With ~2 weeks before the announcement, I reviewed existing research from the component’s launch and conducted an evaluation of other tools. I brought a synthesis of that discovery and some initial concepts to a design team critique to shape what’s desirable. I brought a functional Figma Make prototype to meet with engineering to refine for what’s possible. I tested the new component against the old, confirming the improvements in confidence and time to complete.
The new component launched in time for the Mayor’s announcement, which unfortunately didn’t end up showing the form experience, but did drive an increase in submissions.
Hours of operation
With his recent election, our new mayor has made a point of highlighting city services through short social media videos. When I found out he would soon be featuring a program with a form that collects a business’ hours of operation, I saw an opportunity to make long overdue improvements to that component.
With ~2 weeks before the announcement, I reviewed existing research from the component’s launch and conducted an evaluation of other tools. I brought a synthesis of that discovery and some initial concepts to a design team critique to shape what’s desirable. I brought a functional Figma Make prototype to meet with engineering to refine for what’s possible. I tested the new component against the old, confirming the improvements in confidence and time to complete.
The new component launched in time for the Mayor’s announcement, which unfortunately didn’t end up showing the form experience, but did drive an increase in submissions.
Hours of operation
With his recent election, our new mayor has made a point of highlighting city services through short social media videos. When I found out he would soon be featuring a program with a form that collects a business’ hours of operation, I saw an opportunity to make long overdue improvements to that component.
With ~2 weeks before the announcement, I reviewed existing research from the component’s launch and conducted an evaluation of other tools. I brought a synthesis of that discovery and some initial concepts to a design team critique to shape what’s desirable. I brought a functional Figma Make prototype to meet with engineering to refine for what’s possible. I tested the new component against the old, confirming the improvements in confidence and time to complete.
The new component launched in time for the Mayor’s announcement, which unfortunately didn’t end up showing the form experience, but did drive an increase in submissions.
Loading animation
My research has repeatedly shown the important role that trust plays in government interactions. Things like the city seal and a .gov url go a long way in assuring residents they’re in the right place.
When we switched to a third party forms tool, our near-term approach was to embed the form on SF.gov. As the embedded form loaded it would display an animation advertising the tool. To avoid any confusion, maintain confidence, and ensure a consistently branded experience, I built a lightweight animation using existing assets to display over the loading form with minimal cost to loading times.
Loading animation
My research has repeatedly shown the important role that trust plays in government interactions. Things like the city seal and a .gov url go a long way in assuring residents they’re in the right place.
When we switched to a third party forms tool, our near-term approach was to embed the form on SF.gov. As the embedded form loaded it would display an animation advertising the tool. To avoid any confusion, maintain confidence, and ensure a consistently branded experience, I built a lightweight animation using existing assets to display over the loading form with minimal cost to loading times.
Loading animation
My research has repeatedly shown the important role that trust plays in government interactions. Things like the city seal and a .gov url go a long way in assuring residents they’re in the right place.
When we switched to a third party forms tool, our near-term approach was to embed the form on SF.gov. As the embedded form loaded it would display an animation advertising the tool. To avoid any confusion, maintain confidence, and ensure a consistently branded experience, I built a lightweight animation using existing assets to display over the loading form with minimal cost to loading times.
Product strategy
After years of scrappy work building a Forms product and workflow tools to enable a few of the city’s most complex services, it was becoming clear to me that it wasn’t sustainable. We weren’t staffed to be able to continue building features, maintaining existing services, and onboarding new departments.
I raised this with department leadership, planning and facilitating a multi-day offsite for the team to reassess how we could best support our department’s goal of impact at scale. The workshop resulted in a pivot to partner enablement; a focus on giving departments the tools, training, and confidence to create and maintain their own digital services.
Product strategy
After years of scrappy work building a Forms product and workflow tools to enable a few of the city’s most complex services, it was becoming clear to me that it wasn’t sustainable. We weren’t staffed to be able to continue building features, maintaining existing services, and onboarding new departments.
I raised this with department leadership, planning and facilitating a multi-day offsite for the team to reassess how we could best support our department’s goal of impact at scale. The workshop resulted in a pivot to partner enablement; a focus on giving departments the tools, training, and confidence to create and maintain their own digital services.
Product strategy
After years of scrappy work building a Forms product and workflow tools to enable a few of the city’s most complex services, it was becoming clear to me that it wasn’t sustainable. We weren’t staffed to be able to continue building features, maintaining existing services, and onboarding new departments.
I raised this with department leadership, planning and facilitating a multi-day offsite for the team to reassess how we could best support our department’s goal of impact at scale. The workshop resulted in a pivot to partner enablement; a focus on giving departments the tools, training, and confidence to create and maintain their own digital services.
