Civiform

universal application system

In 2020, COVID has significantly increased the need for Affordable Seattle to streamline programs to assist residents in recovery.

When I joined the project was in the developing stage, the Google team had done the discovery path and design sprint as part of early design. I was responsible for user experience and product design (for application and civiform admin side) after the Q1 google ux designer roll-off and worked with the 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.

Overview

What I do

  • UX/Product design
  • Product vision
  • Re-define the problem
  • Advocate user research result and data to the team
  • Fostering a11y and user-center design to the team
  • Align the information to the team
  • Mentor and onboarding the rolling-base teammate
  • Focus on application and admin side and overseas city admin and CBO admin part
  • UX/Product design
  • Product vision
  • Re-define the problem
  • Advocate user research result and data to the team
  • Fostering a11y and user-center design to the team
  • Align the information to the team
  • Mentor and onborading the new rolling-base teammate

Team

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

Platform

Responsive website

Location

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

Status

Soft launch, grow and maintain

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 improve the application (process) experience for residents and community-based organizations (CBOs) applying for multiple City of Seattle assistance programs?

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.

☟process☟

My focus area in the application and the civiform admin

☟my focus area☟

Simplify and make the application process more accessible (a11y)

Situation

The system is built from scratch, everything is still underdeveloped. When I joined the team, they just decided the product name last week. The Q1 designers did some initial start with some high level diagram flow and few possible direction screens.

Goal

  • Make the application platform accessible and inclusive but also secure at the same time.
  • Have the basic end-to-end experience as the start point, and have space to expand later on.

Metric

  • The first layer of success: the application user can access the online form and be able to finish an online form using their own device.
  • Increase the digital application form program from 3 programs to more.

how did we get to the solution?

/ process

I started to talk with the Q1 designer to understand more about the situation and support him in organizing the existing resources and tasks. By immersing myself in the situation, I ask lots of questions and read all the existing documents to figure out the best way to support the team.

Learning from research insights

Besides foundational research from google and the gov research team. To better understand the problem space, I also did the secondary research to learn about the context and the similar product out there. I want to learn more about others’ problems, what kind of challenges they are facing, any patterns and opportunities out there.

What I find during my secondary research:

  • The first layer of success: the application user can access the online form and be able to finish an online form using their own device.
  • Increase the digital application form program from 3 programs to more.

leading a new way

/ design development

To get familiar with the project, I picked one of the application form tasks to start with. When reviewing two of the existing high-level application form diagram flow, I found out there are some repeated questions again and again. 

I show some of my findings with the product manager and propose new ways based on the problem pattern and research findings to approach the problems. After some discussion, he quickly agreed on the direction.

Online form building admin panel: civiform admin

Simplify and make the application process more accessible (a11y)

Situation

The system is built from scratch, everything is still underdeveloped. When I joined the team, they just decided the product name last week. The Q1 designers did some initial start with some high level diagram flow and few possible direction screens.

Goal

  • Make the application platform accessible and inclusive but also secure at the same time.
  • Have the basic end-to-end experience as the start point, and have space to expand later on.

Metric

  • The first layer of success: the application user can access the online form and be able to finish an online form using their own device.
  • Increase the digital application form program from 3 programs to more.

how did we get to the solution?

/ process

I started to talk with the Q1 designer to understand more about the situation and support him in organizing the existing resources and tasks. By immersing myself in the situation, I ask lots of questions and read all the existing documents to figure out the best way to support the team.

Learning from research insights

Besides foundational research from google and the gov research team. To better understand the problem space, I also did the secondary research to learn about the context and the similar product out there. I want to learn more about others’ problems, what kind of challenges they are facing, any patterns and opportunities out there.

Core users

Elderly, low technology, low agency, low resources, most non-english speakers.

My secondary research finding:

  • The biggest challenges for the gov services out there, most of the time it is missing the clear communication.
  • Other similar services out there produced by the 3 parties are trying to fill the gap of the communication and being the bridge of education.
  • Besides the US market, I also look into different countries such as the UK, CA, AU…etc. Especially UK.gov and the third organization beyond government, they’ve designed very unique and specific experiences especially for the citizens or for the certain type of the users.
  • Some of the resources in the US.gov design also point to the UK.gov resources, I think it stays the same for the heart of the users/citizens, some traits can cross the border.

leading a new way

/ design development

To get familiar with the project, I picked one of the application form tasks to start with. When reviewing two of the existing high-level application form diagram flow, I found out there are some repeated questions again and again. 

I show some of my findings with the product manager and propose new ways based on the problem pattern and research findings to approach the problems. After some discussion, he quickly agreed on the direction.

Some existing design challenges I found:

  • It didn’t set the foundational application form scenario, so it causes the same and similar questions again and again when creating a new application form mock.
  • It didn’t really set up the before and after user journey when users enter the application form, it is another reason make it harder to make any decisions for the application form flow.
  • The original plan is more focused on making the application system feasible, the decision causes the design to focus more on the admin user rather than application user.

To better solve the existing design challenges, I set up the design goals based on the research findings:

  • Make the experience accessible as large as possible, and including all of the users in mind.
  • Make the communication clear for different culture users, with different language understanding.
  • Empower the users who put their information for the application.

here are some design questions informed my design strategy:

  • What does it mean to be accessible and inclusive for this project? for the users?
  • How to make the communication clear when covering different cultures? what does it mean to be clear?
  • How can I design the foundational system and let the system scale after that?

design explorations

1.
accessible, inclusive, trust

(test)
To get familiar with the project, I picked one of the application form tasks to start with. When reviewing two of the existing high-level application form diagram flow, I found out there are some repeated questions again and again. 

2.
communication, language

(test)
To get familiar with the project, I picked one of the application form tasks to start with. When reviewing two of the existing high-level application form diagram flow, I found out there are some repeated questions again and again. 

3. ?
empower, trust

(test)
To get familiar with the project, I picked one of the application form tasks to start with. When reviewing two of the existing high-level application form diagram flow, I found out there are some repeated questions again and again. 

Next steps

Learning

Online form building admin panel: civiform admin

Online form building admin panel: civiform admin

Situation

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.

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. 

how did we get to the solution?

/ process

The admin platform is in the progress of development, at a certain point the design and development break out in two ways. I started to talk with 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.

The 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.

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.

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 discover and understanding, here are some design challenges for the admin part

/ real problems
  • 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.

Because of the situation/problem above, 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.

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

design development

next step

learning

Back to all work