Design Justice

• Enterprise B2B SaaS (different constraints)
• Marketing funnel optimization
• Gamification/engagement maximization
• Social media features
• General "make it pretty" UX requests

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

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

Correct Patterns

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

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

Correct Patterns

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)

Code Pattern: Auto-Save Hook

// 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

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

Correct Patterns

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

Pattern 4: Trauma-Informed Forms & Flows

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

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..."

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

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

Pattern 5: Expungement/Record Clearance Specific

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

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

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

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?

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

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)