Skip to content

dougdevitre/cognitive-load-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

License: MIT TypeScript Contributions Welcome PRs Welcome

Cognitive Load Reducer UI Kit

Design system for stressed users

The Problem

Court users are under extreme stress. Cognitive overload, technostress, and complex interfaces cause abandonment and errors. When someone is navigating the most difficult moment of their life -- a custody hearing, an eviction, a protection order -- the last thing they need is a confusing interface. Studies show that stress reduces working memory capacity by up to 50%, yet most legal tech interfaces are designed as if users have unlimited attention and patience.

The Solution

A purpose-built design system that reduces cognitive load at every step. Step-by-step flows break complex processes into manageable pieces. Plain language UI replaces legal jargon with words real people use. Progress tracking with encouragement keeps users moving forward. "Explain like I'm 12" toggles let users choose their complexity level. Calming design patterns reduce anxiety instead of amplifying it.

graph LR
    subgraph "Design Tokens"
        Colors
        Typography
        Spacing
    end

    subgraph "Components"
        StepWizard
        ProgressBar
        PlainLanguageToggle
        CalmAlert
        GuidedFlow
    end

    subgraph "Patterns"
        MultiStepForm["Multi-step Form"]
        HelpOverlay["Help Overlay"]
        ComplexityReducer["Complexity Reducer"]
    end

    Colors --> StepWizard
    Typography --> StepWizard
    Spacing --> StepWizard
    Colors --> ProgressBar
    Colors --> PlainLanguageToggle
    Colors --> CalmAlert
    Colors --> GuidedFlow

    StepWizard --> MultiStepForm
    ProgressBar --> MultiStepForm
    PlainLanguageToggle --> ComplexityReducer
    CalmAlert --> HelpOverlay
    GuidedFlow --> MultiStepForm

    MultiStepForm --> ThemeProvider["Theme Provider"]
    HelpOverlay --> ThemeProvider
    ComplexityReducer --> ThemeProvider
Loading

Who This Helps

  • Court users under stress -- people facing eviction, custody disputes, or criminal charges who need to fill out forms and understand processes
  • Elderly litigants -- older adults who may struggle with complex digital interfaces
  • Users with cognitive disabilities -- people who benefit from simplified, step-by-step interactions
  • ESL speakers -- users who need plain language over legal jargon
  • Justice tech developers -- teams building court-facing applications who need accessible, stress-tested components

Features

  • Step-by-step wizard components that break complex tasks into small, achievable steps
  • Plain language toggle system that lets users switch between legal and everyday language
  • Progress tracking with encouragement messages to keep users motivated
  • Calming alert and notification patterns that inform without alarming
  • WCAG 2.1 AA compliant out of the box
  • Storybook documentation with usage examples and accessibility notes

Quick Start

npm install @justice-os/cognitive-load-ui
import { StepWizard, PlainLanguageToggle, CalmAlert } from '@justice-os/cognitive-load-ui';

function CourtFilingForm() {
  const steps = [
    {
      title: 'About You',
      description: 'Basic contact information (2 fields)',
      content: <PersonalInfoFields />,
    },
    {
      title: 'What Happened',
      description: 'Tell us about your case',
      content: <CaseDetailsFields />,
    },
    {
      title: 'Review & Submit',
      description: 'Check everything before filing',
      content: <ReviewSummary />,
    },
  ];

  return (
    <StepWizard
      steps={steps}
      onComplete={() => console.log('Filed!')}
      allowSaveProgress={true}
    />
  );
}

See examples/step-wizard-demo.tsx for a full working example.

Development

git clone https://github.com/dougdevitre/cognitive-load-ui.git
cd cognitive-load-ui
npm install
npm run dev       # Start Storybook on port 6006
npm run test      # Run tests
npm run build     # Build for production

Roadmap

Feature Status
StepWizard component with progress tracking Done
Calming color token system (WCAG AA) Done
PlainLanguageToggle for jargon/plain switching In Progress
CalmAlert notification patterns In Progress
Storybook documentation site Planned
Dark mode / high-contrast theme Planned

License

MIT -- see LICENSE for details.


Justice OS Ecosystem

This repository is part of the Justice OS open-source ecosystem — 32 interconnected projects building the infrastructure for accessible justice technology.

Core System Layer

Repository Description
justice-os Core modular platform — the foundation
justice-api-gateway Interoperability layer for courts
legal-identity-layer Universal legal identity and auth
case-continuity-engine Never lose case history across systems
offline-justice-sync Works without internet — local-first sync

User Experience Layer

Repository Description
justice-navigator Google Maps for legal problems
mobile-court-access Mobile-first court access kit
cognitive-load-ui Design system for stressed users
multilingual-justice Real-time legal translation
voice-legal-interface Justice without reading or typing
legal-plain-language Turn legalese into human language

AI + Intelligence Layer

Repository Description
vetted-legal-ai RAG engine with citation validation
justice-knowledge-graph Open data layer for laws and procedures
legal-ai-guardrails AI safety SDK for justice use
emotional-intelligence-ai Reduce conflict, improve outcomes
ai-reasoning-engine Show your work for AI decisions

Infrastructure + Trust Layer

Repository Description
evidence-vault Privacy-first secure evidence storage
court-notification-engine Smart deadline and hearing alerts
justice-analytics Bias detection and disparity dashboards
evidence-timeline Evidence timeline builder

Tools + Automation Layer

Repository Description
court-doc-engine TurboTax for legal filings
justice-workflow-engine Zapier for legal processes
pro-se-toolkit Self-represented litigant tools
justice-score-engine Access-to-justice measurement
justice-app-generator No-code builder for justice tools

Quality + Testing Layer

Repository Description
justice-persona-simulator Test products against real human realities
justice-experiment-lab A/B testing for justice outcomes

Adoption Layer

Repository Description
digital-literacy-sim Digital literacy simulator
legal-resource-discovery Find the right help instantly
court-simulation-sandbox Practice before the real thing
justice-components Reusable component library
justice-dev-starter-kit Ultimate boilerplate for justice tech builders

Built with purpose. Open by design. Justice for all.


⚠️ Disclaimer

This project is provided for informational and educational purposes only and does not constitute legal advice, legal representation, or an attorney-client relationship. No warranty is made regarding accuracy, completeness, or fitness for any particular legal matter. Always consult a licensed attorney in your jurisdiction before making legal decisions. Use of this software does not create any professional-client relationship.


Built by Doug Devitre

I build AI-powered platforms that solve real problems. I also speak about it.

CoTrackPro · admin@cotrackpro.com

Hire me: AI platform development · Strategic consulting · Keynote speaking

AWS AI/Cloud/Dev Certified · UX Certified (NNg) · Certified Speaking Professional (NSA) Author of Screen to Screen Selling (McGraw Hill) · 100,000+ professionals trained

About

Design system for stressed users — reduce cognitive load in justice applications

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors