drag
drag
drag

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
  1. Reduce Youth and Community Violence: Used technology to proactively identify and de-escalate conflicts, especially around school routes, before they escalated into violence.
  1. Reduce Youth and Community Violence:
    Used technology to proactively identify and de-escalated conflicts, especially around school routes, before they escalate into violence.
  1. Reduce Youth and Community Violence: Used technology to proactively identify and de-escalated conflicts, especially around school routes, before they escalated into violence.
  1. Empower Community-Driven Safety: Provided a trusted, anonymous tool that empowered students, parents, and community members to report incidents
  1. Empower Community-Driven Safety:
    Provided a trusted, anonymous tool that empowers students, parents, and community members to report incidents
  1. Empower Community-Driven Safety: Provided a trusted, anonymous tool that empowered students, parents, and community members to report incidents
  1. Build Trust Through Anonymity and Accessibility: Ensured that users feel safe and heard by offering a free, easy-to-use, and anonymous reporting system

  1. Build Trust Through Anonymity and Accessibility: Ensure that users feel safe and heard by offering a free, easy-to-use, and anonymous reporting system

  1. Build Trust Through Anonymity and Accessibility: Ensured that users feel safe and heard by offering a free, easy-to-use, and anonymous reporting system

  1. Demonstrate Social Impact to Attract Funding: Showed measurable outcomes (such as reduced incidents or increased reports) to secure grants, sponsorships, and long-term sustainability.

  1. Demonstrate Social Impact to Attract Funding: Show measurable outcomes (like reduced incidents or increased reports) to secure grants, sponsorships, and long-term sustainability

  1. 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
  1. Empower Apprentice Growth: Mentored 5 UX apprentices with no prior experience, helping them grow in design thinking, wireframing, and collaboration.

  1. Empower Apprentice Growth:

    Mentored 5 UX apprentices with no prior experience, helping them grow in design thinking, wireframing, and collaboration.

  1. Empower Apprentice Growth: Mentored 5 UX apprentices with no prior experience, helping them grow in design thinking, wireframing, and collaboration.

  1. Enhance Feature Usability Through Testing: Improved usability of the main features by refining user flows and addressing real feedback from testing.

  1. Enhance Feature Usability Through Testing: Improved usability of the main features by refining user flows and addressing real feedback from testing.

  1. Enhance Feature Usability Through Testing: Improved usability of the main features by refining user flows and addressing real feedback from testing.

  1. 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.

  1. 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.

  1. 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

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:


  1. Creating a new user flow from the chatbot to the new report

  2. Revising the Unclaimed page in collaboration with the Content team

  3. Adding a filter to differentiate between “In-Progress” reports and those assigned to individual Patrol Officers

  4. Clarifying what qualifies as actionable vs. non-actionable reports

Solutions:


  1. Creating a new user flow from the chatbot to the new report

  2. Revising the Unclaimed page in collaboration with the Content team

  3. Adding a filter to differentiate between “In-Progress” reports and those assigned to individual Patrol Officers

  4. 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:

  1. Missing route details such as location, path, and distance

  2. Unclear patrol procedures for assigned routes

  3. How Patrol Officers clock in/out while on duty

Key issues included:

  1. Missing route details such as location, path, and distance

  2. Unclear patrol procedures for assigned routes

  3. 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.

CONTACT

Ⓒ2024 Designed and Built by Jason Yang

CONTACT

CONTACT