$$ ProgressBar - DoNotEdit $$

CivicTech

AI-Powered Citizen Request Chatbot

CleanShot 2024-02-29 at 22.54.46.gif

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Highlights

AI chatbot to help citizens report problems to cities.

A new AI-powered chatbot product that can categorize reports by citizens of problems in their city, provides the citizen a tracking link for their service request, and automatically notifies the correct city employee about the problem.

TEAM UI/UX Designer (Leo), 1 PM, 2 Engineers, 2 Data Scientists

GOAL Create an easy way for citizens to report service requests to their city through the local government website.

TIMELINE 7 Months

OUTCOME 90% Cost Reduction

EMPLOYER CivicTech

TOOLS Figma

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Section

Citizens need an easy way to report problems to their local government

Current methods for citizens to report a problem to local governments or utility providers either involve long and cumbersome forms or talking on the phone to an untrained call center agent. Existing forms require complex and conflicting categorization be done by the citizen whereas reporting over the phone makes it difficult to give an accurate location on a map or provide a photo of the issue.

Untitled

Untitled

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Section

Competitor products are long forms that require citizens to make complex decisions

The current industry standard method for citizens to report service requests on the web are long, complex web forms with many fields and a lot of complex decision making is required on behalf of the citizen to decide which amongst similar sounding categories their problem fits into.

CleanShot 2022-10-27 at 22.22.06@2x.png

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Section

Reporting via Call Centers was expensive and inefficient, resulted in data errors, and couldn’t collect photos

At the time, citizens reported service requests through CivicTech to local governments and utility providers via call centers. This method was found to be inefficient, costly, and prone to errors, especially regarding accurate location data. Photos couldn’t be attached to a report over the phone.

Untitled

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Section

Custom AI could collect and categorize data and identify missing information

Using proprietary machine learning models, CivicTech is able to take a written description of a problem and accurately categorize it with high precision. This reduces the time and effort needed for citizens to report a problem.

Our goal was to leverage CivicTech’s core AI capabilities to streamline the service request reporting process through a user-friendly interface, allowing citizens to report requests accurately and efficiently on their own devices. The goal was to eliminate human error, enhance scalability, and provide a seamless experience that guides users through the reporting process while collecting all necessary information for problem resolution.

High-level goals were:

  1. Make it fast and easy for citizens to create a service request on the web
  2. Collect photos and more accurate location data
  3. Build a solution that can handle increasing volumes of requests efficiently over time

User Flows

Civic Chat User Flow.png

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Section

Prototypes of a traditional form showed data collection needed to be non-linear

Initially we tried a traditional form that helped citizens pick the correct category through a search field but this still put too much effort on the citizen and we quickly realized that the collection of information about a request didn’t follow a strict sequential order of linear steps. Different problem categories required different pieces of information to fully understand the issue.

Traditional Form Concepts

Screens.jpg

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Solution Step 1

A chat interface provided a familiar interaction that could guide users through questions one-at-a-time and ask the next question based on all previously provided information.

Introduction

1 Opening.png

Description Entry

2 Description.png

Followup Questions

3 Followup.png

Photo Upload

8 Photo Upload.png

Verification Method Selection

5 Verification Method.png

Editing

9 Editing.png

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Solution Step 3

83% task success rate in usability testing

Usability testing was performed on a beta version of the chatbot with 3 users which achieved an overall success rate of 83%. Additionally, three areas of improvement were identified for future revisions.

Submission process

Preview Image.png

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Section

Outcomes

90% cost reduction

The cost to CivicTech for a citizen to report a problem via the chatbot was 90% less, or more, than the cost of using a call center to collect data. The chatbot also enabled reporting locations without an address (such as a fallen tree in the middle of a public park) and enabled citizens to upload photos of their requests which, based on user interviews, were highly valued by city staff, crew managers, and responders.

Market disruption

The first version of the product was still in active late-stages of development when I left the project. When it is released, the chatbot will dramatically disrupt the existing market and bring forth a modern, innovative way for citizens to quickly and easily report a problem to their city.

Takeaways

The primary learnings from this project for me were the various established UI patterns of chat interfaces. I took various components and patterns from other chat products and implemented them in a way that best fit the needs of this project. Sometimes new patterns needed to be created due to the unique requirements of this experience; in particular, editing previous answers without restarting the conversation and helping users understand that their edited answer resulted in a branching event in the conversation flow to explain why some questions may be asked again.

Transfer of technology to call centers

The chatbot won’t entirely replace the need for reporting via a call center. Some citizens will prefer calling in their problem due to aversion to more modern technology or accessibility needs. The proprietary decision making technology CivicTech developed for the chatbot could be used to build better tools to aid untrained call center agents in collecting data.

Further Improvements

Future versions of the chat widget might include viewing all past reported problems, information on active outages, using image recognition on photos to inform the categorization of the problem, paying service bills, and possibly querying knowledge bases for answers to common problems. There is a huge amount of potential for innovation and modernization of communication between citizens and local governments.

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Continuation

More Projects

</aside>