A space for experimentation—where learning
strategy, visual storytelling, generative AI,
and rapid production come together to test
what is possible.
The lab is not a gallery of finished answers.
It is where concepts are pressure-tested,
workflows are accelerated, and emerging tools
are directed toward meaningful human
experiences.
{[
['Observe', 'Notice where a workflow strains'],
['Experiment', 'Test the smallest useful version'],
['Prototype', 'Build something that can be judged'],
['Validate', 'Check it against a real constraint'],
['Refine', 'Keep what earned its place'],
['Deliver', 'Move it into production work'],
].map(function (stage, index) {
return (
Cinematic production normally requires a crew,
a budget, and a schedule most projects never get.
Hypothesis
Generative tools directed as one connected system —
rather than used in isolation — could carry a concept
from narrative through to finished motion.
Experiment
Structure the concept in one model, develop the visual
language in another, and translate it into motion in a
third, holding creative direction constant throughout.
Result
A complete cinematic prototype produced by a single
practitioner, start to finish.
Learning
The bottleneck was never the tools. It was having a clear
enough point of view to direct them.
The Train Story is an
experimental cinematic prototype created to
explore how generative AI can support a
complete visual-production workflow. The
concept was structured and refined through
Claude, developed visually through Gemini,
and translated into motion through Omni.
Rather than treating each platform as an
isolated tool, I directed them as one
connected production system—from concept and
narrative framing to visual language, scene
development, and final animation.
The film draws inspiration from the
architectural tension, psychological scale,
and layered reality associated with
Christopher Nolan's cinema, particularly
Inception. The objective was not to
reproduce that film, but to study how its
atmosphere, pacing, visual gravity, and sense
of impossible space could inform an original
AI-enabled experiment. This piece is one
example of how I combine creative direction,
systems thinking, storytelling, and emerging
technology to move an idea from imagination
into a tangible cinematic experience.
Claude · Concept and narrative
Gemini · Visual development
Omni · Motion production
Creative direction · Jonathan
{reducedMotion && (
Motion preferences are enabled. The video will
play only when activated.
)}
);
}
function CapabilityOS() {
const principles = [
{ title: 'Clarify', belief: 'Every complex problem hides a simple truth waiting to be found.', approach: 'I start by stripping a challenge to its essential structure — the real audience, the real constraint, the real outcome — before a single screen gets designed.', proof: 'Operation: Legacy Unlocked began as a dense compliance mandate; clarifying the real behavior at stake turned it into a mission.' },
{ title: 'Connect', belief: 'Learning, technology, and business outcomes are one system, not three departments.', approach: 'I map how people, workflows, and platforms actually intersect, so a design decision in one area doesn\u2019t break another.', proof: 'Learn@Cox Launch Promo connected a platform migration to the emotional experience of the people living through it.' },
{ title: 'Prototype', belief: 'Thinking becomes real the moment you can click it.', approach: 'I build fast, tangible versions of an idea early — using AI-native tooling to move at studio speed — so decisions get tested, not debated.', proof: 'The Train Story moved from script to a working cinematic prototype in a fraction of a traditional production timeline.' },
{ title: 'Transform', belief: 'The goal was never the deliverable. It was the change it makes possible.', approach: 'I design for the moment after launch — adoption, behavior change, measurable movement — not just the moment of delivery.', proof: 'Every engagement is measured against what actually shifted for the people and the organization, not just what shipped.' },
];
const [active, setActive] = React.useState(0);
const [signal, setSignal] = React.useState(false);
const p = principles[active];
const select = (i) => {
if (i === active) return;
setSignal(true);
setActive(i);
window.dispatchEvent(new CustomEvent('jiz-signal'));
setTimeout(() => setSignal(false), 750);
};
return (
Inside the process
The operating system behind the work.
Four principles guide every project — select one to see how it shapes a decision.
);
}
function FeaturedWork({ onOpenWork }) {
const projects = [
{
id: 'operation-legacy-unlocked',
number: '01',
label: 'Featured Case Study',
title: 'Operation: Legacy Unlocked',
organization: 'Cox Enterprises',
mission: 'An immersive leadership learning experience that casts employees as Cox Intelligence Agents, transforming organizational history into a mission-driven digital experience.',
projectType: 'Learning Experience Design',
role: 'Learning Experience Designer / Developer',
focus: 'Game-based learning · Leadership development · Enterprise engagement',
image: '../../assets/imagery/olu-featured-work-cover.png',
imageAlt: 'Operation: Legacy Unlocked immersive learning experience',
status: 'available',
statusLabel: 'Case study available',
actionLabel: 'Open Case Study',
routeName: 'Operation: Legacy Unlocked',
atmosphere: 'lime',
},
{
id: 'hotelkey-onboarding',
number: '02',
label: 'Case Study',
title: 'HotelKey New Hire Onboarding',
organization: 'IHG Hotels & Resorts',
mission: 'Helped new IHG hotel hires build real competence in an unfamiliar property system by teaching its operating logic before its screens.',
projectType: 'Enterprise Onboarding',
role: 'Creative Content Specialist / Developer',
focus: 'Systems adoption · Video learning · Global onboarding',
image: '../../assets/imagery/hotelkey-featured-work-cover.png',
imageAlt: 'HotelKey New Hire Onboarding — IHG property system training experience',
status: 'available',
statusLabel: 'Case study available',
actionLabel: 'Open Case Study',
routeName: 'HotelKey New Hire Onboarding',
atmosphere: 'cyan',
},
{
id: 'guest-crm-pilot',
number: '03',
label: 'Case Study',
title: 'Guest CRM Pilot',
organization: 'IHG Hotels & Resorts',
mission: 'Helped IHG pilot hotel teams adopt a new guest platform with confidence by teaching the operational reasoning behind each workflow.',
projectType: 'Product Enablement',
role: 'Learning Experience Strategist / Developer',
focus: 'Pilot enablement · Performance support · Product adoption',
image: '../../assets/imagery/guestcrm-featured-work-cover.png',
imageAlt: 'Guest CRM Pilot — IHG Hotels & Resorts change enablement',
status: 'available',
actionLabel: 'Open Case Study',
routeName: 'Guest CRM Pilot',
statusLabel: 'Case study available',
atmosphere: 'amber',
},
{
id: 'workday-learn',
number: '04',
label: 'Case Study',
title: 'Workday Learn Launch',
organization: 'Cox Enterprises',
mission: 'Helped Cox Enterprises employees see a new platform as an investment in their growth by leading launch communications with purpose over mechanics.',
projectType: 'Enterprise Learning',
role: 'Learning Experience Designer',
focus: 'Change adoption · Learning systems · Internal communications',
image: '../../assets/imagery/workday-featured-work-cover.png',
imageAlt: 'Workday Learn Launch — Cox Enterprises enablement experience',
status: 'available',
statusLabel: 'Case study available',
actionLabel: 'Open Case Study',
routeName: 'Workday Learn Launch',
atmosphere: 'violet',
}
];
const [activeIndex, setActiveIndex] = React.useState(0);
const [direction, setDirection] = React.useState('next');
const [reducedMotion, setReducedMotion] = React.useState(false);
const touchStartXRef = React.useRef(null);
React.useEffect(function () {
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return undefined;
const media = window.matchMedia('(prefers-reduced-motion: reduce)');
const update = function () { setReducedMotion(media.matches); };
update();
if (typeof media.addEventListener === 'function') {
media.addEventListener('change', update);
return function () { media.removeEventListener('change', update); };
}
if (typeof media.addListener === 'function') {
media.addListener(update);
return function () { media.removeListener(update); };
}
return undefined;
}, []);
const activeProject = projects[activeIndex];
const progressPercent = ((activeIndex + 1) / projects.length) * 100;
const selectProject = function (nextIndex) {
const normalized = (nextIndex + projects.length) % projects.length;
if (normalized === activeIndex) return;
setDirection(normalized > activeIndex ? 'next' : 'previous');
setActiveIndex(normalized);
};
const showPrevious = function () {
setDirection('previous');
setActiveIndex(function (current) { return current === 0 ? projects.length - 1 : current - 1; });
};
const showNext = function () {
setDirection('next');
setActiveIndex(function (current) { return current === projects.length - 1 ? 0 : current + 1; });
};
const handleKeyDown = function (event) {
if (event.key === 'ArrowLeft') { event.preventDefault(); showPrevious(); }
else if (event.key === 'ArrowRight') { event.preventDefault(); showNext(); }
else if (event.key === 'Home') { event.preventDefault(); setDirection('previous'); setActiveIndex(0); }
else if (event.key === 'End') { event.preventDefault(); setDirection('next'); setActiveIndex(projects.length - 1); }
};
const handleTouchStart = function (event) {
if (!event.touches || event.touches.length === 0) return;
touchStartXRef.current = event.touches[0].clientX;
};
const handleTouchEnd = function (event) {
if (touchStartXRef.current === null || !event.changedTouches || event.changedTouches.length === 0) return;
const distance = event.changedTouches[0].clientX - touchStartXRef.current;
touchStartXRef.current = null;
if (Math.abs(distance) < 48) return;
if (distance > 0) showPrevious(); else showNext();
};
const openActiveProject = function () {
if (activeProject.status !== 'available' || !activeProject.routeName || typeof onOpenWork !== 'function') return;
onOpenWork(activeProject.routeName);
};
return (
Featured Work / Proof
Ideas made real.
Selected work across enterprise learning, cinematic storytelling, systems adoption, and AI-enabled production—designed to move people from complexity to confident action.
Showing {activeProject.title}, project {activeIndex + 1} of {projects.length}.
);
}
function Insights() {
const posts = [
{
label: 'AI + PRACTICE',
title: 'AI changes the workflow—not the responsibility.',
summary:
'The value is not faster output alone. It is using speed to test more thoughtfully, compare alternatives, and protect the quality of the final experience.',
takeaway:
'Speed expands the options. Judgment protects the outcome.',
},
{
label: 'DESIGN JUDGMENT',
title: 'Scenarios should build judgment, not reward guessing.',
summary:
'Meaningful practice gives people context, consequence, and room to make a defensible decision—not merely select the answer the designer prefers.',
takeaway:
'Practice should strengthen decisions—not test compliance.',
},
{
label: 'SYSTEMS THINKING',
title: 'The learning experience is only one part of the system.',
summary:
'Adoption depends on tools, incentives, communication, leadership, workflow, and reinforcement aligning around the same behavioral outcome.',
takeaway:
'Adoption succeeds when the entire environment supports the behavior.',
},
];
return (
Insights
Thinking out loud.
Three principles shaping how I use AI,
design judgment, and systems thinking to
create experiences people can trust,
understand, and adopt.
Perspective in practice
Technology becomes meaningful when
judgment, context, and human experience
remain part of the same system.
{posts.map(function (post, index) {
return (
{String(index + 1).padStart(2, '0')}
{post.label}
{post.title}
{post.summary}
{post.takeaway}
);
})}
);
}
function LetsBuild({ onExploreWork }) {
const PROJECT_TYPES = ['Learning Experience', 'AI Strategy', 'Creative Production', 'Enterprise Transformation', 'Product Adoption', 'Consulting'];
const TIMELINES = ['Exploring', 'Within 30 Days', '1–3 Months', '3+ Months'];
const BUDGETS = ['Not Established', 'Under $10k', '$10k–25k', '$25k–50k', '$50k+'];
const REFERRALS = ['LinkedIn', 'Referral', 'Google Search', 'Previous Colleague', 'Conference or Event', 'Other'];
const [form, setForm] = React.useState({ name: '', email: '', org: '', types: [], detail: '', timeline: '', budget: '', referral: '' });
const [formStatus, setFormStatus] = React.useState('idle');
const [formMessage, setFormMessage] = React.useState('');
const statusRef = React.useRef(null);
const inFlightRef = React.useRef(false);
const mountedRef = React.useRef(true);
React.useEffect(() => () => { mountedRef.current = false; }, []);
React.useEffect(() => {
if ((formStatus === 'success' || formStatus === 'error') && statusRef.current) statusRef.current.focus();
}, [formStatus]);
const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
const toggleType = (t) => setForm((f) => ({ ...f, types: f.types.includes(t) ? f.types.filter((x) => x !== t) : f.types.concat(t) }));
const handleSubmit = async function (event) {
event.preventDefault();
if (inFlightRef.current) return;
const formEl = event.currentTarget;
if (form.types.length === 0) {
setFormStatus('error');
setFormMessage('Select at least one project type so I can route your inquiry correctly.');
return;
}
const formData = new FormData(formEl);
inFlightRef.current = true;
setFormStatus('submitting');
setFormMessage('');
formData.append('access_key', 'be51b404-7cd3-43c5-afaf-5b52369eb150');
formData.append('subject', 'New Portfolio Project Inquiry');
formData.append('from_name', 'Jonathan Zamarripa Portfolio');
let ok = false;
let notice = 'Something interrupted the submission. Please try again.';
try {
const response = await fetch('https://api.web3forms.com/submit', { method: 'POST', body: formData });
let data = null;
try { data = await response.json(); } catch (parseError) { data = null; }
if (response.ok && data && data.success === true) {
ok = true;
} else if (data && typeof data.message === 'string' && data.message.length < 160) {
notice = data.message;
}
} catch (networkError) {
notice = 'The request could not reach the server. Check your connection and try again.';
} finally {
inFlightRef.current = false;
if (mountedRef.current) {
if (ok) {
setFormStatus('success');
setFormMessage('Your inquiry is on its way. I’ll be in touch soon.');
formEl.reset();
setForm({ name: '', email: '', org: '', types: [], detail: '', timeline: '', budget: '', referral: '' });
} else {
setFormStatus('error');
setFormMessage(notice);
}
}
}
};
return (
Let's build what's next
Have a complex problem worth making clear?
I partner with teams navigating complex learning, technology, adoption, and transformation challenges. Tell me what you're trying to change, where the friction lives, and what success should make possible.
From ambiguity to direction
Strategy becomes tangible when the problem can be seen, mapped, tested, and refined.
) : (
)}
{activeProject.statusLabel}