Designing Systems That Scale Teams
Every event we host is designed with intention, from the atmosphere we create to the way each session flows.
ATOMIC DESIGN
Design Systems
Designing a Layered Evaluation Framework for AI-Assisted Design
Reducing subjective feedback loops and preserving system integrity at scale.
Role & Scope
COMPANY
Athene
Expeditors
DA Davidson
T-Mobile
Baxley Commons
ETC.
ROLE
Lots of hats
Lead Designer
Co-Design
Product Designer
Workshop - Co-lead
OVERVIEW
PROCESS
User Research
Competitive Analysis
Wireframing
As product surfaces expanded across brands, structure did not. Multiple teams shipped across marketing, authenticated, and business experiences with inconsistent hierarchy, duplicated modules, and diverging visual patterns. The system evolved organically — without shared language or governance.
I was brought in to formalize that structure. What began as responsive page translation work evolved into cross-brand consolidation, module distillation, and component standardization across:
Marketing
Business
Authenticated experiences
Metro and adjacent entities
I audited page hierarchies, extracted recurring module patterns, and translated brand-specific implementations into a unified structural grammar.
This work became the foundation of a formal Design System practice — supporting 120+ designers and aligning design with CSS implementation at scale.
The objective was not visual uniformity.
It was architectural clarity.
THE CORE PROBLEM
As the ecosystem expanded, structural inconsistencies compounded.
The issues weren’t visual — they were architectural:
Page hierarchies varied across brands
Recurring modules were redesigned instead of reused
Component naming lacked shared taxonomy
Tool transitions (Sketch → XD → Figma) fragmented continuity
Design artifacts weren’t consistently aligned with CSS implementation
Rapid team growth outpaced governance structure
The result was duplication, drift, and rising implementation overhead.
Early Design System Learnings from CMS Responsive Websites.
Before formalizing a design system role, the foundation was built through production and responsive CMS work beginning around 2014.
Originally trained as a print designer, I transitioned into web as a production designer — working behind the scenes, preparing files, redlining layouts, and supporting developer handoff. This phase built deep familiarity with implementation realities and layout precision.
What began as a support function evolved into a structured process that informed every subsequent project.
Across CMS-driven platforms, I:
Designed desktop page systems
Translated full site architectures into responsive layouts
Redlined and documented implementation specifications
Normalized layout behavior across breakpoints
Identified recurring module and hierarchy patterns
Responsive compression revealed structural truth.
When pages collapse from desktop to mobile, hierarchy becomes exposed. Patterns either hold or break. Repetition becomes measurable.
Repeated across projects, this process became transferable. By the time I joined larger enterprise environments, system thinking was already embedded in the workflow.
Athene component states (sample)
As Lead Designer on the Athene brand ecosystem, the work expanded from page layouts to full-system architecture.
The challenge was no longer individual screens.
It was governing complex, data-driven states across the entire product surface.
This included:
Designing modular page systems across marketing and authenticated experiences
Establishing repeatable grid and hierarchy patterns
Defining table behaviors and state variations (normal, summary, expanded, error, policy alert)
Standardizing card, list, and featured content modules
Aligning UI states with real implementation logic
The complexity was structural:
Multiple grid configurations
Dynamic data tables
Conditional modules
Responsive breakpoints
Brand-level visual consistency
Each surface had to resolve through the same architectural logic. The objective was not aesthetic cohesion.
It was predictable behavior at scale. This phase marked the transition from page design to system governance — where structure, state modeling, and implementation alignment became primary.
Atoms were defined as:
Typographic systems and scale logic
Spacing scales and grid frameworks
Reusable layout primitives
Shared interaction states
Tokenized color and theming foundations
Components were built from these atoms — never ad hoc. Each module resolved through documented structure before visual styling was applied.
The styleguide was not a visual catalog. It was a controlled vocabulary for design and implementation.
Formalization reduced redundancy, stabilized handoff, and created a shared architectural language across brands.
Case Studies — Applied System Validation
Success was not measured by visual similarity.
It was measured by structural consistency.
Outcomes included:
Reduced duplication
Predictable implementation patterns
Faster onboarding for new designers
Clear alignment between design and development
The system’s strength was not in isolated components.
It was in consistent architectural behavior across surfaces.
Atoms & Styleguide — Formalization
With structural principles defined, the next step was translating them into reusable components and tokens.
The objective was not visual polish. It was structural repeatability.
This required:
Separating structural invariants from brand expression
Locking shared layout primitives (grid, spacing, hierarchy)
Defining repeatable module anatomy
Formalizing component naming and taxonomy
Aligning design artifacts with CSS implementation
Cross-Brand Structural Audit
To move from observation to governance, I mapped structural parity across brands and platforms.
This matrix visualized:
Page types (Plans, PLP, Deals, Coverage, PDP, Search, Cart, etc.)
Brand implementations (TMO, Metro, HINT, Prepaid, TFB, Sprint)
Structural consistency vs. divergence
Redundancy, gaps, and pattern drift
Rather than redesigning surface-level components, the audit focused on hierarchy, module sequencing, and behavioral logic. The goal was architectural clarity — not visual alignment.
This framework clarified:
Which structures were invariant
Which modules could be consolidated
Where brand-specific variation was required
Where duplication created implementation overhead
The matrix became the foundation for module normalization and component consolidation across the ecosystem.
The system was validated through real implementation across high-traffic product surfaces.
The system was validated through real implementation across high-traffic product surfaces.
Representative applications included:
Carousel structure and interaction logic
Navigation and scroll behavior frameworks
Pricing and comparison modules
Product Listing Page (PLP) architecture
Coverage and map hierarchy
Search and cart system alignment
Each case applied shared structural rules while adapting to brand context.
Casestudy samples
TOOL
UX
Accessibility
Development team
3rd Party Vendor
Project Management
THE GOAL
Introduce structural governance capable of scaling with the organization.
This required:
Establishing shared page hierarchy principles
Locking repeatable module patterns across brands
Formalizing a component taxonomy aligned with development
Separating structural invariants from brand expression
Creating education pathways to support team expansion
The system needed to be:
Stable under tool changes
Flexible across brands
Scalable across teams.
DA Davidson
Athene
