Overview
Pattern Cloud was a centralized enterprise design system and repository built to give designers, engineers, and content strategists a single source of truth for UX patterns, UI components, interaction specs, copy guidelines, and versioned design files. The design system and design language developed at DirecTV was ultimately adopted as the AT&T org-wide standard following the acquisition, validating the scalability and rigor of the system.
Project Snapshot
Role:
Lead Product Designer and Design Systems Lead
Team:
Product Management, Engineering, Design, Content Strategy, Cross-Functional Domain Teams (TV, Broadband, Mobile, Self-Care, etc.)
Platform Type:
Enterprise Design System / Multi-Platform Digital Products
Users:
Product Designers, Content Designers, Engineers, Content Strategists, Product Managers
Opportunity
Without a centralized system, assets, specs, and copy guidelines were scattered across personal drives, email chains, and unstructured folders, forcing designers, engineers, and content strategists to constantly recreate existing patterns and navigate file-sharing bottlenecks. Cross-functional teams independently solved the same design problems in different ways, creating inconsistent user experiences, and as external agencies and new hires joined the organization, the lack of structured documentation made onboarding costly and unsustainable.
Design System IA
A core foundation of Pattern Cloud was establishing a clear, shared definition of what a "design pattern" meant across disciplines. Developed shortly after Brad Frost introduced Atomic Design, I adapted his methodology into our own interpretation using LEGO bricks as a mental model, making the hierarchy intuitive and tangible for designers, engineers, and stakeholders.
Atomic Design | Pattern Cloud | LEGO Analogy |
|---|---|---|
Atoms | Global Elements | LEGO bricks |
Molecules | Components | Wall |
Organisms | Patterns | Rooms |
Templates | Templates | House |
Pages | Experiences | Neighborhoods |
Each pattern could contain any combination of deliverables including visual design files, content guidelines, interaction specs, developer documentation, sample code, and working prototypes, making the system genuinely cross-functional. This taxonomy also defined naming conventions, filing structures, search logic, and pattern relationship mapping throughout the product.
Solution
Pattern Cloud was built around four interconnected design solutions:
Faceted Search: A search experience organized by platform, device, and pattern type, returning results in two tiers to help users quickly narrow scope and find relevant patterns.
Pattern Detail Pages: Each pattern surfaced versioned files, metadata, and status indicators alongside a three-way relationship graph that connected related patterns rather than siloing them.
Contribution Flow: A progressive Add Pattern flow integrated with Box reduced friction for submitting new patterns, enabling community-driven growth across teams.
Homepage Browse Paths: Parallel navigation paths for Product and Content Design teams, with suggested search terms that served double duty as onboarding vocabulary for new contributors.
Logo Design
Pattern Cloud required a distinct visual identity to establish credibility as an enterprise product, not just an internal tool. I led an extensive logo design exploration process generating 20+ distinct concepts organized around core brand keywords: digital hub, centralization, file sharing, consistency, and design systems.
The final direction, a stacked layered “P” mark, communicated structure, layering, and the digital repository nature of the product while remaining legible.
Wireframes
Before any visual components were designed, Pattern Cloud's structure was mapped through wireframes to define information architecture, interaction models, and content hierarchy without the distraction of visual style. This was especially critical because the design system didn't yet exist, making it essential to validate the product's core logic with stakeholders before any design language was committed to.
The wireframes focused on the three most structurally complex surfaces: the homepage, the Pattern Group page, and the Search Results page, stress-testing layout, taxonomy, and interaction flows early enough to ensure the eventual design system was built on a solid, validated foundation.
Outcome
Impact
Established a single source of truth for 200+ design patterns, UI components, specs, copy guidelines, and versioned design files across DirecTV's digital product suite.
Efficiency & Speed
Reduced duplicated design effort by an estimated 30% by giving designers, engineers, and content strategists direct, self-serve access to current, approved patterns.
Onboarding
Cut new employee and agency onboarding time by approximately 40% through structured, searchable access to the design system without requiring internal resource allocation.
Consistency:
Scaled design consistency across web, iOS, Android, and set-top box through a shared component library and four-level pattern taxonomy adopted across all product teams.
Reach:
Served 8 distinct user types across 4 platforms, enabling engineers and product managers to independently locate, evaluate, and act on design patterns using status indicators and platform metadata.
Legacy:
Validated at enterprise scale, the DirecTV design system and design language with Pattern Cloud as its backbone was adopted as the AT&T org-wide standard following the acquisition.