Kinetic is Globe Telecom's design system, built to unify the design and development language across Globe's digital product ecosystem. I joined as UX Design Lead to take ownership of Kinetic just two months after its initial establishment, at a point where foundational decisions still needed to be made and early problems were already compounding.
YEAR
2021
ROLE
UX Design Lead,
Design Manager for Design Systems
RESPONSIBILITIES
Design Strategy,
Design Systems,
UI & UX Design
About the work
Challenge
Kinetic was two months old and already showing structural cracks. Components were being built at the atomic level to satisfy the exact needs of individual modules and flows, which meant almost nothing was reusable. Each component category followed its own set of subjective guidelines depending on which designer requested it. The result was a bloated, incoherent system that was more expensive to maintain than it was useful. Both design and development teams were spending more time building one-off components than shipping product.
Approach
I restructured how the team thought about the design system entirely. Instead of building bottom-up from atoms, I flipped the approach to start from what users actually need.
The first step was to audit and prioritize. I worked with the design system team to map components against real user stories and interaction cases, filtering out everything that existed "just in case" and focusing only on what was actively required.
Next, I established a clear granularity model. We stopped thinking in isolated components and started working top-down: modules first (feature-based groupings), then flows (scenarios within each feature), then screens (the views that compose a flow), and finally the components themselves. This gave every component a traceable reason to exist.
Each component lived on ZeroHeight, which we chose specifically because it could house both visual specs and code references in one place, keeping design and engineering aligned on a single source of truth.
To maintain visibility across the entire system, I built a component status tracker that monitored the lifecycle of every foundation and component element across all platforms and output layers: Design, Guidelines, HTML+CSS, Android/iOS, Angular, Flutter, and Documentation. Each entry was versioned and tagged with a real-time status (Complete, In Progress, Incomplete, Paused, or None), giving the team a single dashboard to see exactly where each element stood in the pipeline. This removed guesswork from sprint planning and made cross-functional handoffs between design, engineering, and QA significantly more efficient.
To prevent the system from bloating again, I introduced a component governance process. Every reusable component request from UX designers went through the design system team for evaluation. We assessed whether the request justified a net-new addition to the library or whether existing patterns could be extended or reconfigured to meet the need. This kept the system lean and intentional without becoming a bottleneck for product teams.
I managed the design system directly while working across a broader team of front-end developers, UX designers, and QA analysts. Usability validation was conducted through Globe's user community in small-group review sessions, leveraging platforms like Userberry and Maze to run moderated and unmoderated tests before scaling components into production.
Outcome
Within six months, I scaled Kinetic's adoption from a single product (GlobeOne) to six: GlobeOne, Globe Website, Globe Broadband, Globe Prepaid, Globe Business, and GOMO. The system went from a fragmented, costly component library to a streamlined, governed design system that served as the shared language across Globe's digital portfolio.
Smooth Scroll
This will hide itself!
This will hide itself!
Kinetic Design System
ABOUT THE PROJECT
Kinetic is Globe Telecom's design system, built to unify the design and development language across Globe's digital product ecosystem. I joined as UX Design Lead to take ownership of Kinetic just two months after its initial establishment, at a point where foundational decisions still needed to be made and early problems were already compounding.
YEAR
2021
ROLE
UX Design Lead,
Design Manager for Design Systems
RESPONSIBILITIES
Design Strategy,
Design Systems,
UI & UX Design
About the work
Challenge
Kinetic was two months old and already showing structural cracks. Components were being built at the atomic level to satisfy the exact needs of individual modules and flows, which meant almost nothing was reusable. Each component category followed its own set of subjective guidelines depending on which designer requested it. The result was a bloated, incoherent system that was more expensive to maintain than it was useful. Both design and development teams were spending more time building one-off components than shipping product.
Approach
I restructured how the team thought about the design system entirely. Instead of building bottom-up from atoms, I flipped the approach to start from what users actually need.
The first step was to audit and prioritize. I worked with the design system team to map components against real user stories and interaction cases, filtering out everything that existed "just in case" and focusing only on what was actively required.
Next, I established a clear granularity model. We stopped thinking in isolated components and started working top-down: modules first (feature-based groupings), then flows (scenarios within each feature), then screens (the views that compose a flow), and finally the components themselves. This gave every component a traceable reason to exist.
Each component lived on ZeroHeight, which we chose specifically because it could house both visual specs and code references in one place, keeping design and engineering aligned on a single source of truth.
To maintain visibility across the entire system, I built a component status tracker that monitored the lifecycle of every foundation and component element across all platforms and output layers: Design, Guidelines, HTML+CSS, Android/iOS, Angular, Flutter, and Documentation. Each entry was versioned and tagged with a real-time status (Complete, In Progress, Incomplete, Paused, or None), giving the team a single dashboard to see exactly where each element stood in the pipeline. This removed guesswork from sprint planning and made cross-functional handoffs between design, engineering, and QA significantly more efficient.
To prevent the system from bloating again, I introduced a component governance process. Every reusable component request from UX designers went through the design system team for evaluation. We assessed whether the request justified a net-new addition to the library or whether existing patterns could be extended or reconfigured to meet the need. This kept the system lean and intentional without becoming a bottleneck for product teams.
I managed the design system directly while working across a broader team of front-end developers, UX designers, and QA analysts. Usability validation was conducted through Globe's user community in small-group review sessions, leveraging platforms like Userberry and Maze to run moderated and unmoderated tests before scaling components into production.
Outcome
Within six months, I scaled Kinetic's adoption from a single product (GlobeOne) to six: GlobeOne, Globe Website, Globe Broadband, Globe Prepaid, Globe Business, and GOMO. The system went from a fragmented, costly component library to a streamlined, governed design system that served as the shared language across Globe's digital portfolio.
Smooth Scroll
This will hide itself!
This will hide itself!
Kinetic Design System
ABOUT THE PROJECT
Kinetic is Globe Telecom's design system, built to unify the design and development language across Globe's digital product ecosystem. I joined as UX Design Lead to take ownership of Kinetic just two months after its initial establishment, at a point where foundational decisions still needed to be made and early problems were already compounding.
YEAR
2021
ROLE
UX Design Lead,
Design Manager for Design Systems
RESPONSIBILITIES
Design Strategy,
Design Systems,
UI & UX Design
About the work
Challenge
Kinetic was two months old and already showing structural cracks. Components were being built at the atomic level to satisfy the exact needs of individual modules and flows, which meant almost nothing was reusable. Each component category followed its own set of subjective guidelines depending on which designer requested it. The result was a bloated, incoherent system that was more expensive to maintain than it was useful. Both design and development teams were spending more time building one-off components than shipping product.
Approach
I restructured how the team thought about the design system entirely. Instead of building bottom-up from atoms, I flipped the approach to start from what users actually need.
The first step was to audit and prioritize. I worked with the design system team to map components against real user stories and interaction cases, filtering out everything that existed "just in case" and focusing only on what was actively required.
Next, I established a clear granularity model. We stopped thinking in isolated components and started working top-down: modules first (feature-based groupings), then flows (scenarios within each feature), then screens (the views that compose a flow), and finally the components themselves. This gave every component a traceable reason to exist.
Each component lived on ZeroHeight, which we chose specifically because it could house both visual specs and code references in one place, keeping design and engineering aligned on a single source of truth.
To maintain visibility across the entire system, I built a component status tracker that monitored the lifecycle of every foundation and component element across all platforms and output layers: Design, Guidelines, HTML+CSS, Android/iOS, Angular, Flutter, and Documentation. Each entry was versioned and tagged with a real-time status (Complete, In Progress, Incomplete, Paused, or None), giving the team a single dashboard to see exactly where each element stood in the pipeline. This removed guesswork from sprint planning and made cross-functional handoffs between design, engineering, and QA significantly more efficient.
To prevent the system from bloating again, I introduced a component governance process. Every reusable component request from UX designers went through the design system team for evaluation. We assessed whether the request justified a net-new addition to the library or whether existing patterns could be extended or reconfigured to meet the need. This kept the system lean and intentional without becoming a bottleneck for product teams.
I managed the design system directly while working across a broader team of front-end developers, UX designers, and QA analysts. Usability validation was conducted through Globe's user community in small-group review sessions, leveraging platforms like Userberry and Maze to run moderated and unmoderated tests before scaling components into production.
Outcome
Within six months, I scaled Kinetic's adoption from a single product (GlobeOne) to six: GlobeOne, Globe Website, Globe Broadband, Globe Prepaid, Globe Business, and GOMO. The system went from a fragmented, costly component library to a streamlined, governed design system that served as the shared language across Globe's digital portfolio.
Smooth Scroll
This will hide itself!
This will hide itself!