PHILLY TRUCE’s
App
PHILLY TRUCE’s
App
PHILLY TRUCE’s
App
As one of two Co-Leads, I guided the design direction and mentored five UX apprentices, providing feedback and support to help them grow, despite their lack of prior industry experience
As one of two Co-Leads, I guided the design direction and mentored five UX apprentices, providing feedback and support to help them grow, despite their lack of prior industry experience
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
Industry
NGO
(Non-governmental organizations)
NGO
(Non-governmental organizations)
NGO
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 - Mobile 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 - Mobile 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 - Mobile 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
Problem Statement
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.
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.
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.
Task
Task
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: Use technology to proactively identify and de-escalate conflicts, especially around school routes, before they escalate into violence.
Reduce Youth and Community Violence:
Use technology to proactively identify and de-escalate conflicts, especially around school routes, before they escalate into violence.
Empower Community-Driven Safety: Provide a trusted, anonymous tool that empowers students, parents, and community members to report incidents
Empower Community-Driven Safety:
Provide a trusted, anonymous tool that empowers students, parents, and community members to report incidents
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: Ensure that users feel safe and heard by offering a free, easy-to-use, and anonymous reporting system
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: Show measurable outcomes (like reduced incidents or increased reports) to secure grants, sponsorships, and long-term sustainability
Impact
Mentored 5 UX apprentices with no prior experience, helping them grow in design thinking, wireframing, and collaboration.
Mentored 5 UX apprentices with no prior experience, helping them grow in design thinking, wireframing, and collaboration.
Improved usability of the main features by refining user flows and addressing real feedback from testing.
Improved usability of the main features by refining user flows and addressing real feedback from testing.
Strengthened client alignment by providing frequent updates and visual materials, which helped prevent miscommunication and reduced the need for rework.
Strengthened client alignment by providing frequent updates and visual materials, which helped prevent miscommunication and reduced the need for rework.
Action
Action
Action
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 During Development
Challenges During Development
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.
Key changes included:
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
Key changes included:
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)
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
After clarifying:
With clearer direction from the client, we redefined the Route Management feature and created a new flowchart to guide development
After clarifying:
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
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
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.
See More
See More
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