STREAM

OVERVIEW

DIRECTV-STREAM is a subscription streaming service that allows user to watch live TV from major broadcast and cable networks, while aggregating media from your favorite streaming apps all in one place. The interface recently underwent a redesign with a "content-forward" focus and a more modern UI. I was approached by the IXD team to develop a design system that governs and maintains these products and services on 10ft surfaces.

The main points of focus were the creation of a documentation library in Figma and on the web, tokenization of the system with variable collections, as well as the growth and improvement of the new component library.

PROCESS

System-Wide Audit: Inventory existing foundations, components (styles, scales, variants) and their structure.
New System Architecture: Organizing page and asset library structures, developing component syntax.
Foundations: Creating grid systems, updating and growing color and typography styles. Providing definition and usage documentation for all the foundational elements. Tokenizing all styles and measurements.
Component Library: Rebuilding existing components with properties and variants. Providing usage notes and documentation for all components in the system.
Online Migration: Recreating the documentation library in Confluence, with links to Figma documentation and component sets.
Governance: Overlooking the intake and archiving processes in the system. Educating and onboarding old and new users to system changes and methodologies.

ROADBLOCKS

At the start of the project, the system had no supporting documentation, apart from a few spec annotations for dev handoff, which were not utilized due to lack of clarity and communication.
The internal online hub tool used by the team was a legacy version of Confluence, with limitations to layout and visual presentation. Vital UI information was being communicated through spreadsheet type tables with poor navigation.
There was a clear need for education on design system methodology and current design techniques utilized in Figma for proper layout behavior and customization, as well as onboarding the dev teams on proper usage of dev mode.

MAJOR MILESTONES

Tokens & Variables: With the creation of token libraries and variable collections, I was able to ensure a higher level of consistency between design and dev handoff for UI builds and future updates.

Documentation: After strengthening the foundational elements of the system, and rebuilding all components with the latest customization features and layout techniques, a documentation library was developed with fully comprehensive definitions and guidelines for usage and development.

Online Hub: This library was then recreated in Confluence, with adjustments to HTML and CSS of each page for better navigation and visual presentation.

Onboarding & Education: By hosting regular workshops and creating onboarding documentation for current and new team members, I was able to bring the UI team up to speed on proper navigation of the system and building out new component use cases. Dev teams were also brought to speed by reviewing spec sections of the system's documentation, and running live dev-mode demos and distributing the recordings across the organization.

OUTCOMES

‍

Adoption by over 12 teams /

6 variable collections with over 500 tokens /

Components from 100's to 53 variant sets /

7K component inserts a week /

Detaches in low double digits for the year /

Bug counts down by 30% during validation /

XD requests completion rate from days to hours /

INSIGHTS & NEXT STEPS

One of the biggest learning points was that industry standards do not trump the needs of the team. Not every best practice serves the specific needs of a system and team. There is a fine balance between introducing new methodologies and accomodating the team's existing workflows.

Due to initial budgeting and timeline issues, the new redesign has been implemented for only 10ft surfaces. With the creation of grids, tokens, and proper component layout behavior, the system is now ready to be scaled to mobile, tablet, and web!