STL City Permits

CityServ, St. Louis Missouri’s streamlined platform for Code Inspections and Compliance.

Project Brief

STL City Permits, St. Louis Missouri’s CityServ platform sought out a UX/UI Designer to redesign their platform with improved permit-applying processes for citizens and streamline internal tools for inspectors, contractors and government officials.


STL City Permits, St. Louis Missouri’s CityServ platform sought out a UX/UI Designer to redesign their platform with improved permit-applying processes for citizens and streamline internal tools for inspectors, contractors and government officials.


Project Goal

Overall, for each part of the CityServ platform, there were different goals for each section. An overlapping theme for many of the sections was to reduce communication errors between applications and inputted information between employee’s being missed.

Overall, for each part of the CityServ platform, there were different goals for each section. An overlapping theme for many of the sections was to reduce communication errors between applications and inputted information between employee’s being missed.

Project Outcome

This short-term, one section project turned into a full platform redesign, rescoping current features, adding functionality that was missing and updating design components.

This short-term, one section project turned into a full platform redesign, rescoping current features, adding functionality that was missing and updating design components.

Project Overview
Timeline

5 Months

Team

Project Lead

Developers

UX Designer (me)

Collaborated With

Stakeholders

City Employees

Development Team

Tools

Figma

Project Process

Project Background

Why Did CityServ Seek Out A UX Designer?

The Project Lead at CityServ reached out to me initially with insights from their Building Permit Application that St. Louis Missouri's city members and permits department employees. This is a unique case where because it is a city website, the people of St. Louis are long story short, forced to use it (lol). They have been able to get away with not having an updated UI for the past 10 years.


The positive feedback from the employee’s on this short-term, one-section project turned into a complete redesign of the platforms’ public-facing site that was getting the most complaints from the city employees handling the permits coming through. I also worked on an internal system for different employees of the city that use Cityserv in their day-to-day.

The Project Lead at CityServ reached out to me initially with insights from their Building Permit Application that St. Louis Missouri's city members and permits department employees. This is a unique case where because it is a city website, the people of St. Louis are long story short, forced to use it (lol). They have been able to get away with not having an updated UI for the past 10 years.


The positive feedback from the employee’s on this short-term, one-section project turned into a complete redesign of the platforms’ public-facing site that was getting the most complaints from the city employees handling the permits coming through. I also worked on an internal system for different employees of the city that use Cityserv in their day-to-day.

Shaping The Design Mindset

The Design Constraints To Consider

Discussing the site redesign with the Project Lead shaped how I had to approach redesigning the site in a realistic way that would be sustainable longterm for the team to maintain and update for years to come. The design constraints I had to consider were:

Different sections pertain to different types users.

A streamlined, design system of components to make updates quickly as the city requests them.

House and display massive amounts of stored historical records and data.

They are not going to update the UI again for probably another 10 years.

Shaping The Design Mindset

The Design Constraints To Consider

Discussing the site redesign with the Project Lead shaped how I had to approach redesigning the site in a realistic way that would be sustainable longterm for the team to maintain and update for years to come. The design constraints I had to consider were:

Different sections pertain to different types users.

A streamlined, design system of components to make updates quickly as the city requests them.

House and display massive amounts of stored historical records and data.

They are not going to update the UI again for probably another 10 years.

Shaping The Design Mindset

The Design Constraints To Consider

Discussing the site redesign with the Project Lead shaped how I had to approach redesigning the site in a realistic way that would be sustainable longterm for the team to maintain and update for years to come. The design constraints I had to consider were:

Different sections pertain to different types users.

A streamlined, design system of components to make updates quickly as the city requests them.

House and display massive amounts of stored historical records and data.

They are not going to update the UI again for probably another 10 years.

CityServ’s website before the redesign

Originally designed in 2011. From doing my own color contrast tests it did not pass the current WCAG AA standards.

Originally designed in 2011. From doing my own color contrast tests it did not pass the current WCAG AA standards.

Redesign
Each permit section of CityServ serves a different purpose for multiple types of users
Because each section of the website has a different purpose, I will explain each and the redesign impact. All designs received feedback from the departments each section it impacted and then was shipped to the developer.
Building Permit Request Form
People using this form
Homeowners
Business Owners
Contractors

Problems - Complaints from the city Permit Clerks:

People were not filling out the request form correctly.
People were skipping steps required steps when the system should not let them.
Solution
Step-by-step form
Left-side form section labels for users to anticipate what they need to fill out next.
Steps labeled when required and optional.
icon added to clarify terms.

Housing Conservation Certificate Application

Housing Conservation Certificate Application

People using this form
Homeowners
Landlords
Contractors

Problems - Complaints from the city Permit Clerks:

People were not reading the CTA (call to action) messages
Caused the city to have to charge at 25% refund processing fee due to a influx of requesters not properly informed that they had already booked an inspection in the past
Solution
CTA’s defined by using stark colors to contrast from the rest of the content on the page.
Reduced background opacity to warn users of violations or if they have a pending inspection booked before submitting payment details.
Board Up Dashboard
People using this dashboard
Inspectors
Assistants

Problem - Complaints from contractors and higher-ups:

Requests were getting “lost” and “unnoticed” in the request system in place.

Control Pannel
Permits
Inspections
Contact Us
Login
Register
Board-Up Control Pannel
3
New
Message Inbox
24
New
Pending Board-Up
0
CSB Pending Results
Messages
My Inbox
Send Message
From
Subject
Date Sent
Time
Actions
Last Name, First Name
New Board Up Requested: 5413 MCMILLAN AVE
00/00/00
00:00 AM
Last Name, First Name
New Board Up Requested: 5413 MCMILLAN AVE
00/00/00
00:00 AM
Last Name, First Name
New Board Up Requested: 5413 MCMILLAN AVE
00/00/00
00:00 AM
Last Name, First Name
New Board Up Requested: 5413 MCMILLAN AVE
00/00/00
00:00 AM
Last Name, First Name
New Board Up Requested: 5413 MCMILLAN AVE
00/00/00
00:00 AM
0
10
per page
24 items in 3 pages
Solution
Defined top sections that inform the user how many new Messages and Board Up requests received and status updates on CSB Pending Results.
Food Truck Owners Hub
People using this dashboard
Food Truck Owners

Problem - Complaints from inspectors:

Food truck owners were not responding to messages that inspectors were sending.

Problem - Troubleshooting emails from food truck owners to the city:

Unsure of where to upload reports
Control Pannel
Permits
Inspections
Contact Us
Login
Register
Chillin’ and Grillin’ - Truck #1
Actions
Overview
Certificate Number
22-585
Issue Date
5/24/22
Renewal Due Date
5/24/23
Status
Issued
Public Page Status
Visible
Messages
Ms. Sampedro
Oct 22,2022 4:04 PM
We reviewed your certificate today and you are approved to serve at your next event.
Thank you and thanks for the prompt response!
I had one question about the carbon monixide alarm
type message here...
Send
Messages
Propane/CNG Piping Leak Report
Kitchen Suppression System Report
Ownership Information
Additional Contact Information
Solution
“Overview” section to inform users on their status.
Side section navigation for users to easily view where they have to upload reports and view the approval status.
Users will be prompted by an email that they have a new message, with a button to to view and be prompted to the Message screen.

Building Permits Dashboard

People using this section
Permit Clerks

Problem - Complaints from permit clerks:

Problem - Complaints from

permit clerks:

Color of sections is too blocky to read all day

The Building Permits house a lot of information causing confusing navigation between sections.

Solution

A side navigation for the Permit Clerks to navigate to each section and improved contrast and hierarchy within the UI.

Project Reflection

Things that I learned

I love designing internal tools and working closely with the users that will use them everyday

It felt like my work really had an huge impact on a whole city (literally). Receiving consistent feedback impacted the success of the designs and creating genuinely useful solutions.

If you want people to share things with you, they must feel comfortable doing so, and feel like they can trust you with what they are sharing.

I was confused for a while about why getting feedback from the St. Louis employees was hard. It frustrated me because I was coming in with the perspective of "Hey, I am trying to make the web platform you use for work, easier to use!" I did not realize that employees were hesitant to tell me anything because they thought it could get back to their employer.


Changing my mindset within gathering feedback had to be clear upfront on that they would be anonymous and I would only handle the information.

Project Reflection

Things that I learned

I love designing internal tools and working closely with the users that will use them everyday

It felt like my work really had an huge impact on a whole city (literally). Receiving consistent feedback impacted the success of the designs and creating genuinely useful solutions.

If you want people to share things with you, they must feel comfortable doing so, and feel like they can trust you with what they are sharing.

I was confused for a while about why getting feedback from the St. Louis employees was hard. It frustrated me because I was coming in with the perspective of "Hey, I am trying to make the web platform you use for work, easier to use!" I did not realize that employees were hesitant to tell me anything because they thought it could get back to their employer.


Changing my mindset within gathering feedback had to be clear upfront on that they would be anonymous and I would only handle the information.

Project Reflection

Things that I learned

I love designing internal tools and working closely with the users that will use them everyday

It felt like my work really had an huge impact on a whole city (literally). Receiving consistent feedback impacted the success of the designs and creating genuinely useful solutions.

If you want people to share things with you, they must feel comfortable doing so, and feel like they can trust you with what they are sharing.

I was confused for a while about why getting feedback from the St. Louis employees was hard. It frustrated me because I was coming in with the perspective of "Hey, I am trying to make the web platform you use for work, easier to use!" I did not realize that employees were hesitant to tell me anything because they thought it could get back to their employer.


Changing my mindset within gathering feedback had to be clear upfront on that they would be anonymous and I would only handle the information.

Additional projects for your viewing enjoyment

Hello Cirkl

MACC

Additional projects for your viewing enjoyment

Hello Cirkl

MACC

Additional projects for your viewing enjoyment

Hello Cirkl

MACC

made by nicole

Linkedin

nicolesinsight.uxui@gmail.com

made by nicole

Linkedin

nicolesinsight.uxui@gmail.com