1. Project overview & goals
David Gonzales's portfolio lived on a three-page Google Site (Home, Resume, Project Page) that embedded only two of his six published projects. This project replaces it with a hand-coded static site that presents his instructional design, creativity, training and leadership work as one story for L&D hiring teams.
Goals
- Show, in under a minute, that David designs learning that changes on-the-job behavior.
- Surface all six published learning projects with live previews and one-click launch.
- Show leadership and training impact with real, verifiable metrics.
- Show credible AI-in-L&D capability (7 credentials plus hands-on tools).
- Make Universal Design for Learning (UDL) visible in both the work and the site itself.
- Serve as a portfolio piece in its own right: this document is the case study.
Constraints
- No invented facts, metrics, clients or testimonials. All content comes from David's résumé and published projects.
- Static HTML/CSS/vanilla JS hosted on Google Cloud Storage with relative links only.
- WCAG 2.1 AA accessibility, extended by CAST UDL Guidelines 3.0.
2. Target audience
| Persona | Needs | What they scan for |
|---|---|---|
| Hiring manager / L&D leader (enterprise learning design and enablement roles) | Evidence of behavior-change design, inclusive/scalable design, measurement, AI fluency | Featured work, UDL notes, impact numbers, approach |
| Recruiter / talent partner | Fast fit check against modern L&D and enablement roles | Title, years, credentials, résumé PDF, contact |
| Peer designer / panel interviewer | Craft quality and process | Project interactivity, this case study, UDL mapping |
3. Needs analysis
Current state (Google Sites)
- Only 2 of 6 projects (Locating a Library Book, Pour-Over Coffee) were visible.
- No statement of design approach, impact metrics, AI capability or UDL.
- The template styling limited visual polish and brand differentiation.
Desired state, mapped to role requirements
Modern L&D and enablement roles ask for scenario-based learning for behavior change, reusable and scalable frameworks, measurement tied to business impact, ADDIE / Design Thinking / backward design, facilitation, leadership programs, and building AI capability at work. Inclusive, scalable learning design (UDL) strengthens that story.
Gap & intervention
- Gap: evidence existed in the résumé and the bucket but wasn't organized around these competencies. Intervention: build the information architecture around them, including UDL.
- Gap: projects were buried. Intervention: a project grid with thumbnails, tags, UDL-in-action notes, preview and launch.
4. Information architecture & sitemap
A single scrolling page keeps the hiring story linear and skimmable. The case study is a separate page because it's long-form reading. Multiple navigation paths (sticky nav, in-page anchors, case-study TOC) are themselves a UDL choice.
5. User journey
| Stage | User goal | Design response |
|---|---|---|
| Land | Who is this, and are they relevant? | Hero: name, MSIDT, a behavior-change value proposition, and two CTAs (work, résumé) |
| Orient | How does he think? | Approach: six pillars plus a UDL band with Engagement, Representation, and Action & Expression |
| Evaluate | Can he build it? | Project cards: cover, description, UDL-in-action note, tags, quick preview, launch |
| Verify | Does it work at scale? | Impact metrics (number + caption) and career timeline |
| Differentiate | AI-ready and inclusive? | Credentials list, AI tools, and UDL evidence |
| Act | Next step | Résumé PDF, email, LinkedIn |
6. UDL Framework
The site and the featured projects are framed with CAST’s Universal Design for Learning Guidelines version 3.0. UDL’s goal is learner agency that is purposeful and reflective, resourceful and authentic, and strategic and action-oriented. The three principles are Design Multiple Means of Engagement (the “why” of learning), Design Multiple Means of Representation (the “what” of learning), and Design Multiple Means of Action & Expression (the “how” of learning).
How the three principles show up on this site
| Principle | Site decisions | Project evidence (verified in the published files) |
|---|---|---|
| Multiple Means of Engagement (why) | Multiple paths into content (nav, anchors, case-study TOC); clear progress cues in the impact section; reduced-motion respect so motion never becomes a barrier | Job Description Coach: learners name their own industry (choice and relevance). Drag Match: hints, scoring and coach feedback. COPE and Rise modules: self-paced paths with progress or scrollable pacing. |
| Multiple Means of Representation (what) | Metrics shown as large numbers and plain-language captions; screenshots plus written descriptions; typography and color designed for contrast | COPE Adapt course: text, graphics with alt text, accordion, narrative, hotspots, matching and MCQ, plus downloadable worksheets. Storyline and Rise modules: on-screen visuals paired with narration audio. |
| Multiple Means of Action & Expression (how) | Keyboard-accessible preview dialog; clickable cards and text links to the same project; skip link and focus rings | Drag Match: drag-and-drop or an accessible click/keyboard alternative. Job Description Coach: judge a posting and write why. COPE: on-screen practice plus printable worksheets. |
What we did not invent
UDL-in-action notes appear only where the published project HTML (or its course JSON / media assets) supports them. Closed captions, for example, are not claimed for the Storyline or Rise modules because they were not verified in the source files.
7. Visual design system
Direction: clean, modern and human, with editorial warmth. A warm paper background and a deep ink color give calm contrast. Teal suggests trust and clarity, and a restrained coral marks focus and emphasis. The visual system is unchanged from the approved direction.
#F7F5F0
Page background
#16181D
Text, primary buttons
#4A5160
Secondary text
#0B5F66
Accent, links, eyebrows
#B4441B
Focus rings, numerals
#E6EEEE
Tags, table headers
#DEDAD0
Borders
#FFFFFF
Cards, alt sections
Typography
- Display: Fraunces (variable serif, 400–600, italic accents for key words).
- Body/UI: Inter (400–600).
- Scale: fluid clamp() headings, 17px body at 1.65 line-height.
Components
- Sticky translucent navigation with mobile menu toggle
- Pill buttons (primary ink / ghost outline)
- Approach pillars with numbered eyebrows
- UDL band with three principle cards
- Project cards with UDL-in-action notes
- Modal preview dialog (native <dialog>) with iframe
- Stat blocks (number + caption) and a career timeline
- Credential list and tool chips
- Dark call-to-action panel
Motion
Subtle 0.8s fade-and-rise reveals on scroll and gentle hover lift on cards. All motion is turned off under prefers-reduced-motion (a UDL Engagement consideration as well as an accessibility one).
8. Accessibility plan
WCAG 2.1 AA is the floor. UDL Guidelines 3.0 go further by designing for learner variability from the start, not only for compliance after the fact.
| Area | Approach |
|---|---|
| Contrast | Body text Ink on Paper about 16:1, Slate about 7.6:1, Teal links about 7:1, Coral about 5.5:1. All pass WCAG AA. |
| Keyboard | Skip link, logical tab order, visible 3px coral focus rings, and native <dialog> with Esc to close and focus returned to the trigger |
| Semantics | Landmarks (header/nav/main/footer), ordered headings, labeled tag lists |
| Media | Descriptive alt text on every thumbnail; iframe titles |
| Motion | prefers-reduced-motion disables reveals, transitions and smooth scrolling |
| Responsive | Fluid grid from 1440px down to 320px; content reflows without horizontal scroll |
| Beyond WCAG (UDL) | Multiple means to find content; metrics as number + language; UDL notes on projects; case-study TOC as a second representation of the document structure |
9. Content strategy mapped to competencies
Content is mapped to the competencies of modern L&D and enablement roles:
| Role competency | Evidence on the site |
|---|---|
| Scenario-based learning for behavior change | Job Description Coach (judge postings and get coaching), Job Analysis Drag Match |
| Reusable, scalable frameworks | COPE certificate module series (350+ Scholars), job aids, LAUSD review template |
| Inclusive, scalable learning design (UDL) | Approach UDL band; per-project UDL-in-action notes grounded in published features; site modeling of Engagement, Representation, and Action & Expression |
| Measurement tied to business impact | 60%→91% shift compliance; program metric analysis and client reporting |
| ADDIE, Design Thinking, backward design | Approach section; MSIDT coursework; Boys & Girls Club ADDIE training |
| Facilitation | Disney Imagination Campus programs; quarterly COPE workshops |
| Leadership programs | LAUSD leadership training for 100+ colleagues each quarter; 200+ staff onboarding |
| Building AI capability | 7 AI-for-L&D credentials; Mindsmith and Claude Design |
Voice: first person, plain language, outcomes first. Every claim comes from David's résumé or the published projects.
10. Evaluation & success metrics
The plan uses Kirkpatrick-style levels for a portfolio, with UDL-specific checks added:
- Reaction: qualitative feedback from 3–5 peers or recruiters on clarity, visual appeal and whether UDL is understandable without jargon.
- Behavior: time to find a project and launch it (target under 15s); résumé PDF opens; contact clicks; readers can name at least one UDL principle after a short visit.
- Results: interview invitations and recruiter responses for roles where the portfolio was shared, tracked in David's job search.
- Quality gates: Lighthouse accessibility ≥ 95, all links return HTTP 200, no layout breaks at 390px and 1440px, every UDL-in-action note still matches the live project file.
11. Hosting & maintenance
- Hosted as static files in the public Google Cloud Storage bucket davidgonzalesportfolio under /site/ and served at storage.googleapis.com/davidgonzalesportfolio/site/index.html.
- Uploaded with correct Content-Type and Cache-Control: no-cache so updates appear immediately.
- Relative links make the site portable to any static host (GitHub Pages, Netlify or a custom domain) without changes.
- To add a project: upload its published folder to the bucket, add a thumbnail to assets/thumbs, add one card entry with a UDL note only if the source supports it, then re-upload.
- Review quarterly: refresh metrics, résumé PDF, credentials and UDL notes against the live project files.