HBO Design System
At HBO, one of my initiatives included directional guidance on the organization and structure for the team to create shared and unified principles and patterns that define the overall design of a product.
Below is a snapshot of a few high level examples.
More samples available upon request.
Early audits, organization, naming, and schedules of breakdown and analysis
Grouping and prioritizing elements and components across the system
RESEARCH AND TESTING:
Our design system group ran a card sort type of game with a larger team to measure recognition of elements in components as well as naming.
SYSTEM BREAKDOWN AND PROCESS:
Initial Atomic design system divided into defined categories from most basic to complex compositions and how they work through the system.
Phase 1 type scale for connected TV
This is an example of the common type sizes from the type raamp organized, labeled, and documented into categories for use by cross functional teams.
Phase 1 type scale for connected TV (cont.)
PARTICLES AND COMPONENTS:
Examples of comprehensive sheets defining elements with multiple characteristics per platform.
Early audit and categorization of initial basic component sets. Initial steps in the process included audit, grouping, naming, defining.
Initial documentation of common complex components across the system.
Sample breakdown of a semi-complex form text input component showing definition of breakdown at different levels.
Breakdown of remaining component layout, spacing and justification
Template files and symbol libraries of all the common elements and components.
Closeup example of one area of the toolkit (color palette)