Background

While the official website of the city of Philadelphia, Phila.gov, offers numerous services to citizens, it’s currently lacking a logged-in environment that would generate a more engaging and efficient user experience. Enabling citizens to create an eCitizen account, paired with streamlined services and online submission capabilities, would overall enhance the city’s eGovernment and simplify the processes for managing bureaucratic responsibilities.

Besides my passion for public service and the fact that Philly is near my hometown, I chose to work on this project because the city has identified it needs to enhance its government site’s design and usability.  Validated through research, a logged-in environment with streamlined services could be part of that enhancement. While engaging in services (e.g. paying a fine, getting a permit, making appeals, applying for programs) could still be handled in person, by phone, or by mail, the option to do everything online in a logged-in environment would: 

• Allow citizens to see all things related to their governmental interactions all in one place.

• Enable easy tracking of current engagements and viewing of any previous engagements.

• Create a more controlled experience (citizens wouldn’t be directed to a different site).

• Reduce bureaucratic hassle (personal information would automatically fill in on forms).

• Circumvent the need to download forms for print-out and separate submission.

My Role: Researcher, UX/UI Designer

Client: City of Philadelphia

Project Timeline: 80 hours

Key Design Tools: Sketch, Adobe XD

Research

Research Goals | Competitive Analysis | Survey

Research Goals

• Validate key assumption that users would prefer to handle various bureaucratic responsibilities online, through digital form submission.

• Uncover what sort of personalized information/features users would want or expect to see if they were able to have an online “portal” or eCitizen account with their local government website.

• Understand users’ preferences of how information/features would be presented and viewable in the logged-in environment.

Competitive Analysis

For secondary research, I examined government sites and software for local governments that currently support a logged-in environment for citizens. The analysis helped me understand which features are most common and useful for a personal portal or eCitizen account.

Key Insights:

• The assumption was validated that 100% of “competitors” supporting a logged-in environment for citizens have:

  • Single sign-on (SSO) for streamlined services

  • Digital form submission capabilities

  • Search and/or filters for easy finding of services

  • Viewable activities (both current and previous)

  • Subscribable alerts and/or notifications

• While many government sites include a community calendar (even in the non logged-in environment), one-third of competitors also enable citizens to either sync the calendar details to their personal calendar or maintain their own calendar in the logged-in environment.

• All logged-in environments include contact information for receiving help, and half offer more direct support, resources, or chats.

• Social media integration (getting tagged in specific posts as means of alerts) is only common among half of the “competitors”. Other means of alerts, such as via emails or texts, is more common.

Survey

I created a survey to generate quantitative data (and even some qualitative data), to help validate my assumptions and further give insights into enhancing the current Phila.gov site. The target audience for my survey met the following criteria:

• Adults (ages 18-65), men and women

• Individuals living in and outside of Philadelphia

• Individuals who have had to handle, or will handle, various bureaucratic responsibilities at the local government level

• Individuals who are comfortable with “doing things digitally”

In total, I collected 53 responses. Bureaucratic responsibilities that were asked about include registering to vote, applying for a parking permit, registering a business, paying utility bills, paying or filing an appeal for a parking ticket, etc.

Define

Persona | Storyboard | Sitemap | Comparative Task Flow | User Flow

Persona

With the research findings, I created a primary persona: A Philadelphia citizen that would realistically create an eCitizen account to complete and manage his bureaucratic responsibilities. When it comes to “adulting”, Matt wants his tasks to be as convenient and easy as possible.

Storyboard

I created a storyboard to get inside Matt’s head. Here’s a typical scenario that demonstrates Matt’s feelings and actions in regards to applying for a parking permit.

Sitemap

This sitemap details how the added features (online application and logged-in environment) fit into the existing solution. While both blue and yellow components are introduced to the site, only the yellow were built out for the project scope.

Comparative Task Flow

I made a comparison between the existing task flow and the amended task flow, showing how the added features change and improve the process when applying for a residential parking permit.

User Flow

I then created a user flow, which details the interactions and decision points when applying for a residential parking permit online. Logging in to a user’s eCitizen account is not required for digital submissions, but there would be no Activity Tracker to automatically show the progress of such activities.

Design

Low-Fi Sketches | Mid-Fi Wireframes | UI Designs - Wireflow | UI Kit

Low-Fi Sketches

I started the design ideation process by sketching various screens – some with components added to existing screens, and some completely new screens for the existing site environment. These are just a few examples.

Mid-Fi Wireframes

I then took my sketches and created the mid-fidelity wireframes. Since the goal was to add features to an existing site, many UI designs of Phila.gov are included by default. 

Key changes from the sketches:

• Moving To-Do List to left side

• Having application steps within Cars, Parking, & Transportation environment

UI Designs - Wireflow

I created a wireflow with the high-fidelity screens to show the interactions and relationship between them. While this shows the main flow, the prototype will additionally include more minor screens and modal windows. The general UI designs from the existing site carried over, but I made a few improvements, which include:

• Adjusting button colors and corners

• Adjusting left-side navigation (text, dropdowns, and indentation)

• Using the lighter blue as highlight color in navigation

• Fixing minor, miscellaneous alignments

UI Kit

Test

Prototype | Usability Testing | Affinity Map | Priority Revisions

Prototype & Usability Testing

With the UI screens, I built this high-fidelity prototype in Adobe XD. It includes modal windows, dropdowns, and screens in both the logged-in and non logged-in environment.

Note: This prototype includes the priority revisions that were made after the usability tests.

Affinity Map

I developed this affinity map from the usability test results. The common and relevant findings were organized by successes, roadblocks, and recommendations. While certain recommendations would not be implemented (e.g. the “Services” dropdowns were left on the prototype as they are currently designed on the site), others were considered for design revisions.

Priority Revisions

— View More Projects —