$$ ProgressBar - DoNotEdit $$
CivicTech
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Highlights
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
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Section
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Section
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Section
High-level goals were:
User Flows
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Section
Traditional Form Concepts
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Solution Step 1
Introduction
Description Entry
Followup Questions
Photo Upload
Verification Method Selection
Editing
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Solution Step 3
Submission process
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Section
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.
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.
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.
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.
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
</aside>