Design Justice
Heuristic Checker

Evaluating Design Through Inclusive UX Metrics

PROJECT OVERVIEW
This conceptual UX tool was designed to evaluate early-stage design decisions through a justice-centered lens. The Design Justice Heuristic Checker (DJHC) enables practitioners to assess how well their interfaces align with three key values: equity, accessibility, and sustainability.

The tool introduces a low-friction, diagnostic flow that maps design heuristics to justice principles — offering a practical framework for inclusive critique, early risk flagging, and ethical decision support in product design.

MY ROLE

  • Initiated the product concept and UX vision

  • Defined the design system, including logo, palette, type, and layout

  • Created and prototyped all wireframes and task flows

  • Authored the sitemap and interaction architecture

  • Developed custom UI patterns for semantic scoring and progressive feedback

  • Led documentation of design rationale and heuristic alignment

PROBLEM SPACE

Most usability tools focus on technical correctness or conversion outcomes. There’s a gap in the market for evaluative tools that center ethical outcomes, particularly within the design phase of digital product development. DJHC proposes a pattern-level analysis approach, helping UX teams and designers ask: Does this design support justice, accessibility, and longevity?

RESEARCH + DESIGN QUESTION

How can UX teams evaluate digital design patterns for justice-centered alignment, and what interface structures best support ethical reflection without adding friction?

GOALS + OBJECTIVES

  • Extend traditional UX heuristics into justice-centered evaluation

  • Translate ethical values into actionable, interface-driven UX metrics

  • Prototype a diagnostic tool that enables rapid, low-friction ethical critique

  • Use semantic, visual scoring to support dimensional evaluation

  • Validate usability while maintaining focus on ethical design principles

  • Reinforce decision-making with clear, real-time visual feedback loops

  • Support heuristic thinking through minimal, guided interactions

  • Design a just-in-time reflection layer to complement standard UX evaluation workflow

SITE MAP

Home

├── Upload

│ └── Upload Design Brief (PDF/Doc/Image)

└── Results

├── Justice Heuristic Score

│ ├── Sustainable

│ ├── Accessible

│ └── Equitable

└── Visual Report (Preview + Download)

Each screen reflects a single, sequential task within a minimal, guided diagnostic flow.

METHODOLOGY & DESIGN PRINCIPLES

The system was designed inspired by a hybrid of:

  • Nielsen’s 10 Usability Heuristics (for interface logic, clarity, and flow)

  • Core tenets from the International Design Justice Network, including principles of community, anti-exploitation, and global knowledge practices

The framework avoids static evaluations. Instead, it encourages continuous, context-sensitive reflection — in line with DJN’s principle that “change is emergent from an accountable, accessible, and collaborative process.”

INTERACTION WALKTHROUGH

  1. Intro Screen / Brand Splash

    • Features custom DJHC logotype and bold “Check” CTA

    • Establishes tone: direct, purposeful, tool-like

  2. Upload Interface

    • Single-tap file upload with icon-based affordance

    • File type validated instantly to avoid missteps

  3. Score Output Interface

    • Semantic scoring bars display equity, access, and sustainability alignment

    • Optional report icon (open-book symbol) reveals deeper rationale

    • Feedback is visual, unobtrusive, and transparent

NOVEL INTERACTION FEATURES

  • Tap-to-Upload with Smart Validation
    Eliminates multi-step input flows by inferring file type and providing instant feedback
    Heuristic: Error prevention, recognition over recall

  • Semantic Value Bars for Justice Criteria
    Each principle receives its own score and visual signal, improving clarity and granularity
    Heuristic: Visibility of system status, match between system and real world

  • Progressive Disclosure via Report Icon
    Users can optionally view the full rationale behind scores — avoiding information overload
    Heuristic: Flexibility and efficiency of use, minimalist design

  • Purposeful Loading State
    A brief animated loading screen provides feedback while creating reflective pause
    Heuristic: Visibility of system status, user control and trust

BRANDING & VISUAL SYSTEM

  • Visual Identity

    • Color palette: Violet (sustainability), Electric Blue (equity), Amber (accessibility), Black (focus)

    • Typography: Monospaced geometric type for clarity and neutrality

    • Logotype
      Custom stacked letterforms (DJHC) reinforce the logic and systemization of the evaluation model

    • Iconography: Upload symbol, bars, and open book reflect data, process, and literacy

TOOLS USED

  • Figma (Low-fi interface design and wireframe prototyping)

  • Illustrator (brand asset development)

  • QuickTime Media Player (prototype video)

  • Midjourney Ai (brand asset ideation)

REFLECTION

This project pushed me to treat ethical principles as interaction requirements, not abstract ideals. Translating deep concepts like equity and sustainability into interface behaviors required me to think systemically — about feedback, hierarchy, and meaning. Future versions could explore pattern libraries, adaptive reporting, or integration into common prototyping tools.

MEDIA

  • 3-screen prototype walkthrough (video format)

  • Sitemap, wireframes, and brand system assets

Previous
Previous

UX for Calm

Next
Next

Lab Booking UX