See all
Design

Yahoo – Rize Design System

How I helped evolve Yahoo’s design system to support consistency, accessibility, and team adoption across a global product ecosystem.

Media

Digital

Context + Problem

Business Problem
 Yahoo’s ad tech tools were inconsistent, inefficient, and hard to maintain. Multiple teams worked off different design libraries, leading to redundant tools, wasted time, and higher dev costs.

People Problem
 Designers were constantly detaching components, suffering from poor documentation, and lacked a single source of truth. Design maturity was low, and collaboration was difficult.

Your Role
 Design system lead (alongside 1 PM + 1 visual designer):

  • Drove the Figma migration
  • Designed the component library
  • Led training, advocacy, accessibility audits
  • Created documentation and system principles

Goals & Constraints

  • Goals:
    • Consolidate tools
    • Speed up product development
    • Improve design quality + accessibility
    • Increase collaboration and adoption

  • Constraints:
    • Migrated mid-rebrand (Verizon branding retired)
    • Figma learning curve for many designers
    • Leadership wanted 6–12 month project done in 3

Approach

  • Principles:
    • Make frequent choices efficient
    • Favor usability over maintenance
    • Bake in visual decisions
    • Bridge gaps between design and code
  • Design Tactics:
    • Separated distinct variants (e.g., button styles) for faster drag-and-drop
    • Used labels, emoji, and screenshots to enhance discoverability
    • Created interactive prototypes for non-design stakeholders
    • Added metadata (Gear, Cog, Settings, etc.) to support diverse vocabularies
    • Surface GitHub links to enable cross-functional collaboration

‍

  • Design Tactics:
    • Separated distinct variants (e.g., button styles) for faster drag-and-drop
    • Used labels, emoji, and screenshots to enhance discoverability
    • Created interactive prototypes for non-design stakeholders
    • Added metadata (Gear, Cog, Settings, etc.) to support diverse vocabularies
    • Surface GitHub links to enable cross-functional collaboration

  • Culture Work:
    • Co-created with designers across teams to build trust
    • Advocates presented at meetings, not just you
    • Added a versioning system to boost transparency and reduce fear of updates
    • Kept documentation at a 4th-grade reading level to promote clarity and inclusion

‍

Outcome

  • Migrated from Sketch to Figma successfully
  • High system adoption with little-to-no component detachment
  • Data table component alone had over 18,000 uses and only 22 detachments
  • Advocates on every team helped scale support without you being a bottleneck

‍

Reflection

  • What I’d change:
    • Invest earlier in design tokens
    • Plan for responsiveness earlier
    • Build documentation in real-time to prevent backlog

  • What I learned:
    • Design systems live or die by company culture
    • The best system isn’t just scalable—it’s usable
    • Trust is the foundation; everything else is maintenance
See all
Design

Yahoo – Rize Design System

How I helped evolve Yahoo’s design system to support consistency, accessibility, and team adoption across a global product ecosystem.

Media

Digital

Context + Problem

Business Problem
 Yahoo’s ad tech tools were inconsistent, inefficient, and hard to maintain. Multiple teams worked off different design libraries, leading to redundant tools, wasted time, and higher dev costs.

People Problem
 Designers were constantly detaching components, suffering from poor documentation, and lacked a single source of truth. Design maturity was low, and collaboration was difficult.

Your Role
 Design system lead (alongside 1 PM + 1 visual designer):

  • Drove the Figma migration
  • Designed the component library
  • Led training, advocacy, accessibility audits
  • Created documentation and system principles

Goals & Constraints

  • Goals:
    • Consolidate tools
    • Speed up product development
    • Improve design quality + accessibility
    • Increase collaboration and adoption

  • Constraints:
    • Migrated mid-rebrand (Verizon branding retired)
    • Figma learning curve for many designers
    • Leadership wanted 6–12 month project done in 3

Approach

  • Principles:
    • Make frequent choices efficient
    • Favor usability over maintenance
    • Bake in visual decisions
    • Bridge gaps between design and code
  • Design Tactics:
    • Separated distinct variants (e.g., button styles) for faster drag-and-drop
    • Used labels, emoji, and screenshots to enhance discoverability
    • Created interactive prototypes for non-design stakeholders
    • Added metadata (Gear, Cog, Settings, etc.) to support diverse vocabularies
    • Surface GitHub links to enable cross-functional collaboration

‍

See all
Design

Yahoo – Rize Design System

How I helped evolve Yahoo’s design system to support consistency, accessibility, and team adoption across a global product ecosystem.

Media

Digital

Context + Problem

Business Problem
 Yahoo’s ad tech tools were inconsistent, inefficient, and hard to maintain. Multiple teams worked off different design libraries, leading to redundant tools, wasted time, and higher dev costs.

People Problem
 Designers were constantly detaching components, suffering from poor documentation, and lacked a single source of truth. Design maturity was low, and collaboration was difficult.

Your Role
 Design system lead (alongside 1 PM + 1 visual designer):

  • Drove the Figma migration
  • Designed the component library
  • Led training, advocacy, accessibility audits
  • Created documentation and system principles

Goals & Constraints

  • Goals:
    • Consolidate tools
    • Speed up product development
    • Improve design quality + accessibility
    • Increase collaboration and adoption

  • Constraints:
    • Migrated mid-rebrand (Verizon branding retired)
    • Figma learning curve for many designers
    • Leadership wanted 6–12 month project done in 3
Jason Nocito via GQ Sports

Approach

  • Principles:
    • Make frequent choices efficient
    • Favor usability over maintenance
    • Bake in visual decisions
    • Bridge gaps between design and code
  • Design Tactics:
    • Separated distinct variants (e.g., button styles) for faster drag-and-drop
    • Used labels, emoji, and screenshots to enhance discoverability
    • Created interactive prototypes for non-design stakeholders
    • Added metadata (Gear, Cog, Settings, etc.) to support diverse vocabularies
    • Surface GitHub links to enable cross-functional collaboration

‍

See all
Design

Yahoo – Rize Design System

How I helped evolve Yahoo’s design system to support consistency, accessibility, and team adoption across a global product ecosystem.

Media

Digital

Context + Problem

Business Problem
 Yahoo’s ad tech tools were inconsistent, inefficient, and hard to maintain. Multiple teams worked off different design libraries, leading to redundant tools, wasted time, and higher dev costs.

People Problem
 Designers were constantly detaching components, suffering from poor documentation, and lacked a single source of truth. Design maturity was low, and collaboration was difficult.

Your Role
 Design system lead (alongside 1 PM + 1 visual designer):

  • Drove the Figma migration
  • Designed the component library
  • Led training, advocacy, accessibility audits
  • Created documentation and system principles

Goals & Constraints

  • Goals:
    • Consolidate tools
    • Speed up product development
    • Improve design quality + accessibility
    • Increase collaboration and adoption

  • Constraints:
    • Migrated mid-rebrand (Verizon branding retired)
    • Figma learning curve for many designers
    • Leadership wanted 6–12 month project done in 3


Redirecting at the point of engagement led to user drop-off and lost value.
‍

Approach

  • Principles:
    • Make frequent choices efficient
    • Favor usability over maintenance
    • Bake in visual decisions
    • Bridge gaps between design and code
  • Design Tactics:
    • Separated distinct variants (e.g., button styles) for faster drag-and-drop
    • Used labels, emoji, and screenshots to enhance discoverability
    • Created interactive prototypes for non-design stakeholders
    • Added metadata (Gear, Cog, Settings, etc.) to support diverse vocabularies
    • Surface GitHub links to enable cross-functional collaboration

‍


Grounded design in real viewer behaviors—using personas built from social insights across key markets.
‍

‍


Translated viewing patterns into a full-screen, schedule-integrated layout tailored for long sessions.

‍


2. Realistic prototyping + testing

Typical prototyping tools weren’t enough to simulate the login flow. I used a more advanced tool to model provider search, authentication, and stream start. Tested and iterated across internal departments.

‍


Built and tested for real-world behavior—like users entering the wrong credentials.

‍


3. Branding meets usability

Worked with marketing and on-air teams to transform heavy broadcast assets into scalable, mobile-friendly visuals. Used universal icons and clear language to support both English and Spanish-speaking users.

‍


Original on-air graphics were built for broadcast—not optimized for digital or mobile environments.

‍


Redesigned visual elements to strike a balance—preserving brand identity while improving scalability and usability across digital platforms.
‍


Extended the system to Telemundo using inclusive iconography and a layout that worked seamlessly across both languages and audiences.

‍

  • Design Tactics:
    • Separated distinct variants (e.g., button styles) for faster drag-and-drop
    • Used labels, emoji, and screenshots to enhance discoverability
    • Created interactive prototypes for non-design stakeholders
    • Added metadata (Gear, Cog, Settings, etc.) to support diverse vocabularies
    • Surface GitHub links to enable cross-functional collaboration

  • Culture Work:
    • Co-created with designers across teams to build trust
    • Advocates presented at meetings, not just you
    • Added a versioning system to boost transparency and reduce fear of updates
    • Kept documentation at a 4th-grade reading level to promote clarity and inclusion

‍


Tested lightweight header CTAs across screen sizes to promote Live TV without disrupting content flow.


‍


Designed contextual CTAs that blended with the platform’s UI—resulting in higher visibility without being mistaken for ads.


‍


Optimized provider selection with quick-tap defaults and predictive search to streamline the login experience.


‍


Designed around third-party login flows to set user expectations before handing off to external systems.


‍


During commercial breaks, the schedule automatically expanded—using shadow and scroll cues to keep users engaged without manual interaction.


‍


Introduced a theater-style layout post-authentication to shift users into a dedicated streaming mode, designed for long-form content.


‍


Balanced business needs by clearly separating third-party on-demand content from our in-app clips—using layout and iconography to set user expectations.

‍

Reflection

  • What I’d change:
    • Invest earlier in design tokens
    • Plan for responsiveness earlier
    • Build documentation in real-time to prevent backlog

  • What I learned:
    • Design systems live or die by company culture
    • The best system isn’t just scalable—it’s usable
    • Trust is the foundation; everything else is maintenance

"Can’t share the numbers—but let’s just say streams, impressions, and revenue all moved in the right direction.”

‍


We didn’t get hard numbers—but the feedback was clear: streams, impressions, and revenue all went up.

‍

We also elevated our design maturity:
• Brought user testing into the team’s process
• Created reusable personas
• Improved cross-team collaboration
‍


Initial mobile layout didn’t account for live TV ad conflicts—leaving a blank space where an ad would’ve been. This was later addressed in the tablet phase with a more adaptive layout.

See all
Design

Yahoo – Rize Design System

How I helped evolve Yahoo’s design system to support consistency, accessibility, and team adoption across a global product ecosystem.

Media

Digital

Context + Problem

Business Problem
 Yahoo’s ad tech tools were inconsistent, inefficient, and hard to maintain. Multiple teams worked off different design libraries, leading to redundant tools, wasted time, and higher dev costs.

People Problem
 Designers were constantly detaching components, suffering from poor documentation, and lacked a single source of truth. Design maturity was low, and collaboration was difficult.

Your Role
 Design system lead (alongside 1 PM + 1 visual designer):

  • Drove the Figma migration
  • Designed the component library
  • Led training, advocacy, accessibility audits
  • Created documentation and system principles

Goals & Constraints

  • Goals:
    • Consolidate tools
    • Speed up product development
    • Improve design quality + accessibility
    • Increase collaboration and adoption

  • Constraints:
    • Migrated mid-rebrand (Verizon branding retired)
    • Figma learning curve for many designers
    • Leadership wanted 6–12 month project done in 3

Approach

  • Principles:
    • Make frequent choices efficient
    • Favor usability over maintenance
    • Bake in visual decisions
    • Bridge gaps between design and code
  • Design Tactics:
    • Separated distinct variants (e.g., button styles) for faster drag-and-drop
    • Used labels, emoji, and screenshots to enhance discoverability
    • Created interactive prototypes for non-design stakeholders
    • Added metadata (Gear, Cog, Settings, etc.) to support diverse vocabularies
    • Surface GitHub links to enable cross-functional collaboration

‍