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.

Overview

As Lead UX/UI Designer, I shaped the interaction model, navigation, content hierarchy, merchandising patterns, plan-selection flows, and cross-sell experiences. The project also explored tablet-optimized viewing and data-free streaming, helping define how AT&T and DirecTV could deliver entertainment across screens as the company moved toward products such as DIRECTV NOW.

Project Snapshot

  • Role: Principal Product Designer and Design Systems Lead

  • Team: Product Management, Engineering, Design, Content Strategy, Cross-Functional Domain Teams (TV, Broadband, Mobile, Self-Care, etc.)

  • Platforms: 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.

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.

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.

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.

Metafide Predictive Platform ›