Permit Application Portal & Website Redesign
Transformed the permit application process in the City of Dearborn from offline to online through a website redesign and the design of an online application portal.
Team Size
6 members
Timeline
Jan.2023 - Apr. 2023
Tools
Figma
Photoshop
My Roles
UX Researcher
UX Designer
My Design Process
Understanding
Framing
Exploring
Testing
Designing
Reflecting
Tryout interactive prototoype
Understanding
>>Work Flow
The first step is to understand the background of the project. We spent 2 weeks working with Dearborn Administrative Center staff to understand their current permit application process, the role of stakeholders involved, and terminology. Then, we summarized the current application process into the information flow below.
After our discussion with government officials, we have identified the complex nature of the system and mapped out the current difficulties of the system as
-
All the applications now are submitted in paper format. Major methods for submission include mailing, drop-in, and emailing with downloaded documents.
-
There is no apparent way for applicants to know what is going on with their applications during the process.
-
The merging of departments has caused an internal mess regarding how the applications are assessed and reviewed by different professionals.
>>Stakeholder Interview
After having an overview of the system from government side, in order to understand the real experience of the users, and further understand their struggles in this workflow, we proceeded to conduct user interviews. We have conducted a total of 7 interviews with 6 targeted users and 1 with an Ann Arbor application specialist to learn how other cities deal with similar problems. Among those interview sessions, I took notes in 2 of the interviews and led 2 other interviews.
exploring problem space
interview protocol
>>Competitive Analysis
After understanding user insights, I conducted a competitive analysis focusing on how other cities tackle similar challenges. Specifically, I examined the application processes of the 4 most populous cities in Michigan. The research was conducted based on two key aspects: evaluating the extent to which these cities provided sufficient information to support the application process and assessing the user-friendliness and clarity of their application procedures.
The major insights of the competitive analysis were identified as following
-
The majority of cities employ dedicated online portals for permit applications.
-
The city website typically organizes its application information into distinct sections, facilitating residents in accessing the specific details they require.
-
Many of these portals lack the capability to offer flexible status checks and effective stakeholder communication.
-
Some typography and image uses are not consistent in their websites or portals.
After conducting user interviews, we performed a qualitative analysis of the collected data to identify significant insights using affinity diagramming. We organized our interview notes into over 300 sticky notes based on their connections. As a result, we identified 5 key themes that represent the core concerns of our target users.
In summary, the key user insights were identified as follows:
-
Application Submission: The current paper application process is slow and confusing. Applicants often need to drop-in applications themselves, which cause difficulties for contractors leave far away.
-
Communication Breakdowns: Communication between the city and the applicants is inconsistent and not frequent enough. Unless get rejected, the government do not update information automatically, and users need to call in for updates if experiencing delays other issues.
-
Information Access: User cannot readily find needed information on the website and often need to call in for basic information; Stakeholders who are not the applicant also need access to the information shared between the city and the applicant in their construction process.
-
Inspection Scheduling & Result: Applicants want to be able to request and schedule an inspection besides making phone call and get written records to share with the construction team.
-
Long Process & Lack of Timeline: Applicants are frustrated about long wait times and the application review process timeline not being communicated properly.
>>Initial Solution
Taking into consideration the needs of the users, we proceed on the brainstorming phase to develop possible solutions.
While our initial solution is not restricted to online platforms, the primary focus centers around how to improve the information access and foster better communication channel. As a result, the initial solution comprises two components: a redesigned information structure for the website for better information access and templates for efficient email communication, ensuring users stay informed about the status of their application.
Framing
>>User Persona
We then use the information collected during the research process to create two personas, representing two primary user groups: the new contractor who lacks familiarity with the system, and the experienced contractor who still encounters challenges within the system.
>>Define the Product
Taking in consideration of various constraints and insights, we decide to design an online application process that provide information users need during every step of their application status and also foster effective communication between users and government staff.
And we envision our product to address user needs from following aspects.
Redesigned information structure
Email templates
We then presented our initial solution for experts review and I summarized the insights as following.
>> For website
It will improve the process of how applicants looking for information online like application process overview, the specific requirements for individual permit and common questions. It will reduce the frequency of making unnecessary phone calls and leaving more time for staff to review the application quicker.
>> For email templates
✅ Automated emails will help applicants stat informed about their application.
✅ Maintaining written records of all communication.
✅ Making share of information among stakeholders more effective.
However, the initial prototype still faces obstacles for the following aspects
❌ Inputing applicants email from paper application to the system will lead to additional staff workload
❌ Quickly tracking past application records, since most contractors deal with hundreds of applications during demanded period
❌ Paper applications still remains difficult for non-Dearborn contractors.
Exploring
>>Sketch
After we decided the format and components of our solutions, we used sketching to brainstorm the layout and information structure. Given that our solutions comprise two distinct parts, we divided the group into two teams, with each team assigned to either website sketching or portal sketching. Subsequently, we came together to discuss and consolidate our ideas, incorporating them into a low-fidelity prototype. Among the sketches, I created the website sketches and 3 of the portal sketches.
User needs
Our product
Clear and efficient instruction on required materials and process for permit application
Submitting a permit application is straightforward with an easy-to-follow process
Synchronized information update to all stakeholders
Frequent and instant communication between applicants and staff
Tracking and retrieving application status and history
Redesigned government website with clearer content and information architecture
Designed a permit application portal with a step-by-step permit application process
All stakeholders are added as contacts and will be updated with any feedback
Allow applicants to check and reply to feedback from staff and other stakeholders
Allow applicants to check application status and other information in portal
Sketch Version
Contacts appear as an independent section.
Final Version
Two-column layout with consistent access to contacts.
Version A
Users like the categorization that helps them to know what is going on.
Version B
The table is straightforward for viewing application history.
Final Version
Bolded action needed categorization allows applicants to quickly identify the next steps
Also include the table view for access to application history
+
Iteration Example 1
combined two versions of account page
Testing
>>User Testing
We wrote our user testing protocol to test both government websites and the online portal. We have recruited 7 participants and each last 45-60 minutes. We also ran the modified A/B tests on the portal “my account” page with the 7 participants. I took notes for 1 tests and led 2 other tests.
Iteration Example 2
To accommodate user's preferences for convenient access to contact information, we made a modification to the layout. Instead of featuring contact details as a separate section under the introduction, we implemented a two-column format where contacts consistently appear throughout the website.
Feedback: Online Portal
Permit Status and Feedback
-
Should include more emphasis on permits that require action
-
Should let the user see all their past permits at once
-
Should have more emphasis on feedback within each permit page
Removal of the PDF Application form
-
Abandoning the need to fill out and attach a pdf form of the application during the online application process
-
Letting users fill out the form online instead
Feedback: Website
Reorganizing content
-
Reorganize content to make information more intuitive
-
Include In-context links to the permit portal
-
Stress more on the contact information
Visual changes
-
Removing unambiguous terms
-
Improving typography and visual aids
>>Low-fidelity Prototype
Using Figma, we transformed our sketches and workflow into a low-fidelity prototype, enhancing it by integrating details from both the actual website and paper application. At this stage, the wireframe had reached a more defined level, making it suitable for subsequent user testing. I was responsible for 9 pages in the flow A.
workflow for track status and review feedback
workflow for submit application
workflow for website redesign
>>Workflow
The information architecture of the current permit website is unstructured with information scattered around. It also lacks a meaningful menu to guide user action.
Recognizing the issues identified, we reorganized the information architecture with emphasis on guide guides and elimination of unnecessary elements.
>>Website design guidelines
Designing
>>Redesigned Website
>>Online portal design guidelines
>>Online portal application process
>>Online portal permit status&feedback
>>Presentation
Survey feedbacks from our stakeholders. We received an average of 6.4 (7 as full score).
>>Impacts
The government of Dearborn is currently undergoing a remarkable digital innovation. As the mayor stated, "Innovation is often associated with the private sector, leaving the public sector to play catch-up." We are excited to be actively involved in this transitional phase and contribute our efforts towards the betterment of the community. Through extensive research conducted over the course of the semester and gathering feedback from numerous users and stakeholders, we are confident that our design has the potential to significantly alleviate the challenges faced by residents in managing their application processes and foster an improved communication environment.
Permit-Specific Process
Our current implementation guides the user through the steps of applying for a permit, but each permit type is different and will need to be broken down into its respective steps.
Inspections
Internal System
Reflecting
>>Next steps
Our current implementation does not include the functionality for scheduling and coordinating inspections.
For effective coordination with the portal, it is necessary to have a dedicated government internal service platform that collaborates with the portal to streamline the process.