Cultural Competence: Looking Beneath the Surface

Surface · What You See

Four formats, one cohesive system

The curriculum team handed off a structured content outline for an 11-page cultural competence training. My job was to turn that outline into a suite of polished, on-brand deliverables that work equally well in a courthouse training room and on a volunteer's laptop at home.

Participant Workbook

An 11-page print-and-digital workbook with a depth-gauge color system that mirrors the cultural iceberg concept on every page.

Asset 01 / Print + Digital

Designed for dual delivery: a print-ready PDF for in-person sessions, and this digital flipbook for self-paced or remote completion.

20-Page Facilitator Slide Deck

The same iceberg framework and color logic, rebuilt for a facilitated, in-person training session.

Asset 02 / In-Person

1 / 20

Built for facilitator-led delivery: discussion prompts, large-group debrief slides, smart-board-ready iceberg infographics, and a branching case study slide — all paced to mirror the workbook page-for-page.

TalentLMS Course

The workbook content reformatted, uploaded, and configured as a structured asynchronous course inside the program's LMS.

Asset 03 / Asynchronous LMS

TalentLMS course showing Cultural Competence course structure

Includes course unit sequencing, completion tracking, and the knowledge checks adapted from the workbook's self-assessment page.

Standalone SCORM E-Learning Module

A fully interactive, single-file HTML build with the iceberg explorer, a bias-recognition activity, a branching case study, and a self-assessment — packaged for SCORM tracking in any LMS.

Asset 04 / Interactive, SCORM-Ready

cultural-competence-module.html SCORM

Live, working preview — try the iceberg explorer, the bias-check activity, or Maria's case study branch above. Built to report completion and bookmark a learner's location back to the LMS through the SCORM API.

Deep · What Shaped It

A design system built to travel across formats

Before any layout work started, I built a small visual and instructional system so the same content would feel unmistakably like one training, whether someone met it on paper, on a projector screen, or inside an LMS.

A metaphor that does double duty

The cultural iceberg — surface, deep, deepest — became both the content model and the visual model. A color-coded "depth gauge" runs down the edge of every workbook page, lightening near the surface and deepening into navy and violet as the content moves from what's visible to what's felt. The same logic structures this case study.

Adult learning theory, made visible

Every section follows the same three-beat rhythm stated on page one of the workbook: Read & Reflect, Discuss, Apply. That rhythm is reinforced visually — eyebrow labels like LEARN, REFLECT, TRY, and DISCUSS appear consistently across the workbook, the deck, and the SCORM module, so a facilitator or self-paced learner always knows what kind of thinking a page is asking for.

Brand consistency as a constraint, not a limit

The same palette, type pairing, and icon language had to hold up in a printed workbook, a presentation projected in a courthouse training room, a browser window, and a mobile LMS view. I treated that as the design brief, not an afterthought — building reusable components (callouts, reflection prompts, checklists) once and reusing them everywhere.

Color System — The Depth Gauge

Display Baloo 2

Body / UI Inter

A rounded, friendly display face paired with a neutral, highly legible body face — warm enough for a trauma-informed topic, clear enough for a knowledge check on a phone screen.

Read & Reflect

Short readings, personal reflection prompts

Discuss

Small- and large-group activities

Apply

Self-assessment + action plan

Deepest · What's Underneath

The production decisions nobody sees on the page

The least visible work was making four formats behave like one project: tracked, accessible, and ready to live inside a real LMS.

SCORM & LMS tracking

The interactive module includes a lightweight SCORM API wrapper that bookmarks a learner's last screen and reports completion back to the LMS, so progress isn't lost if someone closes the tab mid-module.

One file, anywhere it's hosted

The SCORM module is a single self-contained HTML file — no external dependencies beyond web fonts — so it drops into TalentLMS or any SCORM-compliant LMS without a packaging headache.

Accessibility by default

Visible keyboard focus states, reduced-motion support, and color contrast checked against the navy-on-cream and white-on-navy combinations used throughout — not a separate accessibility pass, but a constraint built into the components from the start.

Format-aware pacing

The same content asks different things of a learner depending on delivery: the deck leans on facilitator prompts and group debriefs; the SCORM module front-loads the same ideas into self-contained interactions a solo learner can complete at their own pace.

Version control across four files

A shared component library (callout styles, reflection boxes, the bias-check pattern) meant a content edit in the workbook could be mirrored into the deck and the module without re-deriving the layout from scratch each time.

Built for a sensitive subject

Case studies and bias-check language were written and laid out to avoid reducing real dynamics — like the grandmother's missed calls in the Maria case study — to a tidy "right answer," keeping the emphasis on curiosity over judgment throughout the visual design, not just the copy.

Strengths & Opportunities

An honest reflection on what this project demonstrates well — and where there is room to continue growing.

Strengths

Multi-format design system. A single brand language — color gauge, type pairing, component library — held consistently across four delivery formats without starting over on each one.
Instructional structure made visible. The Read & Reflect → Discuss → Apply rhythm isn't just described — it's baked into the layout of every page and every screen, so learners always know what kind of thinking is being asked of them.
Subject matter credibility. The content isn't abstract — it was designed by someone who has spent years inside CASA programs, courthouses, and community training rooms. That lived context shaped every design decision.
Self-contained technical build. The SCORM module is a single portable file with no external dependencies, built to report completion back to any LMS — a production decision that reduces friction at every handoff.

Opportunities to Grow

Dedicated authoring tools. This suite was built with Canva and custom HTML. Expanding fluency in Articulate Storyline and Rise 360 would unlock richer branching logic, built-in quiz engines, and faster production at scale.
Learner feedback loops. This version was designed and launched without a formal post-training evaluation cycle. Building in structured knowledge checks and learner feedback collection from the start would strengthen future iterations.
Motion and media integration. The current SCORM module relies on CSS transitions. Adding narrated video segments, motion graphics, or audio-enhanced interactions would deepen engagement for asynchronous learners.
Cross-program version control. Managing four formats manually works at this scale. As the training suite grows, adopting a structured asset management workflow would make updates faster and more consistent across all deliverables.