Context:
Designing and building interactive components for LCD Lab & LCD Academy ↗ and Damien Lutz Personal Website ↗
My Role:
Designer, researcher, and problem-solver, with AI as a coding collaborator.
Tech Stack:
WordPress, WooCommerce, WP-Members, Total Theme / WPBakery, Popup Box plugin, Code Snippets plugin
Contents
These are three projects where I used ChatGPT to build the interaction I actually wanted, across two WordPress sites.
Introduction
The WordPress ecosystem is powerful, but it has a ceiling. Themes, page builders, and plugins each have their own constraints — and when none of them can produce the interaction you’ve designed, the usual options are: find a plugin that does something close, or hand it to a developer.
With these three projects, where I used ChatGPT to build interaction, I used the same process: I described the problem in plain language, mapped the technical environment, iterated on the code, and tested until it held up across devices and browsers.
The components here are modest in complexity, but each one solved a real usability problem that the platform couldn’t solve on its own.
What this means in practice
Faster problem-to-solution cycles
A designer who can scope a front-end interaction problem, prototype a fix, and validate it without a developer handoff reduces friction in small teams and early-stage products.
More productive developer collaboration
Understanding how components interact with the broader tech stack means clearer briefs, better questions, and fewer back-and-forth cycles when working with engineers.
Project system awareness reducing downstream problems
Tracing how theme, plugins, and platform components interact helps a designer catch problems earlier and producing solutions that hold up outside the design tool.
1. Slide-out drawer—instant content access without page navigation
PROBLEM: The Sustainable UX Buddy gives designers quick access to planet-friendly design strategies across 16 design categories—from content and styling to interactive components and AI. To be useful, it needs to work the way designers actually work: open alongside a design tool, on a second screen or mobile, with fast switching between categories.
The default WordPress/WPBakery approach, however, would have sent users to a new page for each category—a full page load every time, breaking the flow of the tool entirely. For a reference tool used mid-task, that was a dealbreaker.
PROBLEM
A reference tool that forces a full page load for every content category breaks the flow it was designed to support.
WHAT I BUILT: A slide-out drawer triggered on click of any design category. The content loads within the panel—no page navigation, no wait.
Users can scroll through the strategies, then swipe or click to close and select another category.
It works consistently across mobile, tablet, and desktop, allowing designers to use the tool in any way that works best for them.
SOLUTION
A slide-out drawer triggered on click loads content in-panel — instant access to any category without leaving the page or waiting for a page load.
PROCESS:
- Defined the interaction — what triggers the drawer, what it contains, and how it opens and closes
- Mapped the constraints of the theme and page builder to understand what was and wasn’t possible natively
- Described the full interaction to ChatGPT with enough technical context to get targeted code output
- Tested how the drawer behaved at different breakpoints, handling edge cases like scroll locking and close-on-outside-click
- Iterated on the animation and mobile behaviour until it worked consistently across devices and browsers
TIME:
1 Day (including cross-browser testing; would be faster now the process is familiar)
2. Contextual membership prompt—removing the barrier between content and conversion
PROBLEM: Member-only content is only valuable if non-members can see enough to want access. The existing approach sent users away from the page the moment they hit gated content—to a separate login or registration page—with no clear path back to what they were looking at. Users lost their place, lost context, and often just left.
It was a conversion problem caused by a poor handoff between the content experience and the membership journey.
PROBLEM
Sending users to a separate login page the moment they hit gated content breaks their context and kills the conversion the gate was meant to create.
WHAT I BUILT: An inline membership prompt that appears in place of the gated content. Non-members see a contextual call-to-action—explaining the value of membership and offering a quick path to register or log in—without leaving the page. Once authenticated, they’re returned directly to the content they wanted.
SOLUTION
An inline prompt replaces gated content in place — giving non-members a clear path to register or log in without leaving the page, then returning them directly to the content they came for.
PROCESS:
- Mapped the membership journey — where users were dropping off and what a better flow needed to do
- Identified what the WP-Members plugin exposed and where the conditional logic needed to sit
- Described the problem and the technical environment to ChatGPT and worked through a conditional display snippet together
- Tested behaviour across three user states: logged-out, logged-in non-member, and active member
- Validated across content types and browsers, refining edge cases where the prompt appeared inconsistently
TIME: 2–3 hours (including cross-browser testing; would be faster now the process is familiar)
3. Interactive category filter—letting users find what's relevant without a page reload
PROBLEM:
The LCD Lab’s work page lists everything the Lab has produced and delivered—books, courses, workshops, speaking engagements, research papers, and more. It’s a rich archive, but not all of it is relevant to every visitor. Without a filter, users had to scroll through everything to find what they were interested in.
The native WordPress and WPBakery options for filtering either required a plugin that dictated its own layout and styling, or a page reload per filter—neither of which gave the design freedom or the experience quality the page needed.
PROBLEM
Without a way to filter by category, users had to scroll through everything to find what was relevant — and the native solutions that could fix it would have taken design control away entirely.
WHAT I BUILT:
A lightweight JavaScript filter that shows and hides items based on a selected category tag, without reloading the page. Each item is tagged in the markup; clicking a filter button instantly updates the visible set. The styling remains fully under my control—no plugin overrides, no layout constraints.
SOLUTION
Filter by category, see relevant work instantly—no page reload, no layout compromise.
PROCESS:
-
- Defined the filtering behaviour needed and why native plugin options weren’t viable
- Mapped the WPBakery-rendered HTML structure to understand how classes and elements were organised
- Described the element structure and filtering logic to ChatGPT and wrote a JavaScript function targeting those classes
- Tested the filter across the full content set, checking that all category tags were applied consistently
- Refined the active-state styling on the filter buttons and resolved compatibility issues with WPBakery’s rendered output
TIME: 1 hour (including cross-browser testing)