When the room is gone, the screen is the room.
April 2020. The room was gone, and the screen had to do the work. IBM’s partnership with NBCUniversal needed to land remotely — across executives in New York and London who would never meet IBM’s team in person before deciding. Every conviction-carrying move that a conference room would have done — eye contact, the bee mark on the wall, a printed deck across a table — had to be reinvented for a screen scrolled at someone’s pace.
The work landed on three surfaces — a partnership microsite that opened with a hero film translating IBM’s capabilities into media language, a layered diagram that let executives lift the DevOps platform apart one piece at a time, and a mobile-first set of team biographies that turned a phone screen into a handshake. Same motion personality across every surface; same sense that a remote audience could feel the partnership the way an in-person one would have.
I led the work end to end — interaction model, motion choreography, visual language, and editorial voice across the microsite, hero film, and bio system. Every transition was tuned by feel; the prototype is the spec.
Eight sections, any door, any pace. The microsite became the partnership’s living home — an environment an executive could enter at any door, scroll at their own pace, and return to days later. The hero film opens the argument; a layered diagram lets the reader take the DevOps platform apart one piece at a time; the headline numbers come to life as you reach them; the team speaks in their own voice through a passing-quote section.
Any door, any pace.
The NBC Peacock and the IBM bee — wings echoing wings. The partnership mark stitches the two together as one continuous gesture: the bee’s diamond wings traced in the rhythm of the peacock’s spread, paced like a slow exhale. It anchors the microsite hero, the lower-third system, and the closing partnership film — the same silhouette across surfaces, animated to the same breath.
Wings echoing wings.
One silhouette across every surface.
If the work was going to live on NBC’s screens, it had to look like NBC’s screens. A custom lower-third titling system gave every video deliverable a broadcast-quality finish — reinforcing NBC’s own visual language while clearly identifying the IBM team behind the work. Same color, same typographic restraint, same eased motion across forty-plus video assets. Built as a control-room demo — six configurations, one motion grammar, with timing and type specs visible alongside each variant.
Six scenes, each one a translation. The microsite opened with a hero film built to close the distance between IBM’s enterprise vocabulary and NBCUniversal’s world. Each scene takes a capability and re-renders it as a media outcome: automate business reads as cast viewers as customers; transform finance reads as turn entertainment into impact. Under two minutes of film, every claim punctuated with footage from NBCU’s own catalog — The Good Place, Fast and Furious, others — so the argument lands in the audience’s own vocabulary, not ours.
Six scenes, six openings.
When in-person introductions weren’t possible, the team needed another way to walk into the room. Mobile-first biography pages gave each team member their own presence — a personal portrait, a direct headline, and the kind of candid detail that makes someone feel knowable before a single call. Accessible through the partner portal on any device, NBCUniversal’s stakeholders had their full IBM counterpart team within reach — no directory, no intermediary.
The team, always a tap away.
Three qualities, applied across every surface. Things settle quietly when they change in place. Taps and arrivals land with a small spring. Slower moments glide. The page feels intentional throughout — built once, applied across every surface. The six-tenet hexgrid is where the language lands end to end: six cubes float with a staggered breath, each lifts its lid as you reach it, and a single proof point — 3×, 75%, 40%, 90%, 60%, $240M — surfaces in the center as you cross from one tenet to the next. The partnership mark floats freely in the middle, holding the system together with the same breath.
Built once, on every surface.
The prototype is the spec. Plain HTML, CSS, and JavaScript — no framework, no build step. The motion choices live in the same place as the comments that explain them, so a developer reading the page can take in the whole system at a glance. The smaller pieces — the slow background drifts, the gentle pulses, the partnership-mark glow — are built once and reappear consistently across the page. The quote section takes a click, a drag, or the keyboard, and pauses if you hover over it. The handoff is the repo.
Read once.
Ship from it.
I made every choice; AI sharpened many of them. The microsite was originally built in 2020 — substantial motion, real interaction, but the page had room to grow: nothing tying the motion together across sections, and the headline numbers sat static. Five years later I ran the site through a fresh-eyes pass with Claude as the second reader: naming the gaps, proposing the smallest credible fixes, and reviewing each move as it landed. The numbers that come to life as you reach them, the click-pulse on the layered diagram, the side-by-side reveal on the before-and-after rows — each was iterated until the motion read as a deliberate decision. AI as the design partner you brief on intent and review for craft — accelerant, not author.
A second reader, five years on.