Jen Pan|

Menu

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.

Design Lead
2017-2018
Designer, Organizer, Intermediary, Production, Reviewer
Analysis, assessments and documentation of base styles/tokens, reusable elements and components
Collaborative, trustworthy, respectful, engaged, holistic thinking

AUDIT:
Early audits, organization, naming, and schedules of breakdown and analysis

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.

TYPE SCALE:
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.

TYPE SCALE:
Phase 1 type scale for connected TV (cont.)

PARTICLES AND COMPONENTS:
Examples of comprehensive sheets defining elements with multiple characteristics per platform.

SIMPLE COMPONENTS:
Early audit and categorization of initial basic component sets. Initial steps in the process included audit, grouping, naming, defining.

COMPONENTS:
Initial documentation of common complex components across the system.

COMPONENT DOCUMENTATION:
Sample breakdown of a semi-complex form text input component showing definition of breakdown at different levels.

COMPONENT DOCUMENTATION:
Breakdown of remaining component layout, spacing and justification

TOOLKIT:
Template files and symbol libraries of all the common elements and components.

TOOLKIT SAMPLE:
Closeup example of one area of the toolkit (color palette)