PHILLY TRUCE’S
App
PHILLY TRUCE’S
App
PHILLY TRUCE’S
App
The Philly Truce app is a community-led violence prevention platform that connects individuals in conflict with trained mediators 24/7, offering an alternative to police intervention
The Philly Truce app is a community-led violence prevention platform that connects individuals in conflict with trained mediators 24/7, offering an alternative to police intervention
PHILLY TRUCE's App
PHILLY TRUCE's App
PHILLY TRUCE's App
PHILLY TRUCE's App
PHILLY TRUCE's App
PHILLY TRUCE's App
PHILLY TRUCE's App
PHILLY TRUCE's App
PHILLY TRUCE's App
Context
Context
Product
Mobile App
Mobile App
Mobile App
Role
UX Design Co-Lead
UX Design Co-Lead
UX Design Co-Lead
Timeline
Nov, 2024 ~ Mar, 2025
Nov, 2024 ~ Mar, 2025
Nov, 2024 ~ Mar, 2025
Team
My Team:
UX Design Co-Lead x2 (Me & Bronson), Apprentices x5
Other Teams:
Mobile & Desktop UX Research Team, Web UX Design Team, Project Management Team, Product Strategy Team, Content Team, Development Team
My Team:
UX Design Co-Lead x2 (Me & Bronson), Apprentices x5
Other Teams:
Mobile & Desktop UX Research Team, Web UX Design Team, Project Management Team, Product Strategy Team, Content Team, Development Team
My Team:
UX Design Co-Lead x2 (Me & Bronson), Apprentices x5
Other Teams:
Mobile & Desktop UX Research Team, Web UX Design Team, Project Management Team, Product Strategy Team, Content Team, Development Team
What is Philly Truce App and why it matters
The Philly Truce app is a community-led violence prevention platform that connects individuals in conflict with trained mediators 24/7, offering an alternative to police intervention .
It empowers users to report disputes or volunteer as mediators using a simple, anonymous interface, helping de-escalate conflicts before they escalate into violence.
The Philly Truce app is a community-led violence prevention platform that connects individuals in conflict with trained mediators 24/7, offering an alternative to police intervention .
It empowers users to report disputes or volunteer as mediators using a simple, anonymous interface, helping de-escalate conflicts before they escalate into violence.
The Philly Truce app is a community-led violence prevention platform that connects individuals in conflict with trained mediators 24/7, offering an alternative to police intervention .
It empowers users to report disputes or volunteer as mediators using a simple, anonymous interface, helping de-escalate conflicts before they escalate into violence.
Why the App required a design
Because conflicts can escalate quickly, the Philly Truce App needed a platform where people could report issues and connect confidentially with trained volunteer mediators in real time. A clear and intuitive design was essential to help users request help easily and get support before things get worse.
Philly Truce is a nonprofit in Philadelphia working to reduce violence through technology. It aims to design a free, anonymous platform that helps students, community members, and Safe Path staff report conflicts along school routes, aiming to prevent violence before it happens.
Because conflicts can escalate quickly, the Philly Truce App needed a platform where people could report issues and connect confidentially with trained volunteer mediators in real time. A clear and intuitive design was essential to help users request help easily and get support before things get worse.
As the UX/UI Co-Lead, I:
Led the direction of the user experience and interface design for core features
Mentored 5 apprentices and provided regular feedback to support their growth
Consulted with the research team to help define research goals for the project
Collaborated closely with the client to refine designs through ongoing communication
Used Figma design systems and prototypes to align development and research teams
Led the direction of the user experience and interface design for core features
Mentored 5 apprentices and provided regular feedback to support their growth
Consulted with the research team to help define research goals for the project
Collaborated closely with the client to refine designs through ongoing communication
Used Figma design systems and prototypes to align development and research teams
Led the direction of the user experience and interface design for core features
Mentored 5 apprentices and provided regular feedback to support their growth
Consulted with the research team to help define research goals for the project
Collaborated closely with the client to refine designs through ongoing communication
Used Figma design systems and prototypes to align development and research teams
Business Goals
Reduce Youth and Community Violence: Used technology to proactively identify and de-escalate conflicts, especially around school routes, before they escalated into violence.
Reduce Youth and Community Violence:
Used technology to proactively identify and de-escalated conflicts, especially around school routes, before they escalate into violence.
Reduce Youth and Community Violence: Used technology to proactively identify and de-escalated conflicts, especially around school routes, before they escalated into violence.
Empower Community-Driven Safety: Provided a trusted, anonymous tool that empowered students, parents, and community members to report incidents
Empower Community-Driven Safety:
Provided a trusted, anonymous tool that empowers students, parents, and community members to report incidents
Empower Community-Driven Safety: Provided a trusted, anonymous tool that empowered students, parents, and community members to report incidents
Build Trust Through Anonymity and Accessibility: Ensured that users feel safe and heard by offering a free, easy-to-use, and anonymous reporting system
Build Trust Through Anonymity and Accessibility: Ensure that users feel safe and heard by offering a free, easy-to-use, and anonymous reporting system
Build Trust Through Anonymity and Accessibility: Ensured that users feel safe and heard by offering a free, easy-to-use, and anonymous reporting system
Demonstrate Social Impact to Attract Funding: Showed measurable outcomes (such as reduced incidents or increased reports) to secure grants, sponsorships, and long-term sustainability.
Demonstrate Social Impact to Attract Funding: Show measurable outcomes (like reduced incidents or increased reports) to secure grants, sponsorships, and long-term sustainability
Demonstrate Social Impact to Attract Funding: Showed measurable outcomes (such as reduced incidents or increased reports) to secure grants, sponsorships, and long-term sustainability.
Results
Results
Impact
Impact
Empower Apprentice Growth: Mentored 5 UX apprentices with no prior experience, helping them grow in design thinking, wireframing, and collaboration.
Empower Apprentice Growth:
Mentored 5 UX apprentices with no prior experience, helping them grow in design thinking, wireframing, and collaboration.
Empower Apprentice Growth: Mentored 5 UX apprentices with no prior experience, helping them grow in design thinking, wireframing, and collaboration.
Enhance Feature Usability Through Testing: Improved usability of the main features by refining user flows and addressing real feedback from testing.
Enhance Feature Usability Through Testing: Improved usability of the main features by refining user flows and addressing real feedback from testing.
Enhance Feature Usability Through Testing: Improved usability of the main features by refining user flows and addressing real feedback from testing.
Improve Client Alignment and Efficiency: Strengthened client alignment by providing frequent updates and visual materials, which helped prevent miscommunication and reduced the need for rework.
Improve Client Alignment and Efficiency: Strengthened client alignment by providing frequent updates and visual materials, which helped prevent miscommunication and reduced the need for rework.
Improve Client Alignment and Efficiency: Strengthened client alignment by providing frequent updates and visual materials, which helped prevent miscommunication and reduced the need for rework.
Process
Process
Process
Phases of the Project
Phases of the Project
I joined the project in Phase 4, where our team focused on finalizing the Incident Reporting and Management Platform (IRMP), the core feature from earlier phases, and developing the Route Management system, the second major feature of the platform
I joined the project in Phase 4, where our team focused on finalizing the Incident Reporting and Management Platform (IRMP), the core feature from earlier phases, and developing the Route Management system, the second major feature of the platform
Phase 2 - Basic Flow & UI
Phase 4 - IRMP & Route (Second Main Feature)
Phase 1 - Build Foundation
Phase 3 - IRMP (Main Feature)
Phase 4 - IRMP & Route (Second Main Feature)
Continuing from the Last Phase
Continuing from the Last Phase
Update & Audit
Rapid Prototyping
New Feature Research
At the start of Phase 4, there was no updated sitemap available. To better understand the current state, I updated the holistic site map and audited the previous designs, identifying several overlooked issues with red colour
The Site map that I updated
Update & Audit
Rapid Prototyping
New Feature Research
At the start of Phase 4, there was no updated sitemap available. To better understand the current state, I updated the holistic site map and audited the previous designs, identifying several overlooked issues with red colour
The Site map that I updated
Update & Audit
Rapid Prototyping
New Feature Research
At the start of Phase 4, there was no updated sitemap available. To better understand the current state, I updated the holistic site map and audited the previous designs, identifying several overlooked issues with red colour
The Site map that I updated
Challenges & Solutions
Challenges & Solutions
Iterating on the IRMP (Main Feature)
Iterating on the IRMP (Main Feature)
Iterating on the IRMP (Main Feature)
The IRMP required significant adjustments based on extensive feedback from user testing and client input. As a result, we had to invest extra time refining the main feature to ensure it met expectations.
The IRMP required significant adjustments based on extensive feedback from user testing and client input. As a result, we had to invest extra time refining the main feature to ensure it met expectations.
Solutions:
Creating a new user flow from the chatbot to the new report
Revising the Unclaimed page in collaboration with the Content team
Adding a filter to differentiate between “In-Progress” reports and those assigned to individual Patrol Officers
Clarifying what qualifies as actionable vs. non-actionable reports
Solutions:
Creating a new user flow from the chatbot to the new report
Revising the Unclaimed page in collaboration with the Content team
Adding a filter to differentiate between “In-Progress” reports and those assigned to individual Patrol Officers
Clarifying what qualifies as actionable vs. non-actionable reports
After adjustments and streamlining the user flow:
Updated IRMP prototype after design adjustments
Unclear needs for Route Management (Second Feature)
Unclear needs for Route Management (Second Feature)
Unclear needs for Route Management (Second Feature)
We lacked clear user needs and direction for the Route Management feature. To address this, we created a flowchart to identify missing elements and had discussions with clients.
We lacked clear user needs and direction for the Route Management feature. To address this, we created a flowchart to identify missing elements and had discussions with clients.
Key issues included:
Missing route details such as location, path, and distance
Unclear patrol procedures for assigned routes
How Patrol Officers clock in/out while on duty
Key issues included:
Missing route details such as location, path, and distance
Unclear patrol procedures for assigned routes
How Patrol Officers clock in/out while on duty
Solution:
With clearer direction from the client, we redefined the Route Management feature and created a new flowchart to guide development
Solution:
With clearer direction from the client, we redefined the Route Management feature and created a new flowchart to guide development
Revised Route Management flowchart based on client input
Wireframes - Route Management
Wireframes - Route Management
I guided apprentices in creating wireframes by reviewing their designs and providing feedback to support their growth. I also created reference wireframes to help them learn and stay aligned with project goals.
I guided apprentices in creating wireframes by reviewing their designs and providing feedback to support their growth. I also created reference wireframes to help them learn and stay aligned with project goals.
App HighLights
App HighLights
Incident Reporting and Management Platform - Create Report
Incident Reporting and Management Platform - Create Report
Incident Reporting and Management Platform - Resolve Report
Incident Reporting and Management Platform - Resolve Report
Route Management - All Routes
Route Management - All Routes
Route Management - Route Details
Route Management - Route Details
Route Management - Route Completed
Route Management - Route Completed
Learning
Learning
Learning
Cross-Team Communication Takes Effort
Cross-Team Communication Takes Effort
Cross-Team Communication Takes Effort
Working with multiple teams such as design, research, content, and development taught me that effective communication requires intention and persistence. Misalignment often happens when assumptions are made.
I learned the importance of over-communicating when needed, clarifying ownership, and using shared tools to keep everyone informed and aligned.
Working with multiple teams such as design, research, content, and development taught me that effective communication requires intention and persistence. Misalignment often happens when assumptions are made.
I learned the importance of over-communicating when needed, clarifying ownership, and using shared tools to keep everyone informed and aligned.
Working with multiple teams such as design, research, content, and development taught me that effective communication requires intention and persistence. Misalignment often happens when assumptions are made.
I learned the importance of over-communicating when needed, clarifying ownership, and using shared tools to keep everyone informed and aligned.
No Perfect Decision, Just the Most Suitable One
No Perfect Decision, Just the Most Suitable One
As a Co-Lead, I often had to make calls under tight timelines, sometimes with incomplete information.
I learned that waiting for the “perfect” solution can slow progress.
Instead, I focused on making the most suitable decision based on our goals, data, and constraints, and then improved it through feedback.
As a Co-Lead, I often had to make calls under tight timelines, sometimes with incomplete information.
I learned that waiting for the “perfect” solution can slow progress.
Instead, I focused on making the most suitable decision based on our goals, data, and constraints, and then improved it through feedback.
Keep Clients Updated to Stay on the Right Track
Keep Clients Updated to Stay on the Right Track
We realized that not checking in with the client often enough led to mismatched expectations.
Giving regular updates weekly, even small ones, helped us stay aligned and build trust.
By sharing our work and decisions regularly, we kept the client involved and avoided bigger issues later on.
We realized that not checking in with the client often enough led to mismatched expectations.
Giving regular updates weekly, even small ones, helped us stay aligned and build trust.
By sharing our work and decisions regularly, we kept the client involved and avoided bigger issues later on.
Other
Projects
Other
Projects
Able Studio Website - Awwwards Honorable Mention
Led the design of Able Studio’s website, earning an Honourable Mention on Awwwards
Led the design of Able Studio’s website, earning an Honourable Mention on Awwwards
Carrefour Taiwan's PSI (Purchase, Sales, and Inventory) System
Reduced system processing time by 40% across 340 stores
Reduced system processing time by 40% across 340 stores