AI Assisted Design System Manager
Texas Capital Bank Web Platform Redesign
Role: Lead Product Designer
Collaborators: Content Strategy, Engineering, Marketing
Context: Subtle animations for an elevated Private Wealth Experience
Deliverable: Animations using Adobe After Effects
The Problem
Texas Capital Bank was rebuilding its entire public-facing website to serve three distinct lines of business under one roof: Private Wealth Management, Commercial Banking, and Personal Banking. Each caters to a different customer with a different tonal register and product set.
The teams building the site were not speaking the same language. Content strategists used different terminology than engineering. Marketing referenced components by informal names that did not match design documentation. When someone asked for a "hero module" or a "feature block," there was no shared reference for what that meant — what it looked like, what it could hold, or which pages it belonged on. In a multi-LOB build with distributed contributors, that ambiguity was a compounding tax on every conversation.
The question: how do you create shared vocabulary across teams who work in different tools, on different schedules, and with different levels of design literacy — without requiring anyone to open Figma?
Design System Component Library
New Component Interface
My Role
Design System Component Library
Filtering Feature by LOB
Component Card Details
Component Card Creation
I led the solution from problem definition through delivery, facilitating alignment conversations with Content and Tech leads, designing the structure and information hierarchy of the reference tool, and building the final deliverable. I worked collaboratively with Content Strategy and Engineering throughout, treating them as co-authors of the component taxonomy rather than downstream recipients of it.
Insight
The existing documentation lived in Figma. That worked for designers but was the wrong medium for everyone else. Content partners do not live in Figma. Engineers mid-sprint do not want to navigate a design file to check use cases.
The component library was not a designer's artifact. It was a shared contract — and a shared contract should be accessible to everyone who has to honor it.
Solutions
I designed and built a self-contained HTML reference tool: a single file that can be emailed, dropped in a shared drive, or opened in any browser without installation, login, or internet access.
The library documents 60 components across three lines of business. Each entry captures what the component is, how it behaves, when to use it, and — critically — which pages it belongs on. That last field was essential for the multi-LOB context. Because the site serves distinct customer segments across different page templates, teams needed a fast answer to: does this component belong here? The page tagging system made that filterable in seconds.
The tool ships as a single exportable file. Data travels with it. No server, no database, no dependency on any internal system staying accessible.
Design Decisions Worth Noting
Portability over platform. Notion, Confluence, and Figma all had access or licensing barriers for at least one stakeholder group. A single HTML file removed every one of those barriers without sacrificing a well-designed interface.
Taxonomy as a team artifact. Component names and page tags were not defined by design alone. Working sessions with Content and Engineering validated the terminology against how those teams actually talked about the work. Everyone had a hand in it, so everyone trusted it.
Page tagging over LOB tagging. The same component could appear across Private Wealth and Personal Banking pages. Organizing by page rather than LOB gave a more granular, actionable filter that mapped directly to how Content and Engineering organized their work.
Images as implementation reference. Engineers wanted annotated references they could consult during builds. A screenshot with callouts is unambiguous in a way that text descriptions rarely are.