THE CHALLENGE

PROCESS

Discover & Define

• Process Flows

• User Stories & Requirements

Design

• Form Content

• Wireframes & Prototypes

Testing & Evaluation

• Surveys

• Interviews

DISCOVER & DEFINE

The primary challenge for me as a designer was to find out:

How might we get people to safely and efficiently apply for the Cash Payment Program?

Established Goals & Objectives

The Product Management team was tasked with implementing the tools to run the COVID-19 related financial relief program. We knew the program eligibility requirements and timeline, but had to clarify how we would help implement it with our vendors. The Program team needed a mechanism for users to enroll and apply into the City Option program securely. After identifying the identity of the participant, the system would have to determine their eligibility and collect information on how to deliver the cash payment. Internally, we also needed to make applicant data visible and accessible to our Customer Service and Program teams.

I collaborated with the Product Manager to build a flow diagram of the end-to-end process, from the user and staff perspective, on how to collect and process the information.

After creating a visual map of the logic and steps, we identified all impacted systems and any front-end solutions we needed to design through user stories. Those activities uncovered deeper details that we did not expect we needed to develop, like extra features in our internal client relationship management software to process the results of the submitted forms.

❇️ In retrospect, creating the visual process map and user stories helped clarify design and product features we needed to design.

DESIGN

Form Design

The first objective was to design a form. We have worked with a vendor in the past to develop our other enrollment forms, but we decided to assess our options. Ultimately we used their web form builder tool. The advantages of having a web form through them were that we could (1) create a mobile-responsive form, and (2) customize how we intake the data.

As the designer, I coordinated with the following groups of people to develop the content and order of the forms:

1. Worked with the Program team to get all required fields needed to determine if a user was eligible for Cash Payment

2. Collaborated with the Product and Development team to outline the data requirements, like field validation, character restrictions, etc.

3. Iterated with the Enrollment team to translate the form into 4 primary languages: English, Spanish, Chinese, and Tagalog

I also contributed to decide how to format the form using small bits of CSS and HTML. Below is a snippet of how I organized the field requirements.

❇️  Throughout this process, I discovered how necessary it is to collaborate with development, client-facing, and business operations teams in order to make an effective, functional, and accessible design.

Wireframes & Prototypes

While developing the form, we also needed to update our current system to process and display the results of processing the form through our system. The Product team and I worked together on making sure it supported:

1. Our Program team in case forms were unprocessed

2. Our Customer Service team if they had to answer any questions

I used Adobe XD to iterate and prototype features in our system. With user input, I modified any placement and interactions on the prototypes before handing it to the developers to build. Two features we built were:

1. A queue for the Program team to validate if forms had the necessary information, and if the applicant matched our system records as eligible

2. A flag to show the status of the applicant if they received their payment, so Customer Service can answer any questions about their status of their Cash Payment

❇️  Screenshots withheld due to sensitive information in the system. Through prototyping, we were able to quickly assess if our internal users could adopt the features amidst all the new processes in place for the Cash Payment Program.

Testing & Evaluation

The form and features had to be rapidly implemented, thus we decided to do a post-implementation evaluation by reaching out to our applicant users. The evaluation, from planning to execution, lasted 2 months. Since there were multiple communications going out to program participants and their employers (who usually manage their SF MRA), we evaluated clarity of our outreach materials, user motivations, as well as the usability and navigability of the form.

I contacted more than 400 participants with a virtual survey, and interviewed 10 participants as well as 10 employers. The survey had a 7.8% response rate. From the interviews, eight out of ten participants said the application was easy. With no major or specific feedback on the form, we continued to send the form without modifications for the remainder of the program’s duration.

OUTCOMES

Program Success

The program exceeded it’s expected goal of providing COVID-19 financial relief to more than 50% of eligible participants. Many projects contributed to the program’s success at its conclusion in 2020; the form and internal features played a role in making it accessible and easier for the SF City Option team to implement the project, and for participants to read, access, and submit their information securely.

LESSONS LEARNED

Remote Research

This project challenged me to conduct remote research in a short time period. I was able to leverage certain tools, like Zoom, SurveyMonkey, and Transcribe by Wreally to quickly collect, analyze, and present user feedback to our Management, Product, and Program team.

Web Published Blogs related to the SFCO Cash Payment Program

SF Mayor News Release:

https://sfmayor.org/article/mayor-london-breed-announces-plan-free-138-million-support-workers-during-covid-19-pandemic

SF Examiner:

https://www.sfexaminer.com/news/offer-of-500-bonus-intended-to-help-with-covid-related-expenses/