design-justice
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDesign Justice: Equity-Centered Digital Design
Design Justice:以公平为中心的数字设计
Design for the margins, benefit the center. If it works for someone with no stable phone, unstable housing, trauma history, and low digital literacy → it works better for everyone.
为边缘群体设计,惠及核心群体。如果一款产品能适配没有稳定手机、住房不稳定、有创伤史且数字素养低的用户,那么它对所有人来说都会更易用。
Philosophy
设计理念
Design Justice (Sasha Costanza-Chock) + Trauma-Informed Design + Digital Equity Design
Core principle: The people most impacted by design decisions should be centered in the design process, not treated as edge cases.
Design Justice(Sasha Costanza-Chock提出) + 创伤知情设计(Trauma-Informed Design) + 数字公平设计(Digital Equity Design)
核心原则:受设计决策影响最大的人群应成为设计过程的核心,而非被视为边缘案例。
When to Use
适用场景
✅ Use for:
- Apps serving recovery/reentry populations
- Government/civic tech applications
- Healthcare portals for vulnerable populations
- Housing/benefits applications
- Legal aid and court self-help tools
- Nonprofit service delivery platforms
- Any app used on shared/public devices
❌ NOT for:
- Enterprise B2B SaaS (different constraints)
- Marketing funnel optimization
- Gamification/engagement maximization
- Social media features
- General "make it pretty" UX requests
✅ 适用场景:
- 服务康复/重返社会人群的应用
- 政府/公民科技应用
- 面向弱势群体的医疗门户
- 住房/福利申请类应用
- 法律援助与法院自助工具
- 非营利组织服务交付平台
- 任何在共享/公共设备上使用的应用
❌ 不适用场景:
- 企业级B2B SaaS(约束条件不同)
- 营销漏斗优化
- 游戏化/参与度最大化设计
- 社交媒体功能
- 通用的「美化界面」类UX需求
Decision Tree: Which Pattern Applies?
决策树:选择适用模式
User has unstable phone number?
├── YES → See: Authentication Without Stable Phones
└── NO → Standard auth OK
User may lose internet mid-task?
├── YES → See: Offline-First Design
└── NO → Standard web patterns OK
User may be on shared/public device?
├── YES → See: Shared Device Privacy
└── NO → Standard session management OK
Form is complex or emotionally difficult?
├── YES → See: Trauma-Informed Forms
└── NO → Standard form patterns OK
User has history of system trauma?
├── YES → Apply ALL trauma-informed patterns
└── UNKNOWN → Assume YES for civic/legal/benefits apps用户使用不稳定手机号?
├── 是 → 参考:无需稳定手机号的认证方案
└── 否 → 标准认证方案可行
用户可能在任务中途失去网络?
├── 是 → 参考:优先离线设计
└── 否 → 标准网页模式可行
用户可能使用共享/公共设备?
├── 是 → 参考:共享设备隐私保护
└── 否 → 标准会话管理可行
表单复杂或情绪难度高?
├── 是 → 参考:创伤知情表单设计
└── 否 → 标准表单模式可行
用户有系统创伤史?
├── 是 → 应用所有创伤知情模式
└── 未知 → 公民/法律/福利类应用默认按「是」处理Pattern 1: Authentication Without Stable Phones
模式1:无需稳定手机号的认证方案
Anti-Pattern: Phone-First Auth
反模式:优先手机号认证
Novice thinking: "Everyone has a phone, SMS 2FA is secure"
Reality:
- 25% of formerly incarcerated people lack stable phone access
- Phone numbers change frequently during housing instability
- Prepaid phones get disconnected for non-payment
- SMS 2FA locks people out of critical services
Timeline:
- Pre-2020: SMS 2FA considered best practice
- 2020+: Code for America documented access barriers
- 2024+: Email-first + backup codes emerging as standard for civic tech
新手思维:「人人都有手机,短信双因素认证(SMS 2FA)很安全」
实际情况:
- 25%的前科人员没有稳定的手机使用权
- 住房不稳定时,手机号频繁更换
- 预付费手机因欠费停机
- 短信双因素认证会将用户锁定在关键服务之外
时间线:
- 2020年前:短信双因素认证被视为最佳实践
- 2020年起:Code for America记录了此类访问障碍
- 2024年起:优先邮箱认证 + 备份码成为公民科技的新标准
Correct Patterns
正确模式
| Need | Pattern | Implementation |
|---|---|---|
| Primary auth | Email-first | Email is identifier, phone optional |
| 2FA | Multiple pathways | Email OR backup codes OR case worker verification |
| Recovery | Printable codes | One-time codes that can be written down |
| Bypass | Trusted intermediary | Case managers verify via org email |
| Essential access | No-signup mode | Core features work without account |
| 需求 | 模式 | 实现方式 |
|---|---|---|
| 主认证 | 优先邮箱 | 邮箱作为身份标识,手机号为可选项 |
| 双因素认证 | 多路径选择 | 邮箱 或 备份码 或 个案工作者验证 |
| 账号恢复 | 可打印验证码 | 可手写记录的一次性验证码 |
| 绕过机制 | 可信中介 | 个案经理通过机构邮箱验证 |
| 核心访问 | 无需注册模式 | 核心功能无需账号即可使用 |
Implementation Checklist
实现检查清单
□ Email is primary identifier (phone optional)
□ Backup codes can be printed/written
□ Case worker recovery pathway exists
□ Core features work without login
□ Sessions are not device-locked
□ Phone number changes don't lock accounts
□ "Forgot password" has non-SMS option□ 邮箱作为主身份标识(手机号可选)
□ 备份码可打印/手写记录
□ 存在个案工作者恢复路径
□ 核心功能无需登录即可使用
□ 会话不与设备绑定
□ 手机号变更不会锁定账号
□ 「忘记密码」提供非短信选项Pattern 2: Offline-First / Intermittent Access
模式2:优先离线/间歇性访问设计
Anti-Pattern: Always-Online Assumption
反模式:假设始终在线
Novice thinking: "Just show 'No connection' error"
Reality:
- Public library computers have session limits
- Mobile data runs out mid-month
- Shelter wifi is unreliable
- Users may have ONE chance to complete a form
新手思维:「只需显示『无网络连接』错误即可」
实际情况:
- 公共图书馆电脑有会话时长限制
- 移动数据在月中耗尽
- 收容所WiFi不可靠
- 用户可能只有一次完成表单的机会
Correct Patterns
正确模式
| Need | Pattern | Implementation |
|---|---|---|
| Data persistence | Local-first | Save to localStorage/IndexedDB immediately |
| Form state | Auto-save | Save every field change, not just on submit |
| Submission | Background sync | Queue actions, sync when connection returns |
| UI feedback | Optimistic updates | Update UI immediately, sync in background |
| Progress | Resume anywhere | Let users pick up exactly where they left off |
| Status | Visible sync state | "Saved locally" / "Syncing..." / "Up to date" |
| Degradation | Graceful offline | Core features work without network |
| 需求 | 模式 | 实现方式 |
|---|---|---|
| 数据持久化 | 优先本地存储 | 立即保存至localStorage/IndexedDB |
| 表单状态 | 自动保存 | 每次字段变更都保存,而非仅提交时保存 |
| 提交机制 | 后台同步 | 队列化操作,恢复连接时同步 |
| UI反馈 | 乐观更新 | 立即更新UI,后台同步数据 |
| 进度续接 | 任意位置恢复 | 允许用户从上次中断处继续 |
| 状态提示 | 可见的同步状态 | 「已本地保存」/「同步中...」/「已更新」 |
| 降级处理 | 优雅离线 | 核心功能无需网络即可使用 |
Implementation Checklist
实现检查清单
□ PWA with service worker caching
□ All form data saves to localStorage on every change
□ Clear sync status indicator visible
□ Offline mode tested (airplane mode)
□ Background sync when connection returns
□ No data loss on connection drop (verified)
□ Multi-step flows don't timeout
□ Minimal asset downloads (text-first views available)□ 带服务工作者缓存的PWA
□ 所有表单数据在每次变更时保存至localStorage
□ 清晰的同步状态指示器可见
□ 已测试离线模式(飞行模式)
□ 恢复连接时自动后台同步
□ 断连时无数据丢失(已验证)
□ 多步骤流程不会超时
□ 最小化资源下载(提供纯文本视图)Code Pattern: Auto-Save Hook
代码模式:自动保存Hook
typescript
// Save form state on every change
function useAutoSave(key: string, data: any) {
useEffect(() => {
localStorage.setItem(key, JSON.stringify({
data,
savedAt: new Date().toISOString(),
synced: false
}));
}, [key, data]);
// Return saved data on mount
return useMemo(() => {
const saved = localStorage.getItem(key);
return saved ? JSON.parse(saved).data : null;
}, [key]);
}typescript
// Save form state on every change
function useAutoSave(key: string, data: any) {
useEffect(() => {
localStorage.setItem(key, JSON.stringify({
data,
savedAt: new Date().toISOString(),
synced: false
}));
}, [key, data]);
// Return saved data on mount
return useMemo(() => {
const saved = localStorage.getItem(key);
return saved ? JSON.parse(saved).data : null;
}, [key]);
}Pattern 3: Shared/Public Device Privacy
模式3:共享/公共设备隐私保护
Anti-Pattern: Persistent Sessions
反模式:持久会话
Novice thinking: "Remember me improves UX"
Reality:
- Library computers used by multiple people
- Shelter computers are shared
- Previous user's data visible = safety risk
- Domestic violence survivors need privacy
新手思维:「『记住我』能提升UX体验」
实际情况:
- 图书馆电脑被多人使用
- 收容所电脑为共享设备
- 前一位用户的数据可见会带来安全风险
- 家暴幸存者需要隐私保护
Correct Patterns
正确模式
| Need | Pattern | Implementation |
|---|---|---|
| Default state | Privacy mode ON | Don't auto-save sensitive info |
| Logout | Prominent button | Make it obvious, not buried in menu |
| Timeout | Warning + auto-logout | "5 min left. Continue?" |
| Forms | No autofill default | Disable browser autofill on sensitive fields |
| Mode toggle | "Public computer?" | One-click extra privacy mode |
| Cookies | Session-only option | Clear on browser close |
| 需求 | 模式 | 实现方式 |
|---|---|---|
| 默认状态 | 隐私模式开启 | 不自动保存敏感信息 |
| 登出 | 显眼按钮 | 位置明显,而非隐藏在菜单中 |
| 超时 | 警告+自动登出 | 「剩余5分钟,是否继续?」 |
| 表单 | 默认关闭自动填充 | 敏感字段禁用浏览器自动填充 |
| 模式切换 | 「公共电脑?」 | 一键开启额外隐私模式 |
| Cookie | 仅会话选项 | 浏览器关闭时清除 |
Implementation Checklist
实现检查清单
□ "Remember me" is UNCHECKED by default
□ Logout button visible on every page
□ Session timeout with save-progress warning
□ Sensitive fields have autocomplete="off"
□ Incognito mode suggested in UI for public computers
□ No cached personal data after logout
□ "Working on a shared computer?" toggle available□ 「记住我」默认未勾选
□ 登出按钮在每个页面都可见
□ 会话超时带进度保存警告
□ 敏感字段设置autocomplete="off"
□ UI中建议公共电脑使用隐身模式
□ 登出后无缓存个人数据
□ 提供「使用共享电脑?」切换选项Pattern 4: Trauma-Informed Forms & Flows
模式4:创伤知情表单与流程
Anti-Pattern: Bureaucratic Interrogation
反模式:官僚式讯问
Novice thinking: "Collect all info upfront for efficiency"
Reality:
- Long forms trigger overwhelm and abandonment
- Red error text is shame-triggering
- Legal jargon creates anxiety
- Surprise requirements feel like traps
- "Tell your story" boxes are cognitively overwhelming
新手思维:「为了效率,一次性收集所有信息」
实际情况:
- 长表单会引发用户焦虑和放弃
- 红色错误文本会触发羞耻感
- 法律术语会造成焦虑
- 意外要求会让用户感觉陷入陷阱
- 「讲述你的故事」输入框会带来认知负担
Correct Patterns
正确模式
| Need | Pattern | Implementation |
|---|---|---|
| Length | Chunked progress | Break into short sections, save each |
| Language | Plain language | 6th-8th grade reading level |
| Complexity | One question/page | For difficult topics |
| Progress | Clear indicators | "Step 2 of 5" always visible |
| Validation | Forgiving input | Auto-format, accept variations |
| Defaults | Smart prefill | Pre-fill what you can infer |
| Help | Inline, not hidden | Help text visible, not in modals |
| Flow | Skip and return | Never force-block on optional fields |
| 需求 | 模式 | 实现方式 |
|---|---|---|
| 长度 | 分块进度 | 拆分为短章节,每章保存 |
| 语言 | 简明语言 | 6-8年级阅读水平 |
| 复杂度 | 一页一题 | 针对困难主题 |
| 进度 | 清晰指示器 | 始终显示「第2步/共5步」 |
| 验证 | 宽容输入 | 自动格式化,接受多种格式 |
| 默认值 | 智能预填充 | 预填充可推断的信息 |
| 帮助 | 内嵌显示,不隐藏 | 帮助文本可见,而非在模态框中 |
| 流程 | 跳过并返回 | 绝不强制阻塞可选字段 |
Tone Guidelines
语气指南
✅ Use:
- Person-first language: "Person with a conviction"
- Transparent timelines: "We'll review in 3-5 days"
- Acknowledgment: "This process can be frustrating"
- Affirming: "You're making progress"
❌ Avoid:
- Shame language: "Your criminal past..."
- Vague timelines: "We'll get back to you"
- Blame: "You didn't complete..."
- Guilt assumptions: "Your offense..."
✅ 推荐使用:
- 以人为本的语言:「有犯罪记录的人」
- 透明的时间线:「我们将在3-5天内审核」
- 共情表达:「这个过程可能令人沮丧」
- 鼓励话语:「你正在取得进展」
❌ 避免使用:
- 羞耻性语言:「你的犯罪过往...」
- 模糊的时间线:「我们会回复你」
- 指责语气:「你未完成...」
- 有罪推定:「你的罪行...」
Color & Visual Guidelines
色彩与视觉指南
✅ Calm palette:
- Success: Soft green (#4a9d9e), not aggressive lime
- Warning: Warm amber (#d4a03a), not alarming yellow
- Error: Muted terracotta (#c97a5d), not aggressive red
- Background: Cream/warm neutrals
❌ Avoid:
- Aggressive red for errors
- High-contrast warning colors
- Flashing or pulsing elements
- Visual "alarm" states✅ 舒缓配色:
- 成功:柔和绿色 (#4a9d9e),而非刺眼的亮绿
- 警告:暖琥珀色 (#d4a03a),而非警示黄
- 错误:哑光赤陶色 (#c97a5d),而非刺眼红色
- 背景:奶油色/暖中性色
❌ 避免:
- 用刺眼红色表示错误
- 高对比度警告色
- 闪烁或脉动元素
- 视觉「警报」状态Implementation Checklist
实现检查清单
□ No form longer than 5 fields per page
□ Progress indicator on all multi-step flows
□ Help text inline, not in tooltips/modals
□ Forgiving validation (formats automatically)
□ No required fields that aren't truly required
□ "Skip for now" on optional sections
□ Calm color palette (no aggressive reds)
□ Person-first language throughout
□ Clear "what happens next" on every screen□ 每页表单字段不超过5个
□ 所有多步骤流程都有进度指示器
□ 帮助文本内嵌显示,而非工具提示/模态框
□ 宽容的验证(自动格式化)
□ 无非必要的必填字段
□ 可选章节提供「暂时跳过」选项
□ 舒缓配色(无刺眼红色)
□ 全程使用以人为本的语言
□ 每个页面都清晰说明「下一步」Pattern 5: Expungement/Record Clearance Specific
模式5:记录清除/消除犯罪记录专属设计
Anti-Pattern: Assuming User Knowledge
反模式:假设用户具备相关知识
Novice thinking: "They know their case numbers"
Reality:
- People don't remember case numbers from years ago
- Legal terminology is confusing
- County/jurisdiction boundaries are unclear
- Documents may be inaccessible
新手思维:「他们记得自己的案件编号」
实际情况:
- 用户记不起多年前的案件编号
- 法律术语令人困惑
- 县/司法管辖区边界不清晰
- 文件可能无法获取
Correct Patterns
正确模式
| Need | Pattern | Implementation |
|---|---|---|
| Eligibility | Checker first | Show if qualified BEFORE collecting info |
| Documents | Multiple upload methods | Email, fax, mail, in-person, photo |
| Location | Auto-detection | Don't make them figure out jurisdiction |
| Records | Lookup tools | Help them find their own case numbers |
| Terms | Plain language | Define every legal term |
| Timeline | Explicit expectations | "Most cases take 60-90 days" |
| Fees | Waiver prominent | Fee waiver should be default path |
| 需求 | 模式 | 实现方式 |
|---|---|---|
| 资格判定 | 先做资格检查 | 收集信息前先显示是否符合资格 |
| 文件上传 | 多种上传方式 | 邮件、传真、邮寄、线下提交、照片 |
| 位置定位 | 自动检测 | 不让用户自行判断司法管辖区 |
| 记录查询 | 查询工具 | 帮助用户查找自己的案件编号 |
| 术语解释 | 简明语言 | 为每个法律术语提供定义 |
| 时间线 | 明确预期 | 「大多数案件需要60-90天」 |
| 费用 | 突出费用减免 | 费用减免应为默认路径 |
Implementation Checklist
实现检查清单
□ Eligibility checker before signup/info collection
□ Case number lookup tool or "I don't know" option
□ County auto-detected from address
□ Document upload alternatives (not just scan)
□ Legal terms have inline definitions
□ Expected timeline stated clearly
□ Fee waiver is default, not hidden option
□ "Not eligible" includes explanation WHY□ 注册/收集信息前先进行资格检查
□ 提供案件编号查询工具或「我不知道」选项
□ 根据地址自动检测所在县
□ 提供文件上传替代方案(不仅限于扫描)
□ 法律术语配有内嵌定义
□ 明确说明预期时间线
□ 费用减免为默认选项,而非隐藏选项
□ 「不符合资格」时包含原因解释Code for America Principles
Code for America 原则
The gold standard for civic tech:
- Automatic > Petition-based - Don't require action from people with records
- No-cost by default - Fee waivers automatic, not applied for
- Government does the work - Don't burden individuals
- Co-design with impacted people - Not just user research ON them
- Assume gaps in data - Design around incomplete records
- Backend automation - Minimal staff time, no manual bottlenecks
公民科技的黄金标准:
- 自动处理 > 申请制 - 无需有记录的用户主动申请
- 默认免费 - 自动减免费用,无需用户申请
- 政府承担工作 - 不增加个人负担
- 与受影响人群共同设计 - 不只是对他们进行用户研究
- 假设数据存在缺口 - 围绕不完整记录进行设计
- 后端自动化 - 最小化人工耗时,无手动瓶颈
Quick Audit Checklist
快速审核清单
Run this against any civic/legal/benefits application:
AUTHENTICATION
□ Can user sign up with just email?
□ Is there a non-SMS account recovery option?
□ Do core features work without login?
OFFLINE/INTERMITTENT
□ Does form data survive connection loss?
□ Is there visible "saved" indicator?
□ Can user resume exactly where they left off?
SHARED DEVICES
□ Is "remember me" unchecked by default?
□ Is logout button prominent?
□ Does session timeout with warning?
FORMS
□ Is reading level ≤8th grade?
□ Are there ≤5 fields per page?
□ Is help text inline (not hidden)?
□ Are required fields truly required?
TONE
□ Is language person-first?
□ Are timelines explicit?
□ Is error messaging non-blaming?
□ Are colors calm (no aggressive red)?
LEGAL/EXPUNGEMENT SPECIFIC
□ Is eligibility checked first?
□ Are fee waivers prominent?
□ Is "I don't know my case number" handled?针对任何公民/法律/福利类应用进行审核:
认证环节
□ 用户能否仅用邮箱注册?
□ 是否有非短信的账号恢复选项?
□ 核心功能无需登录即可使用?
离线/间歇性访问
□ 表单数据在断连后是否保留?
□ 是否有可见的「已保存」指示器?
□ 用户能否从上次中断处继续?
共享设备
□ 「记住我」默认未勾选?
□ 登出按钮是否显眼?
□ 会话是否带警告超时?
表单设计
□ 阅读水平≤8年级?
□ 每页字段≤5个?
□ 帮助文本内嵌显示(不隐藏)?
□ 必填字段是否真正必要?
语气表达
□ 是否使用以人为本的语言?
□ 时间线是否明确?
□ 错误提示是否无指责性?
□ 是否使用舒缓配色(无刺眼红色)?
法律/消除犯罪记录专属
□ 是否先进行资格检查?
□ 费用减免是否突出显示?
□ 是否处理「我不知道我的案件编号」的情况?References
参考资料
- - Detailed auth implementation
/references/authentication-patterns.md - - PWA and sync patterns
/references/offline-first-patterns.md - - Tone and word choice guide
/references/trauma-informed-language.md - - CfA case studies
/references/code-for-america-learnings.md
- - 详细的认证实现指南
/references/authentication-patterns.md - - PWA与同步模式指南
/references/offline-first-patterns.md - - 语气与措辞指南
/references/trauma-informed-language.md - - CfA案例研究
/references/code-for-america-learnings.md
Key Readings
关键读物
- Design Justice Network principles
- Code for America's design principles
- C4 Innovations equity work (homeless response systems)
- Innovation Unit's digital access for rough sleepers
- Sasha Costanza-Chock: "Design Justice" (2020)
- Design Justice Network 原则
- Code for America 设计原则
- C4 Innovations 公平性工作(无家可归者响应系统)
- Innovation Unit 为露宿者提供的数字访问服务
- Sasha Costanza-Chock:《Design Justice》(2020)