Civiform admin

application admin panel

Civiform lets the different government departments create and control under the CMS system. I worked for continuing user experience and product design for civiform admin and application side and oversaw city admin and CBO admin side after the Q1 google UX designer roll-off.

When I joined the team, the admin platform was in the progress of development from scratch. At a certain point the design and development break out in different ways. I was responsible for breaking down the engineer constraints, making the short and long term strategy movement for change through small, well-focused experiments with the cross-functional Google team across PT, CT, ET and GMT+8 time zones.

* I have omitted confidential information in this case study. All information is my own and does not necessarily reflect the views of Google.org.

What I do

UX/Product design
Product vision
Re-define the problem
Advocate user research result and data to the team
Align the information to the team

Fostering accessibility (a11y) and user-center design to the team
Mentor and onboarding the rolling-base teammate
Focus on application and admin side and oversees city admin and CBO admin part

Team

Google’s product managers, project manager, front and back end engineers, user researcher, ux writer, creative lead and interaction designer

Status

Soft launch, grow and maintain

Platform

Responsive website

Location

Remote from GMT+8, work with PT, CT and ET timezones

Overview

Background

Mayor Durkan established Seattle Affordability Portal in 2017, and the affordability portal report brought recommendations for a path forward in 2018. After the completion of a screening tool in 2019, Google.org joined Affordable Seattle in January 2021 to develop a universal application tool, now called CiviForm.

Problem

How might we streamline the application creation and increase the communication effectively between residents and CBOs for the City of Seattle?

Solution

For application:
An end-to-end web app application platform to allow residents to apply applications from their mobile phone directly with 7 different languages supported. And if they allow the platform can save their information for future use.
For city worker, CBO:
A content management system to better manage all the application in one place.

Outcome

Google.org and seattle.gov have positive feedback for the results. It was recorded as a success model in google.org.
Additional funding was secured through the Seattle Rescue Plan passed by City Council on 6/21/2021 for $128.4 million.
Other city requests to use civiform, new collocation between Google.org and US Digital Response continue investing and planning civiform to expand from seattle to the national.

have time for admin process? ☟

or jump to design

for civiform application process ☞

How did we get to the solution?

The whole content management system is built from scratch. When I joined the team, the civiform admin platform was on the progress of development. The Q1 designer has done the foundation design, he focuses more on the civiform admin part than the application side.

At a certain point the design and development break out in two directions. I started to talk with the designer, engineers and the product manager to understand more about the situation, how the system is working now and any constraints when working on the improvement or need to keep in mind.

Current experience

The feature is placed around the screen, user is hard to identify the information and how the system works.
The system flow is very different from the general understanding, making the user need more time and more guidance to understand and use the platform.

Goal

Make the experience smooth and user friendly under low engineer effect.
Let the admin find necessary information more easily.

Metric

First time admin can spend less time understanding how to use the platform, and don’t need to go over the document about it.
The gov people can spend less time worrying about operating the platform but more focus on the information, the content they want to give to/put in the application and the collaboration between CBO.

More user feedback, recheck the initial start point and secondary study to identify the problems

During the weekly meeting with seattle.gov, they raise lots of concerns and questions for the admin design. When presenting, engineers also know the development is very different from the design and want to improve it but don’t know where to start.

So I decided to revisit the initial start point, since it is the product built from scratch, and do the secondary research for the Saas, enterprise, CMS product out there, especially some similar products like Surveymonkey and Typeform. I wanted to find out what are the common components and patterns to better solve the challenges/problems we are facing now.

Not just keep the civiform admin users in mind but also CBO’s admin and program admin users

For the admin part, it is not only the civiform admin user, it also has the program admin and the CBO admin user. Civiform admin platform is the managed system to manage the program admin and CBO admin.

My secondary finding

After some rediscovery and understanding from inside out, here are some design challenges for the admin part

/ real problems

Because of the situation/problem below, engineers start to build things from their perspective, place features around rather than user friendly and logical. In the end, it needs additional documents and training to let people understand and use the platform, which is away from the original goal and purpose.

The system is designed for very specific needs at the beginning and that causes certain technique constraints, and it also causes the original design and flow won’t work out in places.
The system design and interaction is very different from the general pattern out there.
Under certain technique constraints it is more and more harder when adding the new features, it may be half feasible in the screen but the flow and interaction won’t make any sense.
It uses lots of development words and content in the communication.
The original design is dark mode, but seattle.gov prefers the light mode, so the engineers started to develop in their own way.

With these problems and finding in mind, I set the following design goals