Bugaboo TV
Bugaboo TV
Bugaboo TV
Leading a cohesive design system from mobile to TV for Channel 7HD, resulting in ~40% faster delivery throughput.
Leading a cohesive design system from mobile to TV for Channel 7HD, resulting in ~40% faster delivery throughput.
Leading a cohesive design system from mobile to TV for Channel 7HD,
resulting in ~40% faster delivery throughput.
Role
Role
Senior Product Designer
Senior Product Designer
Lead UI Designer
Lead UI Designer
Design System Designer
Design System Designer
Platforms
Platforms
Responsive Web Design
Responsive Web Design
Desktop, Tablet Web, Mobile Web
Desktop, Tablet Web, Mobile Web
Multi-Platform Application
Multi-Platform Application
TV App, Tablet App, Mobile App (iOS and Android)
TV App, Tablet App, Mobile App (iOS and Android)
Project Industry
Project Industry
Entertainment
Entertainment
Timeframe
Timeframe
July to September 2024
July to September 2024
Working Teams
Working Teams
Seven Peaks Internal Design Team
Seven Peaks Internal Design Team
Bugaboo TV Cross-Functional Team
Bugaboo TV Cross-Functional Team
Tools
Tools
Visit Website
TL;DR
TL;DR
•
•
Redesigned Bugaboo TV into a unified cross-platform streaming product that merges 2 legacy apps into 1 experience for Thai audiences, Thai people living abroad, and international viewers across TV, mobile, tablet, and responsive web.
Redesigned Bugaboo TV into a unified cross-platform streaming product that merges 2 legacy apps into 1 experience for Thai audiences, Thai people living abroad, and international viewers across TV, mobile, tablet, and responsive web.
•
•
Joined after discovery, when the core concept design was already defined, and took the lead on translating that concept into a systematic set of templates, tokens, components, and guidelines.
Joined after discovery, when the core concept design was already defined, and took the lead on translating that concept into a systematic set of templates, tokens, components, and guidelines.
•
•
Built a token-based design system aligned with the engineering team’s Tailwind CSS framework, then set up scalable design foundations, templates, file structure, and governance so the in-house team could adopt, scale, and sustain it.
Built a token-based design system aligned with the engineering team’s Tailwind CSS framework, then set up scalable design foundations, templates, file structure, and governance so the in-house team could adopt, scale, and sustain it.
•
•
Enabled the team to deliver a coherent multi-device experience with a single source of truth, avoiding 1-off screens, detached components, and custom overrides that slow down delivery and create design debt.
Enabled the team to deliver a coherent multi-device experience with a single source of truth, avoiding 1-off screens, detached components, and custom overrides that slow down delivery and create design debt.
Problem and Context
Problem and Context
Bugaboo TV is Channel 7HD’s streaming product in Thailand, built to modernize how audiences watch and discover content beyond traditional broadcast. The revamp merged 2 legacy apps into 1 unified experience across responsive web and apps, from mobile to TV.
Bugaboo TV is Channel 7HD’s streaming product in Thailand, built to modernize how audiences watch and discover content beyond traditional broadcast. The revamp merged 2 legacy apps into 1 unified experience across responsive web and apps, from mobile to TV.
Channel 7HD originally operated 2 separate streaming apps.
Channel 7HD originally operated 2 separate streaming apps.
1. Bugaboo TV
1. Bugaboo TV
•
•
Thai audiences in Thailand
Thai audiences in Thailand
•
•
Free, ad-supported viewing
Free, ad-supported viewing
•
•
Broad catalog
Broad catalog
Drama Replays, News, Live Sports, Celebrity Updates
Drama Replays, News, Live Sports, Celebrity Updates
2. Bugaboo Inter
2. Bugaboo Inter
•
•
Viewers outside Thailand
Viewers outside Thailand
Thai People Living Abroad & International Audiences
Thai People Living Abroad & International Audiences
•
•
Paid subscription experience
Paid subscription experience
•
•
Focused catalog
Focused catalog
Channel 7HD series, Shows
Channel 7HD series, Shows
The business decided to retire this split and merge everything into a single Bugaboo TV product. This new product needed to:
The business decided to retire this split and merge everything into a single Bugaboo TV product. This new product needed to:
•
•
Serve users in Thailand and abroad, including Thai expats and non-Thai viewers.
Serve users in Thailand and abroad, including Thai expats and non-Thai viewers.
•
•
Support both free viewing and paid subscription experiences.
Support both free viewing and paid subscription experiences.
•
•
Work across a TV app, tablet app, mobile app, and responsive web on desktop, tablet, and mobile.
Work across a TV app, tablet app, mobile app, and responsive web on desktop, tablet, and mobile.
Beyond merging 2 apps, the revamped Bugaboo TV was positioned as a streaming-led superapp that combined streaming, content discovery, and commerce into 1 experience. From a business perspective, Channel 7HD and Bugaboo TV aimed to support broadcasters while generating new revenue through online commerce and the fan community.
Beyond merging 2 apps, the revamped Bugaboo TV was positioned as a streaming-led superapp that combined streaming, content discovery, and commerce into 1 experience. From a business perspective, Channel 7HD and Bugaboo TV aimed to support broadcasters while generating new revenue through online commerce and the fan community.
By the time I joined, the UX team had already run stakeholder workshops and user interviews, defined the main journeys, produced sitemaps, and created early wireframes. The visual concept and core design direction were also set at a high level. I stepped in when the project moved from discovery into detailed flows and UI, and my job was to turn this concept into a scalable and sustainable system of templates, tokens, and components.
By the time I joined, the UX team had already run stakeholder workshops and user interviews, defined the main journeys, produced sitemaps, and created early wireframes. The visual concept and core design direction were also set at a high level. I stepped in when the project moved from discovery into detailed flows and UI, and my job was to turn this concept into a scalable and sustainable system of templates, tokens, and components.
The business goal was to merge 2 legacy apps into 1 Bugaboo TV experience across web and apps under a tight timeline and limited room for rework. That meant the UI phase needed a system-first approach that could scale across devices and remain sustainable for the in-house team after handoff.
The business goal was to merge 2 legacy apps into 1 Bugaboo TV experience across web and apps under a tight timeline and limited room for rework. That meant the UI phase needed a system-first approach that could scale across devices and remain sustainable for the in-house team after handoff.
Challenge:
Challenge:
How might we translate post-research direction into a scalable, cohesive multi-platform UI system that the client team could ship and maintain under tight time and budget constraints?
This game is a great learning tool for kids. The story keeps them engaged and interested. It doesn’t feel like a burden for them to learn a new skill via Miimo.
This game is a great learning tool for kids. The story keeps them engaged and interested. It doesn’t feel like a burden for them to learn a new skill via Miimo.
From a design-system perspective, 3 problems stood out:
From a design-system perspective, 3 problems stood out:
Fragmented Cross-Platform Patterns
Fragmented Cross-Platform Patterns
Visual and interaction patterns were fragmented across devices and legacy apps, which made it difficult to deliver a cohesive experience.
Visual and interaction patterns were fragmented across devices and legacy apps, which made it difficult to deliver a cohesive experience.
Missing Scalable Token-Based System
Missing Scalable Token-Based System
There was no modern, token-based design system that could support the volume of screens, the variety of content types, and the multi-device scope.
There was no modern, token-based design system that could support the volume of screens, the variety of content types, and the multi-device scope.
Lack of Sustainable In-House Ownership
Lack of Sustainable In-House Ownership
The in-house Bugaboo team needed a way to own and maintain the product after handover, not just receive a 1-time project file full of detached components.
The in-house Bugaboo team needed a way to own and maintain the product after handover, not just receive a 1-time project file full of detached components.
The project needed a scalable design system that worked as both a visual language and a practical operating model, backed by governance and documentation so designers and developers could stay aligned after handoff.
The project needed a scalable design system that worked as both a visual language and a practical operating model, backed by governance and documentation so designers and developers could stay aligned after handoff.
Design System Impact
Design System Impact
100%
100%
Figma component adoption across 6 designers within 3 months.
Figma component adoption across 6 designers within 3 months.
313
313
new token-based components built in Figma, including 4,107 variants, 687 tokens, 13 modes, and 244 styles.
new token-based components built in Figma, including 4,107 variants, 687 tokens, 13 modes, and 244 styles.
~40% faster
~40% faster
designers’ ticket throughput, measured by completed Jira tickets per sprint.
designers’ ticket throughput, measured by completed Jira tickets per sprint.
Discovery Inputs and Constraints
Discovery Inputs and Constraints
I treated the existing discovery work as inputs instead of redoing research. I studied:
I treated the existing discovery work as inputs instead of redoing research. I studied:
•
•
Workshop outcomes that clarified why merging the 2 apps mattered to the business.
Workshop outcomes that clarified why merging the 2 apps mattered to the business.
•
•
User interview findings that highlighted key behaviors such as retro-drama bingeing, star-following, and live sports watching.
User interview findings that highlighted key behaviors such as retro-drama bingeing, star-following, and live sports watching.
•
•
Early information architecture, sitemaps, and user journeys that framed how people would move through the new Bugaboo TV experience.
Early information architecture, sitemaps, and user journeys that framed how people would move through the new Bugaboo TV experience.
The team had also produced a large sitemap that connected streaming, news, live sports, celebrity profiles, account, and commerce flows into a single information architecture. I spent time mapping this structure back to templates and feature files, because the size of the sitemap directly impacted how we planned design work, structured Figma files, and prioritized which components and patterns needed to be systemized first.
The team had also produced a large sitemap that connected streaming, news, live sports, celebrity profiles, account, and commerce flows into a single information architecture. I spent time mapping this structure back to templates and feature files, because the size of the sitemap directly impacted how we planned design work, structured Figma files, and prioritized which components and patterns needed to be systemized first.
From these inputs, several themes shaped the design-system work:
From these inputs, several themes shaped the design-system work:
Content-Heavy, Pattern-Driven Catalog
Content-Heavy, Pattern-Driven Catalog
The content catalog was heavy on retro dramas, daily shows, and live events, so layouts needed to scale for deep catalogs and repeated interaction patterns.
The content catalog was heavy on retro dramas, daily shows, and live events, so layouts needed to scale for deep catalogs and repeated interaction patterns.
Multi-Device and Lean-Back Viewing
Multi-Device and Lean-Back Viewing
Users watched on multiple devices. Mobile was convenient, but TV and desktop were important for lean-back and shared viewing.
Users watched on multiple devices. Mobile was convenient, but TV and desktop were important for lean-back and shared viewing.
Need for Shared System Foundations
Need for Shared System Foundations
The team could not afford to treat each platform as a separate design project. They needed shared patterns and foundations.
The team could not afford to treat each platform as a separate design project. They needed shared patterns and foundations.
There were also hard constraints. The engineering team standardized on Tailwind CSS. Timelines were tight. Content would initially be in 1 language, with the expectation that additional languages could be layered in later. Screens needed to be designed at specific resolutions for desktop, mobile, tablet, and TV. To keep everything scalable and cohesive, I organized the system using an atomic design approach, moving from foundations and tokens to components, templates, and screens.
There were also hard constraints. The engineering team standardized on Tailwind CSS. Timelines were tight. Content would initially be in 1 language, with the expectation that additional languages could be layered in later. Screens needed to be designed at specific resolutions for desktop, mobile, tablet, and TV. To keep everything scalable and cohesive, I organized the system using an atomic design approach, moving from foundations and tokens to components, templates, and screens.
My responsibility was to translate these constraints into a pragmatic, scalable design system and a set of design operations that actually fit how the team worked. I optimized the workflow around shared templates, token usage, and clear design handoff expectations so designers and developers could ship with less rework and fewer manual translations.
My responsibility was to translate these constraints into a pragmatic, scalable design system and a set of design operations that actually fit how the team worked. I optimized the workflow around shared templates, token usage, and clear design handoff expectations so designers and developers could ship with less rework and fewer manual translations.
Design System Strategy and Success Metrics
Design System Strategy and Success Metrics
I approached the Bugaboo TV design system as both a visual language and a governance framework for cross-platform behavior. To keep everything scalable and cohesive, I applied an atomic-design mindset, moving from foundations and tokens to components, templates, and screens.
I approached the Bugaboo TV design system as both a visual language and a governance framework for cross-platform behavior. To keep everything scalable and cohesive, I applied an atomic-design mindset, moving from foundations and tokens to components, templates, and screens.
My strategy focused on 3 pillars:
My strategy focused on 3 pillars:
Solid Design Foundations Before Screens
Solid Design Foundations Before Screens
Establish shared foundations for typography, color, spacing, layout, and grid across all devices, then treat these as non-negotiable constraints that every screen must follow.
Establish shared foundations for typography, color, spacing, layout, and grid across all devices, then treat these as non-negotiable constraints that every screen must follow.
Tokens and Components Aligned With Code
Tokens and Components Aligned With Code
Design a token system and component architecture that align with Tailwind CSS naming and structure to reduce translation work between design and development.
Design a token system and component architecture that align with Tailwind CSS naming and structure to reduce translation work between design and development.
Governance and Sustainable Adoption
Governance and Sustainable Adoption
Build documentation, file structure, and working agreements so that the Bugaboo team can use, extend, and maintain the system in a sustainable way without constant agency involvement.
Build documentation, file structure, and working agreements so that the Bugaboo team can use, extend, and maintain the system in a sustainable way without constant agency involvement.
Underneath these pillars, I treated the design system as an investment in delivery. It needed to scale multi-device production, reduce UI drift and design debt, and improve design-to-development alignment so the team could ship faster with less rework.
Underneath these pillars, I treated the design system as an investment in delivery. It needed to scale multi-device production, reduce UI drift and design debt, and improve design-to-development alignment so the team could ship faster with less rework.
To keep the work measurable, I defined a small set of success indicators:
To keep the work measurable, I defined a small set of success indicators:
Adoption
Adoption
Where 100% of UI designers used the shared library as the source of truth, and key flows were built without detached components or 1-off overrides.
Where 100% of UI designers used the shared library as the source of truth, and key flows were built without detached components or 1-off overrides.
Coverage
Coverage
Where components and variants cover real product flows, not just isolated UI examples.
Where components and variants cover real product flows, not just isolated UI examples.
Delivery Speed
Delivery Speed
Where designers can complete more tickets per sprint after the system is in place.
Where designers can complete more tickets per sprint after the system is in place.
System Integrity
System Integrity
Where there are fewer 1-off styles, inconsistent grids, or detached components in the files.
Where there are fewer 1-off styles, inconsistent grids, or detached components in the files.
These indicators mapped directly to the Design System Impact metrics at the top of this case study. With the metrics set, I started at the foundation level, since tokens and layout rules would shape every screen that followed.
These indicators mapped directly to the Design System Impact metrics at the top of this case study. With the metrics set, I started at the foundation level, since tokens and layout rules would shape every screen that followed.
Building the Token-Based Foundation
Building the Token-Based Foundation
The first major step was to create the token-based foundation. The goal was to give designers and developers a shared vocabulary and a stable set of constraints.
The first major step was to create the token-based foundation. The goal was to give designers and developers a shared vocabulary and a stable set of constraints.
To keep the system practical, I anchored it in 5 UI principles: clarity, cohesion, feedback, hierarchy, and simplicity. In parallel, I reviewed Tailwind CSS and mapped tokens to concepts the engineering team already recognized, so spacing, type, and color scales stayed Tailwind-compatible while still reflecting Bugaboo’s brand needs.
To keep the system practical, I anchored it in 5 UI principles: clarity, cohesion, feedback, hierarchy, and simplicity. In parallel, I reviewed Tailwind CSS and mapped tokens to concepts the engineering team already recognized, so spacing, type, and color scales stayed Tailwind-compatible while still reflecting Bugaboo’s brand needs.
In the “Bugaboo TV - Design Foundation” file, I set up:
In the “Bugaboo TV - Design Foundation” file, I set up:
8-Point Spacing and Layout Tokens
8-Point Spacing and Layout Tokens
Design tokens based on an 8-point spacing system, with a consistent scale to keep spacing and layout proportional.
Design tokens based on an 8-point spacing system, with a consistent scale to keep spacing and layout proportional.
Role-Based Color Tokens for Modes
Role-Based Color Tokens for Modes
Color tokens that supported both light and dark modes, plus roles such as background, surface, text, and functional states.
Color tokens that supported both light and dark modes, plus roles such as background, surface, text, and functional states.
Responsive Typography Scale Tokens
Responsive Typography Scale Tokens
Typography tokens that scaled across TV, desktop, tablet, and mobile so that hierarchy stayed clear even as sizes changed per device.
Typography tokens that scaled across TV, desktop, tablet, and mobile so that hierarchy stayed clear even as sizes changed per device.
Shape, Elevation, and Motion Tokens
Shape, Elevation, and Motion Tokens
Tokens for radius, border, shadow, opacity, and motion to keep elevation and depth aligned.
Tokens for radius, border, shadow, opacity, and motion to keep elevation and depth aligned.
Because the primary CTA was defined by the new brand gradient (from #811CFF to #53B1FD), white labels did not meet WCAG contrast targets across the entire gradient range, especially at the lighter end. I documented this as a brand constraint, aligned with stakeholders on the trade-off, and proposed mitigation options for future iterations, such as adding a subtle label scrim or constraining the gradient behind text.
Because the primary CTA was defined by the new brand gradient (from #811CFF to #53B1FD), white labels did not meet WCAG contrast targets across the entire gradient range, especially at the lighter end. I documented this as a brand constraint, aligned with stakeholders on the trade-off, and proposed mitigation options for future iterations, such as adding a subtle label scrim or constraining the gradient behind text.
Across the rest of the UI, I validated key text-on-surface pairs against WCAG contrast targets as a baseline.
Across the rest of the UI, I validated key text-on-surface pairs against WCAG contrast targets as a baseline.
I treated design tokens as nicknames for our design decisions rather than raw values. Instead of sharing hard-coded values like a hex code, we created a shared vocabulary that designers and developers both understood. Tokens covered categories such as color, typography, spacing, sizing, border radius, borders, elevation, and z-index, and we standardized scales so that sizing and spacing behaved predictably across the entire experience. Internally, we separated primitive values from semantic and component-level tokens, which made it easier to change how a role looked without editing every instance by hand.
I treated design tokens as nicknames for our design decisions rather than raw values. Instead of sharing hard-coded values like a hex code, we created a shared vocabulary that designers and developers both understood. Tokens covered categories such as color, typography, spacing, sizing, border radius, borders, elevation, and z-index, and we standardized scales so that sizing and spacing behaved predictably across the entire experience. Internally, we separated primitive values from semantic and component-level tokens, which made it easier to change how a role looked without editing every instance by hand.
I then applied tokens into Figma styles and design foundations such as color styles, typography styles, and effect styles. This made the relationship between abstract tokens and visual outputs clear to the design team and reduced guesswork when creating new screens.
I then applied tokens into Figma styles and design foundations such as color styles, typography styles, and effect styles. This made the relationship between abstract tokens and visual outputs clear to the design team and reduced guesswork when creating new screens.
Additionally, I created shared component groups organized by usage, for example:
Additionally, I created shared component groups organized by usage, for example:
•
•
Actions, such as buttons, toggles, checkboxes, and other interaction controls.
Actions, such as buttons, toggles, checkboxes, and other interaction controls.
•
•
Navigation, such as header navigation, bottom navigation, tabs, and global navigation elements.
Navigation, such as header navigation, bottom navigation, tabs, and global navigation elements.
•
•
Inputs, such as text fields, dropdowns, selectors, and form-related elements.
Inputs, such as text fields, dropdowns, selectors, and form-related elements.
Structuring components by purpose helped both designers and developers find what they needed quickly and encouraged system thinking instead of ad-hoc UI. The Design Foundation file became the backbone of the system that every other file in the project referenced.
Structuring components by purpose helped both designers and developers find what they needed quickly and encouraged system thinking instead of ad-hoc UI. The Design Foundation file became the backbone of the system that every other file in the project referenced.
DesignOps and Governance
DesignOps and Governance
Alongside building the visual system, I designed how the team would work with it. DesignOps and governance were essential, because the Bugaboo team would inherit the system after the agency phase.
Alongside building the visual system, I designed how the team would work with it. DesignOps and governance were essential, because the Bugaboo team would inherit the system after the agency phase.
I defined a clear file structure that balanced shared foundations with feature-level focus:
I defined a clear file structure that balanced shared foundations with feature-level focus:
Bugaboo TV - Design Foundation
Bugaboo TV - Design Foundation
Contained tokens, modes, styles, and shared components grouped by usage, such as actions, navigation, and inputs. This file was the single source of truth for primitives and base components.
Contained tokens, modes, styles, and shared components grouped by usage, such as actions, navigation, and inputs. This file was the single source of truth for primitives and base components.
Bugaboo TV - UI Standardization
Bugaboo TV - UI Standardization
Documented file structure for the entire project, canvas models for each device, and templates for screens, modals, and UI states. Designers used this file when they needed to start new flows or align on how to structure screens.
Documented file structure for the entire project, canvas models for each device, and templates for screens, modals, and UI states. Designers used this file when they needed to start new flows or align on how to structure screens.
Feature-Specific UI Files
Feature-Specific UI Files
These files stored actual product screens tied to development sprints, while still referencing tokens and components from the foundation and standardization files. For example, Browsing Content, Profile Management, Points and Gems, and Subscription Plan.
These files stored actual product screens tied to development sprints, while still referencing tokens and components from the foundation and standardization files. For example, Browsing Content, Profile Management, Points and Gems, and Subscription Plan.
This file structure mirrored the atomic design progression, keeping foundations and shared components centralized while templates and feature flows lived in dedicated files. Designers could explore and extend flows in feature files, but they always anchored their work in shared foundations and templates.
This file structure mirrored the atomic design progression, keeping foundations and shared components centralized while templates and feature flows lived in dedicated files. Designers could explore and extend flows in feature files, but they always anchored their work in shared foundations and templates.
I also set expectations and guidelines for the design team. These covered:
I also set expectations and guidelines for the design team. These covered:
•
•
When to use existing components and when to request new ones.
When to use existing components and when to request new ones.
•
•
How to handle platform-specific differences without breaking the system.
How to handle platform-specific differences without breaking the system.
•
•
How to treat modes such as light and dark in a consistent way.
How to treat modes such as light and dark in a consistent way.
•
•
How to avoid detaching components and introducing 1-off overrides.
How to avoid detaching components and introducing 1-off overrides.
During the project, I led the internal UI design team and worked closely with a junior designer who helped apply the system. I reviewed screens, coached on component usage, and made sure that every new design pushed us deeper into system usage rather than back into ad-hoc design.
During the project, I led the internal UI design team and worked closely with a junior designer who helped apply the system. I reviewed screens, coached on component usage, and made sure that every new design pushed us deeper into system usage rather than back into ad-hoc design.
Training was a critical part of the governance work. I ran workshops for Bugaboo’s designers and developers focusing on design tokens, how the system mapped to Tailwind, and how to think about long-term maintenance. I explained why we structured tokens the way we did, how modes worked, and how this design foundation could support future products beyond streaming.
Training was a critical part of the governance work. I ran workshops for Bugaboo’s designers and developers focusing on design tokens, how the system mapped to Tailwind, and how to think about long-term maintenance. I explained why we structured tokens the way we did, how modes worked, and how this design foundation could support future products beyond streaming.
By treating governance as part of the project instead of an afterthought, we ended with both a robust library and a shared, sustainable way of working around it.
By treating governance as part of the project instead of an afterthought, we ended with both a robust library and a shared, sustainable way of working around it.
In practice, I added a lightweight handoff and design QA routine to reduce implementation drift and keep delivery aligned with the design system across releases.
In practice, I added a lightweight handoff and design QA routine to reduce implementation drift and keep delivery aligned with the design system across releases.
Component Architecture Across Platforms
Component Architecture Across Platforms
Responsive Website
Responsive Website
•
•
Desktop Web
Desktop Web
•
•
Tablet Web
Tablet Web
•
•
Mobile Web
Mobile Web
Application
Application
•
•
TV App
TV App
•
•
Tablet App
Tablet App
(Android & iPadOS)
(Android & iPadOS)
•
•
Mobile App
Mobile App
(Android & iOS)
(Android & iOS)
For each platform, I defined screen sizes and grid systems, then documented the full canvas model and template standards in the “Bugaboo TV - UI Standardization” file. This became the reference for breakpoints, screen templates, modals, and UI states across the team.
For each platform, I defined screen sizes and grid systems, then documented the full canvas model and template standards in the “Bugaboo TV - UI Standardization” file. This became the reference for breakpoints, screen templates, modals, and UI states across the team.
This foundation helped me apply accessibility decisions consistently across devices, especially for TV. To support lean-back viewing in varied lighting, I referenced TV UX and Android TV guidance and designed a larger, higher-contrast type scale with more generous spacing. I avoided overly thin text in key areas such as menus, rails, and watch controls.
This foundation helped me apply accessibility decisions consistently across devices, especially for TV. To support lean-back viewing in varied lighting, I referenced TV UX and Android TV guidance and designed a larger, higher-contrast type scale with more generous spacing. I avoided overly thin text in key areas such as menus, rails, and watch controls.
From there, I used the foundations to build token-based components that could scale across devices. Cards, rails, navigation shells, banners, form elements, subscription surfaces, and other building blocks were designed as small systems with clear anatomy, states, and responsive behavior. A content card, for example, defined image ratio, title and metadata placement, badges, and actions, then adapted its density and layout as it moved from mobile to desktop to TV.
From there, I used the foundations to build token-based components that could scale across devices. Cards, rails, navigation shells, banners, form elements, subscription surfaces, and other building blocks were designed as small systems with clear anatomy, states, and responsive behavior. A content card, for example, defined image ratio, title and metadata placement, badges, and actions, then adapted its density and layout as it moved from mobile to desktop to TV.
Instead of repeating the exact component counts here, I focused on making sure every component in the library was rooted in tokens and usable across real flows such as browsing, search, watch experience, subscriptions, payments, and account settings. Designers did not need to guess margins or type sizes. They started from the UI Standardization templates, then expanded them into production-ready screens with real content, edge cases, and platform-specific states across defined breakpoints before handover to the Bugaboo TV team.
Instead of repeating the exact component counts here, I focused on making sure every component in the library was rooted in tokens and usable across real flows such as browsing, search, watch experience, subscriptions, payments, and account settings. Designers did not need to guess margins or type sizes. They started from the UI Standardization templates, then expanded them into production-ready screens with real content, edge cases, and platform-specific states across defined breakpoints before handover to the Bugaboo TV team.
From those templates, designers moved faster by duplicating proven layouts and completing content, edge cases, and states for each breakpoint, instead of rebuilding screens from scratch.
From those templates, designers moved faster by duplicating proven layouts and completing content, edge cases, and states for each breakpoint, instead of rebuilding screens from scratch.
Accordingly, the team could reuse layouts, spacing, and typography decisions at scale while still respecting each device’s unique constraints. Templates reduced rework because designers built from token-driven foundations instead of 1-off screens. Over time, delivery became more predictable because breakpoints, states, and handoff expectations were baked into the system from the start.
Accordingly, the team could reuse layouts, spacing, and typography decisions at scale while still respecting each device’s unique constraints. Templates reduced rework because designers built from token-driven foundations instead of 1-off screens. Over time, delivery became more predictable because breakpoints, states, and handoff expectations were baked into the system from the start.
What I Learned
What I Learned
System Thinking Beyond Components
System Thinking Beyond Components
This project reinforced that a design system is much more than a set of components. It is a mix of foundations, governance, and education that shapes how teams design and ship products. Building Bugaboo TV’s system required equal attention to visual detail and operational structure, and it showed me how important it is to design both the product and the production system around it.
This project reinforced that a design system is much more than a set of components. It is a mix of foundations, governance, and education that shapes how teams design and ship products. Building Bugaboo TV’s system required equal attention to visual detail and operational structure, and it showed me how important it is to design both the product and the production system around it.
Aligning Early With Engineering
Aligning Early With Engineering
I learned how powerful it is to align a design system with the engineering framework from the beginning. Matching the token architecture to Tailwind CSS reduced translation costs and gave designers and developers a shared vocabulary. It also created a clear path for future themes and brands without rebuilding the system from scratch.
I learned how powerful it is to align a design system with the engineering framework from the beginning. Matching the token architecture to Tailwind CSS reduced translation costs and gave designers and developers a shared vocabulary. It also created a clear path for future themes and brands without rebuilding the system from scratch.
Designing for Multi-Device and Accessible Experiences
Designing for Multi-Device and Accessible Experiences
I saw the impact of treating multi-device design as 1 system instead of 5 separate projects and of layering accessibility into that system from the start. By defining grids, tokens, and components that scale from mobile to desktop to TV, and by following contrast and readability guidelines, we gave the team a way to deliver a coherent and more accessible experience while still respecting each device’s needs.
I saw the impact of treating multi-device design as 1 system instead of 5 separate projects and of layering accessibility into that system from the start. By defining grids, tokens, and components that scale from mobile to desktop to TV, and by following contrast and readability guidelines, we gave the team a way to deliver a coherent and more accessible experience while still respecting each device’s needs.
Leading and Mentoring Through a System
Leading and Mentoring Through a System
Finally, this project helped me grow as a leader and mentor. I was not only responsible for UI quality but also for guiding other designers into a new way of working. Coaching the team through tokens, templates, accessibility considerations, and governance taught me how to use a design system as a leadership tool, not just a design asset. It clarified the kind of work I want to do more of, where design craft, design governance, and DesignOps go hand in hand.
Finally, this project helped me grow as a leader and mentor. I was not only responsible for UI quality but also for guiding other designers into a new way of working. Coaching the team through tokens, templates, accessibility considerations, and governance taught me how to use a design system as a leadership tool, not just a design asset. It clarified the kind of work I want to do more of, where design craft, design governance, and DesignOps go hand in hand.
Reflection
Reflection
If I were to continue this project in the long term, I would focus on strengthening the bridge between design and code even further. A practical next step would be to use tools like Figma’s Code Connect with an MCP server so our token-based components in Figma can link directly to real production components in the codebase.
If I were to continue this project in the long term, I would focus on strengthening the bridge between design and code even further. A practical next step would be to use tools like Figma’s Code Connect with an MCP server so our token-based components in Figma can link directly to real production components in the codebase.
To reduce implementation drift and manual translation work, I would work with engineers to define clear property mappings, add implementation examples, and set up lightweight checks for incorrect token usage and accessibility issues. I would also explore token versioning and automated syncing from Figma variables to the codebase, and add a simple Figma “debug mode” that makes token and component usage visible versus hardcoded values.
To reduce implementation drift and manual translation work, I would work with engineers to define clear property mappings, add implementation examples, and set up lightweight checks for incorrect token usage and accessibility issues. I would also explore token versioning and automated syncing from Figma variables to the codebase, and add a simple Figma “debug mode” that makes token and component usage visible versus hardcoded values.
As the system matured, I would evolve our tokens to be more AI-ready by adding lightweight metadata such as descriptions, recommended usage, avoid lists, sentiment, and context signals. Ultimately, I want to keep building systems where design, engineering, and emerging AI tools reinforce one another, so the design system becomes a living constraint engine that helps teams ship better experiences faster.
As the system matured, I would evolve our tokens to be more AI-ready by adding lightweight metadata such as descriptions, recommended usage, avoid lists, sentiment, and context signals. Ultimately, I want to keep building systems where design, engineering, and emerging AI tools reinforce one another, so the design system becomes a living constraint engine that helps teams ship better experiences faster.
What’s Next?
What’s Next?
What’s Next?
