TOPH

Real-time earthquake feed and live routing platform that guides citizens to safety within seconds. TARG helps users to navigate to the most nearby earthquake assembly area after the users provide their geolocation.

Role

Full-stack Engineer · UX / UI Designer · Data-Viz Developer

Industry

Civic Tech · Disaster Response

Duration

10 Weeks

Stage 1. Problem Discovery & Research

• Interviewed 10 Seattle residents: 70 % store quake kits, 0 % knew their nearest Safe Assembly Area.
• Shadowed UW Emergency Management—evacuation maps live only in static PDFs, no routing or live updates.
• Defined HMW: “How might we give clear, actionable directions in the first two minutes after shaking stops?”

Stage 2. Design Strategy

• Design principles: Immediate Clarity, Offline Resilience, One-hand Usability.
• Story-mapped quake timeline → chose core tasks: receive alert, locate safe spot, navigate offline.
• Prioritized features via MoSCoW—pushed social-sharing & badges to “Could” so MVP stayed lean.

Stage 3. Prototype Development

Wireframes in Figma validated thumb-zone placement for the giant “Safe Route” button.
Hi-fi interactive in Framer stitched USGS ShakeMap JSON → Mapbox → ARKit overlay.
Key interaction: shake sensor auto-opens the alert screen when magnitude ≥ 4.5.

Stage 1. Problem Discovery & Research

Stage 2. Design Strategy

• Design principles: Immediate Clarity, Offline Resilience, One-hand Usability.
• Story-mapped quake timeline → chose core tasks: receive alert, locate safe spot, navigate offline.
• Prioritized features via MoSCoW—pushed social-sharing & badges to “Could” so MVP stayed lean.

Stage 3. Prototype Development

Wireframes in Figma validated thumb-zone placement for the giant “Safe Route” button.
Hi-fi interactive in Framer stitched USGS ShakeMap JSON → Mapbox → ARKit overlay.
Key interaction: shake sensor auto-opens the alert screen when magnitude ≥ 4.5.

Stage 4. User Testing & Iteration

• Conducted 5 hallway simulations with metronome “aftershocks”; SUS 68 → 86 after tightening copy (“Shelter” → “Cover”).
• Swapped red route lines to lime-green for color-blind safety.
• Added offline tile caching after tester hit a dead-zone in Husky Stadium.

Stage 5. Implementation & Launch Support

• Wrote API wrapper for USGS real-time feeds + fallback to local seismometer.
• Produced hand-off spec: iOS ARKit scene graph + beacon-fallback logic for indoor nav.
• Drafted outreach plan with Seattle Office of Emergency Mgmt.—scheduled beta during Great ShakeOut 2025 drill.

Outcomes

• 92 % of participants reached their assembly area in < 2 min (baseline paper map = 54 %).
• Average task load index (NASA-TLX) dropped 35 %.
• Won “Most Impactful Prototype” in HCDE 310 showcase; featured on UW Resilience blog.

Reflection / Key Take-aways

Designing for cognitive overload forces ruthless simplicity—one CTA per screen wins.
Real-time data is only helpful if cached for cell-tower failures.
Field-testing in actual stairwells uncovered edge cases no lab test revealed.

Outcomes

• 92 % of participants reached their assembly area in < 2 min (baseline paper map = 54 %).
• Average task load index (NASA-TLX) dropped 35 %.
• Won “Most Impactful Prototype” in HCDE 310 showcase; featured on UW Resilience blog.

Reflection / Key Take-aways

Designing for cognitive overload forces ruthless simplicity—one CTA per screen wins.
Real-time data is only helpful if cached for cell-tower failures.
Field-testing in actual stairwells uncovered edge cases no lab test revealed.

Other projects

GAIA

Gaia is a mobile app that creates a sustainable ecosystem where users’ receipts are automatically stored immediately after NFC-based payments. It also sends timely reminders for upcoming warranties, subscriptions, and registrations, while providing personalized sustainability insights.