Interactive Design, AI-Powered Production

Overview

As part of an ongoing effort to modernize Firebrand's website, I was tasked with taking static design elements and making them interactive — adding motion, user engagement, and a more dynamic web presence without a dedicated development team. I used Claude as a development partner to build both modules: designing the visual systems myself, then collaborating with AI to bring them to life in code.

These are two independent modules built for different pages of the site, but they share the same production approach — designer-led, AI-assisted, shipped as self-contained embeds.

My Role

Interactive Designer · Visual Design · AI-Assisted Front-End Development · Creative Technologist · Web Production

Module 1: Multiplier Marketing Wheel

Firebrand's Multiplier Marketing framework already existed as a static graphic on the homepage. The design was mine — the color system, the donut structure, the segment hierarchy. The problem was that it wasn't doing enough work. A static image couldn't convey the depth of each service or invite a prospect to explore.

I redesigned it as a fully interactive wheel where each segment is clickable, opening a detail panel with a description and service breakdown. Built in collaboration with Claude and embedded as a single self-contained code block — no CMS customization or developer involvement required.

What makes it work:

• Every segment of the donut is independently clickable

• Click opens a contextual panel with service details specific to that segment

• Designed to match Firebrand's existing brand system exactly

• Self-contained embed that can drop into any page without breaking surrounding styles

Currently live on Firebrand's homepage, with an updated interactive version in production.

Module 2: Awareness Engine

A separate brief: visualize Firebrand's four-layer awareness-building methodology for use in new business pitches and presentations. The CEO provided the strategic framework — Narrative, Stories, Connections, Multiplier Marketing — and I was responsible for translating it into something a prospect could understand immediately.

I designed and built an animated stackable card module where each layer builds on screen from the bottom up, reinforcing the "building blocks" concept visually. Clicking any layer expands it to reveal a short description.

What makes it work:

• Bottom-up staggered animation communicates hierarchy without explanation

• Expand-on-click keeps the initial view clean while rewarding curiosity

• Dimming behavior focuses attention on the selected layer

• Typography and styles are locked to the module so it renders consistently anywhere it's embedded

Built for presentations and pitches, with plans to work it into the Firebrand website.

How I Work with AI

Both modules follow the same process: I own the design decisions — layout, color, hierarchy, interaction model, animation timing — and use Claude as a development partner to execute them in code. I prompt, review, redirect, and iterate until the output matches my design intent.

This isn't AI generating something and me shipping it. It's a production workflow that lets a solo designer build and deploy interactive web components without a dedicated front-end developer — and do it faster than a traditional handoff process would allow.