Interactive Web Module

Overview

Firebrand's sales and pitch presentations needed a more compelling way to communicate a core strategic framework — one that felt dynamic and modern rather than another static slide. I partnered with AI (Claude) to design and build an interactive HTML/React module that visualizes the agency's four-layer awareness-building methodology.

The module is currently used in client pitches and presentations, with plans to embed it directly on the Firebrand website.

My Role

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

The Brief

Our CEO provided the strategic framework — four building blocks that together form an awareness engine: Narrative, Stories, Connections, and Multiplier Marketing. My job was to translate that framework into something visual, interactive, and immediately understandable to a prospect seeing it for the first time.

What I Built

An animated, stackable card module built in React and embedded via a single code block — no additional dependencies or CMS customization required.

Key interactions and design decisions:

  • Bottom-up animation — layers build on screen one at a time, reinforcing the "building blocks" concept visually

  • Expand-on-click — each layer opens to reveal a short description, inviting exploration without overwhelming at first glance

  • Dimming behavior — non-selected layers recede when one is active, keeping focus clean

  • Color-coded system — each layer has its own accent color and label, making the hierarchy instantly readable

  • Typography-locked embed — custom font loading scoped to the module so it renders consistently regardless of the host page's styles

How AI Fit Into the Process

I used Claude to collaborate on the front-end build — prompting, iterating, and directing the code to match my design intent. This wasn't a case of generating something and shipping it. I made decisions about the animation timing, the interaction model, the visual hierarchy, and the component structure, then used AI as a development partner to execute them.

This project is a good example of how I approach AI: as a tool that extends what I can produce as a solo designer, not a replacement for design thinking.

Result

A polished, self-contained interactive module that can live in a presentation, a web page, or a pitch deck — and communicates a complex strategic framework in seconds.

Process work and drafts below

The above flywheel graphic is one I really liked, I think the movement of the wheel plays on the “engine” theme. Ultimately, it’s not the correct way to display the information we’re sharing, but it will be good inspiration for other projects.