CHI 311 App

A non-emergency services app for the City Of Chicago

CHI 311 App

Reimagining the non-emergency services app for the City Of Chicago.

The City Of Chicago launched the CHI 311 App that was designed to “improve customer experience and delivery of city services.” It was a great new innovative way for people to be able to file complaints, however, the app was difficult to use. This is how I would improve the CHI 311 experience.

Roles

This is a concept project where I assumed the following roles:

  • UX Designer
  • UI Designer
  • Visual Designer

Deliverables

  • Site map
  • Logos and Icons
  • Style Guide
  • Sketches
  • A High-Fidelity Interactive Prototype

Tools

  • Figma
  • Photoshop
  • Illustrator

Research

I interviewed a former Chief Of Staff and other staff members from the 40th Ward Alderperson’s Office to see what kind of complaints they would receive regularly. I also spoke to my neighbors to find out their experience with Chicago’s 311 services.

Findings

  1. Service requests required users to go through long forms.
  2. Residents didn’t know 311 existed.
  3. Users said the website felt very “government”.
  4. There is a definitive list of common service requests placed.

Proposed Solutions

  1. Examine, reorder, and group together questions on forms to reduce the steps needed to successfully submit a request.
  2. Advertise the CHI 311 app at bus stops, train stations, trains, and the back of CTA buses.
  3. Rebrand the design that feels more in line with the City of Chicago. Overhaul the app’s UI to make it more user-friendly.
  4. Feature the most common complaints first to reduce the time searching for a complaint.

Empathy For Residents

With what I gathered through my research, I created these personas. The users of CHI 311 includes any resident of Chicago and I felt it was important to represent the diversity of Chicago through these personas.

View Personas (Figma)

  1. Experience with technology varies from beginner to expert
  2. They may be immigrants
  3. English may not be their first language
  4. Some depend on their family members to fill out forms

Building A New Sitemap

This site map (Figma) was created based on the interviews and research I conducted. I created user flows that reduced the amount of friction users were currently experiencing while improving the speed of submitting service requests which should be the priority of the ap.

Establishing A Style Guide

Since this project’s aim was to reimagine the CHI 311 app, and recognizing the need for updates to the existing UI, I developed a new style guide. I chose to use iconography and type familiar with the city and chose to use Chicago Transit Authority (CTA) signage for inspiration.

View Style Guide (Figma)

Examples of CTA Signs

Rough sketches of UI templates

Examples of original CHI 311 assets

Reimagined CHI 311 assets

Visualizing The Process

Creating rough sketches helped me identify some common interaction design elements other apps used. Sketching also help me visualize templates that could be used for different content types and animation/swiping motions that users could use to navigate the app.

 

Rough sketches of UI templates

Rough Sketches

Creating A Prototype

The creation of a high fidelity prototype revealed new pain points that would require additional investigation. Making service requests was more efficient now, however, some forms required information that most residents would not have off-hand. Other forms has questions like “Is this a business? (If yes, change type code to BBJ)”. There was no explanation as to what “BBJ” was and there was also no place to change the type code either.

View High Fidelity Prototype (Figma)

Service Request Improvements

In my opinion, the main requirement to improve the app was the service request process. Some forms had users to go through as many as 17 steps to complete. Below is a comparison of the original 11-step Graffiti Removal form and the optimized 4-step form I created.

Summary

The CHI 311 App is very large in scale and where empathy is crucial to its success. Although I was able to make the service request function of the app more efficient, there are still other issues that require more investigation, such as:

  1. No heat complaints require a last name value for a building owner. Some buildings are managed by companies so this information is unknown. A person filing a no-heat complaint is probably already under a lot of stress and should be able to complete this request ASAP.
  2. Make sure that the application is available in several languages. We want this app to be usable for individuals whose first language may not be English.