design-justice

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design 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

正确模式

NeedPatternImplementation
Primary authEmail-firstEmail is identifier, phone optional
2FAMultiple pathwaysEmail OR backup codes OR case worker verification
RecoveryPrintable codesOne-time codes that can be written down
BypassTrusted intermediaryCase managers verify via org email
Essential accessNo-signup modeCore 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

正确模式

NeedPatternImplementation
Data persistenceLocal-firstSave to localStorage/IndexedDB immediately
Form stateAuto-saveSave every field change, not just on submit
SubmissionBackground syncQueue actions, sync when connection returns
UI feedbackOptimistic updatesUpdate UI immediately, sync in background
ProgressResume anywhereLet users pick up exactly where they left off
StatusVisible sync state"Saved locally" / "Syncing..." / "Up to date"
DegradationGraceful offlineCore 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

正确模式

NeedPatternImplementation
Default statePrivacy mode ONDon't auto-save sensitive info
LogoutProminent buttonMake it obvious, not buried in menu
TimeoutWarning + auto-logout"5 min left. Continue?"
FormsNo autofill defaultDisable browser autofill on sensitive fields
Mode toggle"Public computer?"One-click extra privacy mode
CookiesSession-only optionClear 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

正确模式

NeedPatternImplementation
LengthChunked progressBreak into short sections, save each
LanguagePlain language6th-8th grade reading level
ComplexityOne question/pageFor difficult topics
ProgressClear indicators"Step 2 of 5" always visible
ValidationForgiving inputAuto-format, accept variations
DefaultsSmart prefillPre-fill what you can infer
HelpInline, not hiddenHelp text visible, not in modals
FlowSkip and returnNever 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

正确模式

NeedPatternImplementation
EligibilityChecker firstShow if qualified BEFORE collecting info
DocumentsMultiple upload methodsEmail, fax, mail, in-person, photo
LocationAuto-detectionDon't make them figure out jurisdiction
RecordsLookup toolsHelp them find their own case numbers
TermsPlain languageDefine every legal term
TimelineExplicit expectations"Most cases take 60-90 days"
FeesWaiver prominentFee 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:
  1. Automatic > Petition-based - Don't require action from people with records
  2. No-cost by default - Fee waivers automatic, not applied for
  3. Government does the work - Don't burden individuals
  4. Co-design with impacted people - Not just user research ON them
  5. Assume gaps in data - Design around incomplete records
  6. Backend automation - Minimal staff time, no manual bottlenecks

公民科技的黄金标准:
  1. 自动处理 > 申请制 - 无需有记录的用户主动申请
  2. 默认免费 - 自动减免费用,无需用户申请
  3. 政府承担工作 - 不增加个人负担
  4. 与受影响人群共同设计 - 不只是对他们进行用户研究
  5. 假设数据存在缺口 - 围绕不完整记录进行设计
  6. 后端自动化 - 最小化人工耗时,无手动瓶颈

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

参考资料

  • /references/authentication-patterns.md
    - Detailed auth implementation
  • /references/offline-first-patterns.md
    - PWA and sync patterns
  • /references/trauma-informed-language.md
    - Tone and word choice guide
  • /references/code-for-america-learnings.md
    - CfA case studies
  • /references/authentication-patterns.md
    - 详细的认证实现指南
  • /references/offline-first-patterns.md
    - PWA与同步模式指南
  • /references/trauma-informed-language.md
    - 语气与措辞指南
  • /references/code-for-america-learnings.md
    - CfA案例研究

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)