Relationship Building for Justice
An interactive criminal justice training module transforming soft-skills education through expert interviews, dynamic assessments, and accessibility-first design.
The Challenge
The criminal justice course relied on traditional text-heavy delivery. Lectures, readings, traditional assessments. Instructional designers and SMEs recognized that soft-skills topics like relationship building weren’t sticking. Students reported cognitive overload from dense content, low engagement with abstract guidance, and difficulty applying concepts to real situations.
The design challenge: How do we create an entirely new module that increases engagement, supports knowledge retention, manages cognitive load, and delivers a richer media experience than the existing course?
The Solution
Working alongside instructional designers and criminal justice SMEs, I helped conceptualize and build Relationship Building for Justice, a 30-minute interactive module designed from the ground up to address engagement, retention, and cognitive load problems. We designed a structure combining expert interviews, scenario-based learning, knowledge checks, and guided reflection, then I translated that into visual/UX design and built it with accessibility and web standards as core principles. The result: a media-rich, cognitively manageable learning experience that works.
Role: Designer (UX/UI) + Frontend Developer, Innovation Partner
Collaborators: Instructional Designers, Subject Matter Experts (criminal justice professionals)
Tech Stack: HTML/CSS/JavaScript (custom)
Focus: Collaborative innovation on pedagogical structure, information architecture, visual hierarchy, cognitive load management, progressive disclosure, WCAG 2.1 AA accessibility
The Impact
The redesigned layout and visual hierarchy made the pedagogical content work better:
- Improved clarity - Content that felt overwhelming became navigable. Students knew what to focus on and in what order.
- Better engagement - Strategic use of whitespace, visual hierarchy, and pacing kept attention high throughout.
- Knowledge retention - Progressive disclosure meant students weren’t cognitively overloaded; knowledge checks felt natural, not intrusive.
- Accessibility benefit - Accessibility decisions improved the experience for all users. Clear focus states, semantic structure, captions, and sufficient color contrast made the module easier to navigate and understand regardless of device, environment, or ability.
- Strong adoption - The module became standard training with sustained engagement and higher completion rates than text-heavy predecessors.
The project demonstrates how thoughtful information architecture, visual hierarchy, and accessibility-first design can make complex instructional content work harder for students.
