selected work

ai playbooks

Interactive product landing page that highlights micro-interactions using Webflow and GSAP animations.

client
In The Pocket
role
Design engineer
timeline
2026 · 4 weeks

About

Design engineering work for In The Pocket on AI Playbooks, a dedicated page for their AI maturity consultation practice. The page helps potential clients understand In The Pocket's AI focus and expertise, and spark a conversation.

Visual System

The page doubles as a showcase of In The Pocket's new design system, and the aesthetic direction is what ties its two halves together.

  • Motion as the through-line - the visual language blends movement captured in photography with the actual motion of the page itself.
  • Gradients and a pastel palette - chosen to communicate curiosity and playfulness, rather than the cold, corporate tone AI content often defaults to.

Scroll-Driven Card Spread

The hero interaction is a card spread that unfolds as the user scrolls, built with scroll-triggered GSAP animations in Webflow. It turns passive scrolling into an act of discovery, setting the tone for how In The Pocket approaches AI.

Interactive Card System

Tool and event cards respond to hover and pointer movement with a 3D tilt effect powered by CSS perspective, giving the interface a tactile, dimensional quality.

  • A fixed information order - every card answers what the tool or event is, when it was added, and when it takes place, always in that sequence.
  • Scannable in time - holding that order constant across the set lets visitors orient themselves without reading each card in full.

User Research

There was no formal research phase, so the decisions were informed indirectly:

  • Stakeholder conversations - surfacing what the practice actually needed the page to communicate.
  • Observing comparable pages - watching how visitors navigate similar offerings elsewhere.
  • Iterating on comprehension - repeatedly adjusting what made the offering easier to understand at a glance.

Impact

  • More customers in active AI consultation discussions - the page moves visitors toward a conversation rather than only explaining the practice.
  • A clearer AI roadmap for stakeholders - the offering became more tangible internally, not only for prospective clients.
  • A flagship for the new design system - the first showcase of In The Pocket's refreshed system in production.