How This Site Was Built

A portfolio that claims to demonstrate instructional design should be able to show its own design process. So here it is — the same way I'd document any client engagement.

Client: myself (the hardest stakeholder I've ever had)

The engagement

Analysis

The audience analysis found three distinct visitor types — enterprise L&D leaders, mission-driven organizations, and startup founders — with very different questions and very little time. The performance gap: a traditional portfolio describes scenario-based design without ever demonstrating it. The design implication was obvious once stated: make the visitor the learner.

Design

The site borrows only mechanics its audience already knows from courseware — a launch screen, learning objectives, audience branching, "what would you do?" decision points, a progress indicator, a completion certificate. Nothing needs instructions. Two design laws kept it honest: everything is skippable (a recruiter with 60 seconds gets value), and every playful mechanic maps 1:1 to a real site function (no invented points, no lore).

Development

Hand-built with plain HTML, CSS, and JavaScript — no framework, no build step, no tracking scripts. An AI-assisted pipeline accelerated drafting, cover illustration, and iteration, with human review on every decision — the same workflow that cuts 30–40% off my client development cycles. The whole site weighs less than a single stock photo.

Accessibility

WCAG 2.2 AA was a launch requirement, not a retrofit: semantic landmarks, full keyboard operability, visible focus states, screen-reader-announced scenario feedback, prefers-reduced-motion support, and AA-checked color contrast in both themes. If you find a gap, tell me and I'll fix it — publicly.

Evaluation

The site emits xAPI-style statements as you move through it — which paths visitors choose, which case studies they open, where they stop. That's not analytics theater: it's the same instrumentation strategy I designed when migrating Johnson & Johnson's library from SCORM to xAPI. You can inspect your own session anytime via "Your learning record" in the footer. Data stays in your browser.