A Civic Organization Portal
UX case study
UX case study
At a Glance
Cà Phê Convo:
A mobile app designed to teach conversational Vietnamese with an emphasis on pronunciation, everyday topics, and dialect choice
Roles:
UX Research / UX Design / UI Design & Prototyping
Tools
Figma / Pen & Paper / Figjam
Background
Living in DC meant that my interest was piqued for a more "civically-minded" project. One day I stumbled upon a the DPR's PDF-based application for dog park petitions, and thought it would be the perfect candidate for a UX project.
Challenge:
Add a feature to the DPR website that helps citizens apply and campaign for new dog parks in their neighborhood
Process:
The Double Diamond
Discover Phase
Competitive Analysis
This method revealed these key insights:
Portability and shareability are key drivers of petition success
Some platforms signature technology may not be considered legally binding
Emphasis on storytelling and social justice helps promote cause
Discover Phase
Competitive Analysis
This method revealed these key insights:
Portability and shareability are key drivers of petition success
Some platforms signature technology may not be considered legally binding
Emphasis on storytelling and social justice helps promote cause
User Interviews
Dig deeper into experiences, needs, and pain points
Validate/invalidate assumptions
User Interviews - Main Goals
Learn what tools organizers are currently leveraging to get dog park applications completed and approved
Learn about the resources required - time, money, tenacity, etc
Learn about "barriers" to successful dog park applications
Participants
5 community organizers with experience with the dog park applications process (3 complete, 2 underway)
Interview Methods
2 phonecalls
3 video chat
Users were candid about the challenges and joys of the process. Organizers had a high degree of variability in their perception of the ease of the process. Unfortunately, many organizers dealt with a high level of negative emotions, using words like "frustrating" and "fed up" to describe a process that to them, felt intentionally obstacle-filled.
Themes Emerge
Perception that they are working "against" and not "with" the government
A generally unfavorable impression of the accuracy and professionalism of government website technology
[Creative] use of other technologies (besides the ones provided by the government) to expedite the process
Some sense that process was somewhat unclear due to the format, density, and wordiness of the original PDF application
Self-reports of high levels of persistence as a contributor to petition success
“I need help quickly consolidating the community support that will generate momentum for the dog park application and creation process."
Problem Statements:
Problem Statements:
1. The analog nature of the current dog park petition process (print, fill, and mail in submissions) causes dog park petitioners to perceive that they don’t receive adequate and timely feedback or support in the proposal process. Dog park proposal organizers are frustrated that this process, which requires some back and forth, can become stalled with little to no communication from the government, or visibility as to what’s going on during the wait.
2. The current signature collection process is analog, which requires organizers to physically travel to various locations to collect wet signatures. Organizers are frustrated that the process takes so long and is so inefficient. Particularly, organizers feel that they’d have a better response rate if they had an option to share the petition with neighbors in a way that allows them to read it at their leisure, instead of feeling pressured to give an immediate yes or no during community outreach. These barriers are not only a source of frustration, but also cost organizers considerable time and hinder the momentum of the entire proposal process.
Develop Phase
Feature Map
Users frustrations suggest a need for features could provide the following:
Digital means for task completion, in order to save time and paper waste
More structure and clarity around the steps of the application process and where they are in the sequence
Easier access to critical information needed to take next steps in the process (up-to-date contact information, addresses, etc for government players)
A visually streamlined way to keep track of government communications and their timeliness
Nice to Have
Petition Optimization Recommendations
Rejection Reason Code
Can Come Later
Petitioner Type
Participant GIS Map
Must-Have
Proposal Dasbhoard
Multi-step Form
Checklist
Status Tracker
Sign & Share
Latest Communication
Develop Phase
Feature Map
Users frustrations suggest a need for features could provide the following:
Digital means for task completion, in order to save time and paper waste
More structure and clarity around the steps of the application process and where they are in the sequence
Easier access to critical information needed to take next steps in the process (up-to-date contact information, addresses, etc for government players)
A visually streamlined way to keep track of government communications and their timeliness
Nice to Have
Petition Optimization Recommendations
Rejection Reason Code
Can Come Later
Petitioner Type
Participant GIS Map
Must-Have
Proposal Dasbhoard
Multi-step Form
Checklist
Status Tracker
Sign & Share
Latest Communication
Develop Phase
Develop Phase
Feature Map
Users frustrations suggest a need for features could provide the following:
Digital means for task completion, in order to save time and paper waste
More structure and clarity around the steps of the application process and where they are in the sequence
Easier access to critical information needed to take next steps in the process (up-to-date contact information, addresses, etc for government players)
A visually streamlined way to keep track of government communications and their timeliness
Nice to Have
Petition Optimization Recommendations
Rejection Reason Code
Rejection Reason Code
Can Come Later
Petitioner Type
Petitioner Type
Participant GIS Map
Participant GIS Map
Must-Have
Proposal Dasbhoard
Multi-step Form
Checklist
Status Tracker
Sign & Share
Latest Communication
Task Flows
Next, I translated these jobs to be done and features into a high-level flow.
Note: The following asset is probably a hybrid between a user/task flow. I was still learning, and needed to move on :)
I combined multiple flows into one using cascading diamonds to communicate a dashboard style of choosing different tasks to complete. The main tasks flows I ended up designing for were:
A. Activity Viewing & Filtering
B. Petition Signature Collection
Wireframes
Time to sketch! I did a few lo-fi mockups of the main proposed features:
Lo-fi Wireframes
Some critiques of these early sketches, especially the petition form (top right), mentioned that I basically took the PDF form version and digitized it with no other changes. Oops! From there, I started looking at some more design patterns for inspiration, and adjusted my mid-fi screens accordingly.
Develop Phase
Develop Phase
Hi-fi Wireframes
Some critiques of these early sketches, especially the petition form (top right), mentioned that I basically took the PDF form version and digitized it with no other changes. Oops! From there, I started looking at some more design patterns for inspiration, and adjusted my mid-fi screens accordingly.
Flow A: Activity Monitoring
Below is a view of the main dashboard. A complaint of most users was feeling unsure of where they were in the process, and knowing what progress had been made on their end and on the government end. There's a preview of activity on the dashboard, and two places to click into to view more activity detail.
At a Glance
DPR Dog Parks
A desktop-based add-a-feature project focused on helping community organizers galvanize support for new dog parks in DC
Roles:
UX Research / UX Design / UI Design & Prototyping
Tools
Figma / Pen & Paper / Figjam
Background
I lived on Capitol Hill while completing this project. While I didn't work in politics, living on the Hill inspired a newfound interest in civic engagement, so I chose "Government" as the sector for this first capstone project. Somehow I stumbled across this section of the DC's Department of Parks and Recs site – it helps you locate local dog parks and mentions the possibility of applying to have a new one built in your community. I'd already seen some pretty rough looking government sites, but nothing quite this untidy or outdated! I did enough research to find out that not only were the website and PDF application an eyesore, but that they were exacerbating the stress of an already complicated process. Despite the unfamiliarity of the topic, I found the idea of working on a feature that facilitates civic engagement for everyday citizens intriguing and meaningful.
Challenge:
Add a feature to the DPR website that helps citizens apply and campaign for new dog parks in their neighborhood
Process:
The Double Diamond
Problem
Divergent
Convergent
Discover
Define
Solution
Divergent
Convergent
Develop
Deliver
Problem
Solution
Problem Statement
Discover Phase
Competitive Analysis
This method revealed these key insights:
Portability and shareability are key drivers of petition success
Some platforms signature technology may not be considered legally binding
Emphasis on storytelling and social justice helps promote cause
User Interviews
Dig deeper into experiences, needs, and pain points
Validate/invalidate assumptions
User Interviews - Main Goals
Learn what tools organizers are currently leveraging to get dog park applications completed and approved
Learn about the resources required - time, money, tenacity, etc
Learn about "barriers" to successful dog park applications
Participants
5 community organizers with experience with the dog park applications process (3 complete, 2 underway)
Interview Methods
Methods
2 phonecalls
3 video chat
Users were candid about the challenges and joys of the process. Organizers had a high degree of variability in their perception of the ease of the process. Unfortunately, many organizers dealt with a high level of negative emotions, using words like "frustrating" and "fed up" to describe a process that to them, felt intentionally obstacle-filled.
Define Phase
Themes Emerge
Perception that they are working "against" and not "with" the government
A generally unfavorable impression of the accuracy and professionalism of government website technology
[Creative] use of other technologies (besides the ones provided by the government) to expedite the process
Some sense that process was somewhat unclear due to the format, density, and wordiness of the original PDF application
Self-reports of high levels of persistence as a contributor to petition success
“I need help quickly consolidating the community support that will generate momentum for the dog park application and creation process."
Though some of the breakdown in the process is due to constraints out of my control (ie government speed), user interviews revealed that there were still changes that could be implemented to change the perception of the government's helpfulness in keeping the process moving, and save organizers some valuable time
Problem Statements:
1. The analog nature of the current dog park petition process (print, fill, and mail in submissions) causes dog park petitioners to perceive that they don’t receive adequate and timely feedback or support in the proposal process. Dog park proposal organizers are frustrated that this process, which requires some back and forth, can become stalled with little to no communication from the government, or visibility as to what’s going on during the wait.
2. The current signature collection process is analog, which requires organizers to physically travel to various locations to collect wet signatures. Organizers are frustrated that the process takes so long and is so inefficient. Particularly, organizers feel that they’d have a better response rate if they had an option to share the petition with neighbors in a way that allows them to read it at their leisure, instead of feeling pressured to give an immediate yes or no during community outreach. These barriers are not only a source of frustration, but also cost organizers considerable time and hinder the momentum of the entire proposal process.
Develop Phase
Feature Map
Users frustrations suggest a need for features could provide the following:
Digital means for task completion, in order to save time and paper waste
More structure and clarity around the steps of the application process and where they are in the sequence
Easier access to critical information needed to take next steps in the process (up-to-date contact information, addresses, etc for government players)
A visually streamlined way to keep track of government communications and their timeliness
Nice to Have
Petition Optimization Recommendations
Rejection Reason Code
Can Come Later
Petitioner Type
Participant GIS Map
Must-Have
Proposal Dasbhoard
Multi-step Form
Checklist
Status Tracker
Sign & Share
Latest Communication
Task Flows
Next, I translated these jobs to be done and features into a high-level flow.
Note: The following asset is probably a hybrid between a user/task flow. I was still learning, and needed to move on :)
I combined multiple flows into one using cascading diamonds to communicate a dashboard style of choosing different tasks to complete. The main tasks flows I ended up designing for were:
A. Activity Viewing & Filtering
B. Petition Signature Collection
Wireframes
Time to sketch! I did a few lo-fi mockups of the main proposed features:
Lo-fi Wireframes
Some critiques of these early sketches, especially the petition form (top right), mentioned that I basically took the PDF form version and digitized it with no other changes. Oops! From there, I started looking at some more design patterns for inspiration, and adjusted my mid-fi screens accordingly.
Hi-fi Wireframes
Some critiques of these early sketches, especially the petition form (top right), mentioned that I basically took the PDF form version and digitized it with no other changes. Oops! From there, I started looking at some more design patterns for inspiration, and adjusted my mid-fi screens accordingly.
Flow A: Activity Monitoring
Below is a view of the main dashboard. A complaint of most users was feeling unsure of where they were in the process, and knowing what progress had been made on their end and on the government end. There's a preview of activity on the dashboard, and two places to click into to view more activity detail.
Below is the next screen in the activity monitoring flow. Here you can view all activity in a notification/list style. There are also options for filtering activity by who is doing the activity, what was done, or what asset was involved.
The Application Process sidebar with progress indicating icons, though not directly part of the activity feed, helps users cross-check individual activities with the entire application process and its steps.
Flow B: Petition Signature Collection
The original petition packet provided a few lined pages for collecting wet signatures in person. While this method can work, for many it was time consuming and tedious. It also doesn't allow for asynchronous sharing or signing – signatures can only be collected one at a time and on the spot. Because of these problems, some users avoided the paper method all together, and leveraged tools like change.org or Google Forms for signature collection. This flow aims to address these issues.
From the main dashboard, users can access the petition center through the side navigation bar or the large action cards.
Users can then collect new signatures or view their list of signatures. The collection module has tabs that can toggle between both functions.
Users can then return to the petition center to view the same action options as before - collecting and viewing, or options for sharing.
