CAST

WHAT IS CAST?

Google’s Cast function provides 1P and 3P devices with the ability to transfer media playback to individual or groups of devices within the network.Through Google’s Cast Software Development Kit (SDK), developers are able to build and customize sender and receiver applications to cast-enable products and devices.The Cast Design System houses core Cast SDK information for design and build, and provides a single source of truth for all things Cast by bringing all the surfaces and design systems in the ecosystem under one roof.

As a member of the Google Nest Entertainment team, and Design Lead for the Cast DS, I was responsible for maintaining an accurate and functional design system that facilitates consistent & seamless initiation, transfer and control of media across all surfaces. My initial task was to assess the current state of Cast design, build the core Cast design elements, and intake information from delta systems to use as building blocks for the system’s componentry and documentation.

CHALLENGES & OPPORTUNITIES

Components from other cast-able surfaces were scattered across other large design files governed by different teams and design leads. At the time, only one remote team member was assigned to building the design system and no work devices were available for testing.
Most Cast SDK components were not in editable design form, and existed only as code in sample apps or screenshots in various decks. Sizing, styles and spacing had to be established based on viewing screenshots at the time.
The Cast system connects all cast-able surfaces and devices, each with their own governing systems and guidelines. Attempting to create a central hub that houses and cross-pollinates its much larger and more developed counterparts required an ambitious system architecture and expert knowledge of all systems involved.

THE PROCESS

Research & Planning: Establishing a roadmap, marking and defining important milestones, breaking down requirements and gathering resources.
Systems Audit: Running an audit of core CUJ’s and components, including existing atomic elements in intersecting design systems.
Componentization: After sourcing existing relevant styles and building blocks, beginning with creating variants for all states of the component and their children elements.
Documentation: Creation of specs detailing Usage, Behavior, Anatomy, Layout, Styles, Scalability, and Accessibility guidelines.
Publication: After a vetting process, all spec information is transferred to an internal hub that houses all other design systems in the organization.
Maintenance: To be fully aligned with delta systems and their teams, need to frequently update the design system, provide education and support for all users and stake holders.

STRATEGIC SOLUTIONS

Initiative: Leveraging onboarding time to meet with key design and engineering leads to gain full scope of the system, create points of contact, and acquire proper resources. Establishing early familiarity of the team is essential for rapid growth and effectiveness.

Atomic Connectivity: Using existing styles and atomic components from latest Material and other overarching design systems to build the Cast DS’s component and spec libraries, thus ensuring continuous alignment and real time updates.

Design Precision: Pixel- perfect recreation of scalable, customizable components, using existing Google documentation as guidelines to fill gaps in design. Flagging and filing bugs for inconsistencies with respective engineering teams.

Alignment & Communication: A consistent cadence of meetings and office hours with owners of other design systems, lead designers and engineers across surfaces.

OUTCOMES

A fully functioning design system, rooted in and connected to 6 core Google design languages, each with hundreds of components and styles, that govern a digital ecosystem that scales across the full spectrum of surfaces amd operating systems:

‍

5B+ cast sessions per month /

8B+ hours of casting /

>3K supported apps /

>250M casting devices /

KEY TAKEAWAYS

Understanding the System's Needs: Different systems have different needs. One system’s main need might be to provide flexible components for a wide range of uses, while another’s focus might be to house select components across multiple surfaces to facilitate a singular function. The resources required, as well as the design architecture for such two systems would differ greatly.

Existing in a Large Ecosystem: When working with cross-surface products and bodies of governance, the first step must be to inventory the libraries of core design systems, and use them to develop the foundational elements of own design system. This is essential for accuracy of implementation, as well as the consistency of vision across all relevant products.

Forming & Maintaining Team Relationships: When collaborating with a large creative group of people, it often takes no push to get people excited to solve and create. There is an enormous room for initiative in such cases, and it is surprising how involved and impactful one’s experience can be if you only reach out and ask to help.