Work 作品 About 關於 Creative 創作 Contact 聯絡 Resume 履歷

This case study is password protected.

Incorrect password.

All Work全部作品
Product Design Civic Tech PWA AI Collaboration AI Built ✦ In Progress 進行中

FLARE

A community safety PWA that delivers real-time ICE enforcement alerts to protect immigrant communities — built as a web app so no government can remove it from an app store. 一款社區安全漸進式網頁應用程式,即時傳遞移民執法警報,保護移民社群 — 以網頁形式建造,確保任何政府無法將其從應用程式商店下架。

Role角色
Solo Designer & Product Director 獨立設計師與產品總監
Built With建造工具
Cursor AI (Claude)
Timeline時間
Feb 16 – Mar 2026
Stack
Next.js · TypeScript · Tailwind v4 · Leaflet.js · PWA
Why This Exists 為什麼要做這個
"For many immigrant communities in the US, knowing where ICE is active isn't paranoia — it's survival. I wanted to build the tool I'd want my family to have." 「對於美國許多移民社群來說,了解移民執法局的活動位置不是偏執 — 而是生存之道。我想建造一個我希望自己家人能擁有的工具。」
📡

Real-time awareness 即時感知

Live map aggregating alerts from ICEout.org, StopICE.net, and community reports — filtered to the user's location. 即時地圖整合來自 ICEout.org、StopICE.net 及社群通報的警報 — 依用戶位置篩選。

🛡️

Know your rights, fast 快速了解你的權利

Emergency-first legal guide in 6 languages. When approached by ICE, the first screen shows exactly what to say and do. 6 種語言的緊急優先法律指南。被移民執法局接觸時,第一個畫面直接顯示該說什麼、該做什麼。

🔒

Privacy by design 設計即隱私

Anonymous mode is always on — no accounts, no user data stored. A PWA that can't be pulled from any app store. 匿名模式永遠開啟 — 無需帳號,不儲存用戶資料。無法被任何應用程式商店下架的網頁應用程式。

Status: Paused. 狀態:暫停。 The Trump administration has begun pursuing legal action against developers of tools that interfere with ICE operations. As someone directly affected by the current immigration climate, continuing public distribution creates personal legal risk I'm not in a position to take right now. FLARE exists. The work is done. What happens next depends on what becomes safe. 川普政府已開始對製作干擾移民執法工具的開發者提起法律訴訟。作為一個直接受當前移民政策影響的人,繼續公開發布會帶來我目前無法承擔的個人法律風險。FLARE 存在。這份工作已完成。接下來會發生什麼,取決於什麼時候是安全的。

Two Users, One Interface 兩種使用者,一個界面

There are two distinct mental states that open FLARE — and the entire information architecture was designed around the harder one. 打開 FLARE 的人有兩種截然不同的心理狀態 — 整個資訊架構是為了更艱難的那種而設計的。

The daily checker 日常查看者

Calm, routine. Opens the app each morning to confirm the neighborhood is clear before leaving. Needs quick reassurance and a clean "all safe" signal — then closes the app and moves on. 平靜、日常化。每天早上打開 app 確認附近安全再出門。需要快速的安心感和明確的「安全」訊號 — 然後關掉繼續過日子。

The crisis scanner 緊急確認者

Already anxious — heard something, sensed something. Opens FLARE to confirm what they fear might be true. Every second of confusion or loading is a second of compounded panic. 已經很緊張 — 聽到了什麼、感覺到什麼。打開 FLARE 是為了確認他們害怕是真實的事情。每一秒的困惑或載入都是加倍的恐慌。

Design implication: Every screen is designed for the second user first — information visible in under 3 seconds, alert status auto-loaded by geolocation. Most ICE alert platforms show national-level data, which tells you what's happening across the country but can't answer "should I leave my house right now?" FLARE opens to your city, not a map of America. 設計影響:每個畫面都優先為第二種使用者設計 — 資訊在 3 秒內可見,警報狀態依地理位置自動載入。大多數 ICE 警報平台顯示全國性資訊,能告訴你全國動態,但無法回答「我現在應該出門嗎?」FLARE 打開時直接顯示你所在的城市,不是美國地圖。

The App 應用程式
FLARE Radar map view with ICE activity alerts
Radar — live map 雷達 — 即時地圖
FLARE news feed with live ICE alerts
Feed — news & alerts 動態 — 新聞與警報
FLARE settings with dark mode and 6 languages
Settings — 6 languages 設定 — 6 種語言
FLARE Seattle view with Safe status
Seattle — safe status 西雅圖 — 安全狀態
Design Language 設計語言

The "Tactical HUD" concept came from a specific feeling: life in America for many immigrants right now doesn't feel like citizenship — it feels like a survival game, where the government isn't a protector but a threat. Checking ICE activity is the equivalent of knowing where the enemy is on the map. I wanted the interface to reflect that reality honestly, without making it feel brutal. In a life already full of pressure, a little tactile playfulness matters. 「戰術抬頭顯示器」這個概念來自一種具體的感受:對許多移民來說,現在在美國的生活感覺不像公民身份 — 更像是生存遊戲,政府不是保護者而是威脅。查看 ICE 動態等同於在地圖上確認敵人的位置。我希望界面誠實地反映這個現實,但不讓它感覺殘酷。在本來就充滿壓力的生活裡,一點觸感的趣味性是有意義的。

Orange — not red 橘,而非紅

Red felt too hostile — it shuts people down. Orange signals urgency without aggression. And on the internet, orange is Trump's color. Using it as a warning marker carries its own quiet meaning. 紅色感覺太具敵意 — 會讓人心理關閉。橘色傳達緊迫感而不帶攻擊性。而在網路上,橘色是川普的代表色。用它作為警戒色,本身帶有一層安靜的隱喻。

Aa

DM Sans + IBM Plex Mono DM Sans + IBM Plex Mono

DM Sans for warmth and legibility under stress. IBM Plex Mono for timestamps and data — the visual precision of a system you can trust with your safety. DM Sans 帶來溫度與壓力下的可讀性。IBM Plex Mono 用於時間戳與數據 — 傳遞一個可以信任的系統的視覺精確感。

Dark & light modes 深淺色模式

Dark mode for low-light or nighttime use. Light mode for daylight. The interface should never draw attention to you when you're checking it in public. 深色模式用於低光源或夜間情境。淺色模式用於白天。當你在公共場合查看時,界面不應該讓你顯眼。

How It Was Built 建造過程

FLARE was built entirely by one designer — no engineers. Using Cursor AI (powered by Claude), I directed every technical decision through natural-language prompts, over 22+ AI sessions spanning 3 weeks. I had the product vision; Cursor had the code. FLARE 完全由一位設計師建造 — 沒有工程師。透過 Cursor AI(由 Claude 驅動),我在 3 週內透過超過 22 個 AI 工作階段,以自然語言指引每一個技術決策。我有產品願景;Cursor 負責程式碼。

01
Bootstrap & Vision 啟動與願景
Feb 16–18

Initial Next.js scaffolding, first components, SSR fix for react-leaflet ("window is not defined"). Defined the 9-point product vision: alert levels, multi-language, PWA-first, government-proof. 初始 Next.js 架構搭建、第一批元件、修復 react-leaflet 的 SSR 問題(「window is not defined」)。定義 9 點產品願景:警報等級、多語言、PWA 優先、防政府干預。

02
Major Redesign 大型重設計
Feb 19

Full UI overhaul in one day. Defined the "Tactical HUD" design language: 5-level alert system, 4-tab nav → 3-tab nav, dark/light modes, React Context state management. Created a full HTML prototype with 4 screens and tab switching. 一天完成全面 UI 改版。定義「戰術抬頭顯示器」設計語言:5 級警報系統、4 個頁籤 → 3 個頁籤、深/淺色模式、React Context 狀態管理。建立含 4 個畫面與頁籤切換的完整 HTML 原型。

03–04
UX Refinement & Privacy Audit UX 精煉與隱私審查
Feb 19–20

13 CSS tweaks synced from browser to code. Navigation restructured (Settings → hamburger menu). City-name search via Nominatim API. Privacy audit found git commit history contained real name — added .gitignore rules, deleted exposed history files. 13 個從瀏覽器同步至程式碼的 CSS 調整。導航結構重組(設定 → 漢堡選單)。透過 Nominatim API 支援城市名稱搜尋。隱私審查發現 git 提交紀錄包含真實姓名 — 新增 .gitignore 規則,刪除已暴露的歷史檔案。

05–06
Core Features & Design System 核心功能與設計系統
Feb 20–24

Custom SVG map markers colored by alert level. Push notifications via service worker. Know Your Rights redesigned for emergency use — English script always visible regardless of language setting. Fonts locked: DM Sans + IBM Plex Mono. Alert names changed from tactical jargon to plain language (Safe / Caution / Warning / Danger). 依警報等級上色的自訂 SVG 地圖標記。透過 service worker 推送通知。「了解你的權利」針對緊急情境重新設計 — 無論語言設定,英文腳本始終可見。字型確定:DM Sans + IBM Plex Mono。警報名稱從戰術術語改為日常語言(安全/注意/警告/危險)。

07–08
Map UX & Architecture Pivot 地圖 UX 與架構轉型
Feb 25–26

Fully collapsible BottomSheet with drag gestures. Map default: NYC → Seattle. v.2 pivot: FLARE became a read-only aggregator (removed Signal tab) pulling from external ICE alert systems — more trustworthy data, less infrastructure risk. 帶拖曳手勢的全可收合底部卡片。地圖預設:紐約 → 西雅圖。v.2 轉型:FLARE 成為唯讀聚合器(移除 Signal 頁籤),從外部移民執法警報系統拉取資料 — 更可信的數據,更低的基礎設施風險。

09–10
Live Data & Final Polish 即時資料與最終打磨
Feb 26–Mar 2026

Connected 3 live sources: ICEout.org (REST API), StopICE.net (XML scraping), Google News RSS. Zero mock data policy — if the API is down, the app shows an empty state. HTTPS for mobile development via mkcert. 6-language QA across all components. 連接 3 個即時資料來源:ICEout.org(REST API)、StopICE.net(XML 爬取)、Google News RSS。零假資料政策 — 若 API 中斷,應用程式顯示空狀態。透過 mkcert 為行動裝置開發設置 HTTPS。所有元件的 6 語言品質檢測。

Key Design Decisions 關鍵設計決策
"so government can't force it down" 「這樣政府就無法強制下架」
PWA over native app. No App Store, no Play Store, no single point of removal. An app store is a chokepoint — a URL is not. The platform choice is itself a safety design decision. 選擇 PWA 而非原生應用程式。不依賴 App Store 或 Play Store,消除單一下架風險。應用程式商店是一個控制點 — 網址不是。平台的選擇本身就是一個安全設計決策。
"user might click in emergency" 「用戶可能在緊急情況下點擊」
Know Your Rights redesigned for trauma situations: first screen shows 5 bullets, then English script phrases for communicating with ICE agents even if English isn't your first language. Designed for the moment your hands are shaking — critical information first, no scrolling required. 「了解你的權利」針對創傷情境重新設計:第一個畫面顯示 5 個要點,接著是與移民執法人員溝通的英文腳本,即使英文不是你的母語也能使用。為手在發抖的那個時刻設計 — 最關鍵的資訊優先,不需要滑動。
"never use fake information" 「永遠不要使用假資訊」
Zero mock data policy across the entire app. Every alert shown is from a live source. A safety app that shows "all clear" when it has no data is actively dangerous — silence is more honest than false reassurance. 全應用程式零假資料政策。每一個顯示的警報都來自即時資料來源。一個在沒有資料時顯示「全部安全」的安全應用程式是主動危險的 — 沉默比虛假安慰更誠實。
"把發送訊號功能先拿掉" 「把發送訊號功能先拿掉」
v.2 pivot to read-only aggregator. Removed user reporting — pulled only from verified external organizations. One unverified report could send someone toward danger instead of away from it. Verified-only sources trade feature richness for trustworthiness — the right call for a safety tool. v.2 轉型為唯讀聚合器。移除用戶通報功能 — 僅從經驗證的外部組織拉取資料。一條未經驗證的通報可能讓人往危險的方向走而非遠離危險。僅使用經驗證的來源,以功能豐富度換取可信度 — 對安全工具而言,這是正確的取捨。
3 wks
Build time 建造時間
6
Languages supported 支援語言
3
Live data sources 即時資料來源
22+
AI sessions AI 工作階段
What's Next 接下來
Waiting for a safer window 等待更安全的時機

The legal landscape around ICE-tracking tools is actively shifting. Distribution will resume when the risk to me personally is lower. 圍繞 ICE 追蹤工具的法律環境正在快速變化。當個人風險降低時,發布計劃將會恢復。

Civil organization outreach 聯繫公民組織

When the time is right — connecting with ICEout.org, Stop ICE network, and immigrant rights coalitions who may be better positioned to distribute this safely. 時機合適時 — 聯繫 ICEout.org、Stop ICE network 及移民權利聯盟,由更有條件安全發布的組織來推廣。

User testing with community organizations 與社區組織進行用戶測試

Testing with communities most affected — to ensure the app works under stress, in multiple languages, on older devices. 與受影響最深的社群進行測試 — 確保應用程式在壓力下、多語言環境、舊設備上都能正常運作。