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
Goals
Design a desktop version logged-in environment for Phila.gov, for viewing and applying for services online.
Design the process to apply online for a residential parking permit.
Through research, understand what features would be ideal for a logged-in environment for citizens.
Ensure all designs are in complete harmony with current look and feel of public-facing Phila.gov site.
Process
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.
![phila survey 1 fix.jpg](https://images.squarespace-cdn.com/content/v1/5d57fb9763fa8d000181f719/1571737117914-6NZ2HH97L6N2T7WV3A2O/phila+survey+1+fix.jpg)
![phila survey 2 fix.jpg](https://images.squarespace-cdn.com/content/v1/5d57fb9763fa8d000181f719/1571737117805-POQHLVG56J9683EXH4PO/phila+survey+2+fix.jpg)
![phila survey 3 fix.jpg](https://images.squarespace-cdn.com/content/v1/5d57fb9763fa8d000181f719/1571737155801-CSHZASYXQP279IR3BMD8/phila+survey+3+fix.jpg)
![phila survey 4 fix.jpg](https://images.squarespace-cdn.com/content/v1/5d57fb9763fa8d000181f719/1571737344316-N6504FJ18ND0BQENMOI9/phila+survey+4+fix.jpg)
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