01 The plan

Core proposition

San Francisco is an icon of modern technology, and its’ home to more than 2,000 tech companies, the densest concentration in the world. Even so, the City is falling behind when it comes to the digitization.

Citizens in need of government services will notice in a minute that it is hard to find, apply for, and receive the services in a timely manner. The City government understands the importance of joining the digital world, and the team has been making continuous effort for a better web service. As a designer I wanted to dig deep into what users want through SF.gov website, when they need common government services.

Goals & Objectives

Design the process to request a birth, marriage, or death certificate fully online.
Design the process to apply for a marriage service (currently offering a video marriage service due to COVID-19 pandemic.)
Design fully automated application systems for above certificates and marriage services.

Challenges & User Pain points

Information is massive

Government websites are different from commercial websites, due to the nature of handling different types of services rooted in citizens' daily lives.

The city website is failing to provide user-oriented approaches

Citizens use the websites out of necessity, and what they want is simple steps to complete what they need to do. Users are facing difficulties to reach the information, and have to call to the office in the end.

Not an update but a re-build

Because the structure of the current service pages are a patching of different source of information, this project was actually a re-build. It was a challenge to compose a structure so that all types of users can understand and complete their process without thinking about much.

02 The process

Discovery

Research methodologies

I conducted two separate researches; "Know current SF.gov website" and "Know other county websites". While observing other county websites, I found it very interesting that there was a huge gap among counties in California on how to deal with online services.

Purpose: Understand the structure of the existing website, and identify the problems.

What is the process like when a user attempts to apply for birth/ death records, and marriage license?
How the pages are related to each other? Which divisions are offering the service, and is there a consistency among pages from different departments?
What makes the application process painful for users?

View SF.gov analysis

Research 2: Know other county websites

Purpose: Understand how other government institutions are digitizing their services.

Which organizations are going ahead of others in terms of modernizing public services?
How can users proceed with the target actions, such as applying for certificates or getting married?
How do other organizations deal with the massive amount of information?

View other county analysis

Research findings

Under COVID-19 situations, there's been a high demand of citizens to know which services are affected, and how the county is providing the services.

The process of getting married is not easy to understand. Users want clear instructions.

When applying for a certificate, users need to know the basic information at a glance, such as what methods are available to apply for, which forms are required, how long it will take to process an order, and how much. Only one county (Santa Clara) has a well-structured information to answer those.
Another excellent feature to help users who are not familiar with the application process is the internal tool of Alameda county. The tool combines all complicated application processes into one platform, so that users don’t have to think about what to do next.

User Interviews/ surveys

To achieve better emphasis for end-users, I set up good quality 1 on 1 interviews, along with quantitative user surveys.

Participants

Total number: 15 (surveys 13, 1 on 1 interviews 2)
They are from different demographic backgrounds, and all live in the US
Most of them previously used government services online

Coverage

The questions consisted of two areas: about government website experiences, and about SF.gov website.

Which services do you use online, and what are the pain points of using those?
What do you expect for online government services?
What type of services do you expect to be available online?
What do you think about the current SF.gov website?

Interview findings

Not a small number of users are frustrated with using government websites.

Under COVID-19 situation, government websites are failing to address the needs in a timely manner.

Users expect for SF.gov website to be equipped with a holistic online application system, whether it is personal or business.

For users, COVID-19 is the major concern and the reason to access government websites. They don't find the websites easy to use.
It takes time to reach the information they need.
Users expect for government websites to be informational, yet simple and straightforward.
Many users don’t use city or county websites so often.
The majority of the participants thought that the current SF.gov website, compared to other government websites,
was easier to navigate and they found the information they needed.
Some “nice to have” features include bookmark, online help chat, online request forms, and notification of important information updates. All of these seems feasible.

Define

Strategy blueprint

After the thorough researches and interviews, I made clear what to be achieved.

Provide one-stop platform for users to apply for different kinds of personal records (birth, death, and marriage).

Build a simple and easy-to-follow app within the website (to replace VitalChek).
Users should be able to apply for any certificate by just answering each question.

Make the application process explicit.

Describe an easy 1.2.3 process to follow (especially for marriage application).

Show different options to apply, and use a table so that users can compare those from different perspectives (cost, time, to do).

Display different options at a glance, and users can easily understand the difference, what to do, and what's required for each option.

Emphasize CODID-19 related information In the top section of each page. Show people which services are available during CODID-19 period.

Persona development

I created two personas to reflect San-Franciscans who are in need of using the services the City has to offer. Government websites are for every citizen, regardless of age, gender, and ethnicity. So these two have totally different demographic backgrounds, even though they live in the same city.

Site map

The site map is for Personal Record section. I categorized into three; "Certificates", "Marriage and Domestic Partnership", and "Other Services". Eventually I focused on "Birth Certificates" and "Marriage" services. I added 2 fully-automated features (tools) within the SF.gov site that allow users to apply for certificates and marriage licenses.

Ideate

Sketches

Personal Records page

As the starting page of the project, the landing page "Personal Records" should keep the existing design, and still usability can be improved.

Birth Certificate (age over 3) page

"Birth Certificate" page needs more information so that users can understand at a glance what is required to get a certificate.

Wireframes

For ideating other pages visually, I jumped into wireframes without sketches. The government website is content-heavy, and wireframes worked better than sketches to try different layout patterns to compare.

Birth Certificate tool

This tool within the website should replace the existing 3rd party product (VitalChek).
Some counties have their own fully-automated systems for certificate services, so I wanted to achieve the same.
I used 1 page per question, so that users can just follow the processes by answering one by one. Also I used a little bigger font (20 px), so that even seniors can read easily.

03 The design

Design directions

Bland & logo

Since I work within the previously established design constraints, all design components should be consistent throughout my new pages. I picked some elements from the existing SF.gov pages.

Design, design, design

Before & After

It's time to combine all design ideas/ components and work on Figma with attentions to every detail. To show how I ended up designing the feature addition project, here I'm comparing "before and after". These two features are an example of how the structure has been "re-built". Please compare!

Birth certificate application

BEFORE

AFTER

Marriage service

BEFORE

AFTER

Prototype

After designing main features, I added more pages to create prototypes. Prototype was divided into two; "Birth certificate functionality" and "Marriage license and ceremony functionality".
Check the prototypes on Figma!

Birth certificate functionality

With the prototype, users should be able to gather information for birth certificate age over 3, and apply for a copy via the online tool.

Marriage license and ceremony functionality

With the prototype, users should be able to gather information to get married in the City. And they can apply for a license and book a video ceremony via the online tool.

04 The findings

Usability testing and problems

Usability testing

Participants

5 testers age 30s and 40s with different demographic background
All of them had used some government websites in the past, but none of them had used SF.gov website

Methodology

All tests were online 1 on 1 by sharing tester’s screen.
Only minimum background information about the app was provided to users
Users were asked to think aloud for each process

Testing scenarios

Completion rate: 100%
Error free rate: 100% (No significant errors that prevented users from going forward)

Affinity map - the results

I created the affinity map after user testing was complete. I categorized items into Priority 1, 2, and 3. Many items were easy to fix, and I put the majority of items in the P1 category. The major issue was the structure of marriage pages, which would require further iteration to fix to the deeper level.

The problems and iterations

Because marriage applications require a large amount of information and complex processes, all major problems were around the marriage area. Here I'm showing two of those.

#1 Page structure of the marriage pages

This was the most difficult part of this project. I updated the initial design to include visible steps, but the structure still need further works to be perfect. I anticipated that users take a look at all steps first, then go to the application tool. But the majority of the users wanted to jump into the tool by skipping the contents-heavy pages. More clear instructions are required.

#2 "Marriage certificate" and "marriage license"

In the Personal Records page, differentiating "marriage certificate "and "marriage license" was still failing, as users select certificate instead of license to start a marriage process. Need to provide more intuitive design so that users can select the right starting page.

Takeaways

Non-profit websites should always consider how to streamline services, especially under this pandemic period.

What I enjoyed the most with the project was to update the structure itself for a better UX. It was extremely difficult to provide easy steps to navigate users through this government website. I learned that users won't behave just as designers want them to do. They "glance and scan" rather than "read'.

When something like COVID-19 hits citizen's lives, it is surprisingly difficult for users to receive necessary information in a timely manner from a county website. Non-profit websites should always consider how to streamline services, especially under this irregular period.
Government websites are contents-heavy by nature, and majority of users find it difficult to reach the information they need. And it's designers' job to organize contents. I think San Francisco county website still has so much areas to be upgraded, and the areas for this project is just the tip of the iceberg.

Role

Timeline

Tools

01

The plan

02

The process

03

The design

04

The findings