Design System
Product Designer
Web Data Extraction
Fast-moving product teams can end up with a lot of UI inconsistencies. You open a Figma file and suddenly there are eleven versions of the same button, and nobody is sure which one to use. With a fast-growing product, a distributed team, and a UI built without a shared foundation, things get messy. I set up their first design system in Figma so everyone could use the same components, patterns, and templates. This way, the team could stop duplicating work and ship a UI that actually feels consistent.
Design System
Product Designer
Web Data Extraction
Fast-moving product teams can end up with a lot of UI inconsistencies. You open a Figma file and suddenly there are eleven versions of the same button, and nobody is sure which one to use. With a fast-growing product, a distributed team, and a UI built without a shared foundation, things get messy. I set up their first design system in Figma so everyone could use the same components, patterns, and templates. This way, the team could stop duplicating work and ship a UI that actually feels consistent.
Design System
Product Designer
Web Data Extraction
Fast-moving product teams can end up with a lot of UI inconsistencies. You open a Figma file and suddenly there are eleven versions of the same button, and nobody is sure which one to use. With a fast-growing product, a distributed team, and a UI built without a shared foundation, things get messy. I set up their first design system in Figma so everyone could use the same components, patterns, and templates. This way, the team could stop duplicating work and ship a UI that actually feels consistent.
Design System
Product Designer
Web Data Extraction
Fast-moving product teams can end up with a lot of UI inconsistencies. You open a Figma file and suddenly there are eleven versions of the same button, and nobody is sure which one to use. With a fast-growing product, a distributed team, and a UI built without a shared foundation, things get messy. I set up their first design system in Figma so everyone could use the same components, patterns, and templates. This way, the team could stop duplicating work and ship a UI that actually feels consistent.
70%
Faster setup
1st
Zyte Design System
Figma
Primary tool
2020
Year
70%
Faster setup
1st
Zyte Design System
Figma
Primary tool
2020
Year
70%
Faster setup
1st
Zyte Design System
Figma
Primary tool
2020
Year
CHALLENGE
Scaling Design for a Growing Product
Sometimes developers would read the specs in their own way, and new folks had no central spot to figure out how things should look or work. The product ended up feeling patched together, which made sense because that's basically what happened. What we needed wasn't just another component library. We needed a system that everyone could actually rely on.
CHALLENGE
Scaling Design for a Growing Product
Sometimes developers would read the specs in their own way, and new folks had no central spot to figure out how things should look or work. The product ended up feeling patched together, which made sense because that's basically what happened. What we needed wasn't just another component library. We needed a system that everyone could actually rely on.
CHALLENGE
Scaling Design for a Growing Product
Sometimes developers would read the specs in their own way, and new folks had no central spot to figure out how things should look or work. The product ended up feeling patched together, which made sense because that's basically what happened. What we needed wasn't just another component library. We needed a system that everyone could actually rely on.
CHALLENGE
Scaling Design for a Growing Product
Sometimes developers would read the specs in their own way, and new folks had no central spot to figure out how things should look or work. The product ended up feeling patched together, which made sense because that's basically what happened. What we needed wasn't just another component library. We needed a system that everyone could actually rely on.
BEFORE
Duplicate components, inconsistent spacing, interactive states that behaved differently depending on who built them.
Duplicate components, inconsistent spacing, interactive states that behaved differently depending on who built them.
Duplicate components, inconsistent spacing, interactive states that behaved differently depending on who built them.
DESIGN PROCESS
How I Approached This Project
01
Audit existing UI
Catalogued every component, pattern, and style in use.
02
Talk to developers
Listened to where handoff broke down and what they wished existed.
03
Reference Material Design
Adapted Google Material best practices to Zyte's context.
04
Build and iterate
Feedback rounds with designers and developers until the team trusted it.
DESIGN PROCESS
How I Approached This Project
01
Audit existing UI
Catalogued every component, pattern, and style in use.
02
Talk to developers
Listened to where handoff broke down and what they wished existed.
03
Reference Material Design
Adapted Google Material best practices to Zyte's context.
04
Build and iterate
Feedback rounds with designers and developers until the team trusted it.
DESIGN PROCESS
How I Approached This Project
01
Audit existing UI
Catalogued every component, pattern, and style in use.
02
Talk to developers
Listened to where handoff broke down and what they wished existed.
03
Reference Material Design
Adapted Google Material best practices to Zyte's context.
04
Build and iterate
Feedback rounds with designers and developers until the team trusted it.
DESIGN PROCESS
How I Approached This Project
01
Audit existing UI
Catalogued every component, pattern, and style in use.
02
Talk to developers
Listened to where handoff broke down and what they wished existed.
03
Reference Material Design
Adapted Google Material best practices to Zyte's context.
04
Build and iterate
Feedback rounds with designers and developers until the team trusted it.
RESEARCH
Talking to Developers First
A design system only works if developers actually use it. So before I started designing anything, I sat down with the dev team. I wasn’t there to pitch ideas, just to hear what they needed.
What slowed them down during handoff? Where did they have to make their own calls because the spec wasn't clear enough? What did they wish existed? Those conversations shaped everything that came after. The system wasn't designed for designers. It was designed for the whole team.
Specs weren't precise enough
Developers were making their own calls on interactive states and spacing.
Setup took too long
Every new feature started from scratch. No shared foundation to build on.
No single source of truth
Multiple versions of the same component lived in different files.
Naming was inconsistent
Design names didn't match code names. Translation was a source of error.
RESEARCH
Talking to Developers First
A design system only works if developers actually use it. So before I started designing anything, I sat down with the dev team. I wasn’t there to pitch ideas, just to hear what they needed.
What slowed them down during handoff? Where did they have to make their own calls because the spec wasn't clear enough? What did they wish existed? Those conversations shaped everything that came after. The system wasn't designed for designers. It was designed for the whole team.
Specs weren't precise enough
Developers were making their own calls on interactive states and spacing.
Setup took too long
Every new feature started from scratch. No shared foundation to build on.
No single source of truth
Multiple versions of the same component lived in different files.
Naming was inconsistent
Design names didn't match code names. Translation was a source of error.
RESEARCH
Talking to Developers First
A design system only works if developers actually use it. So before I started designing anything, I sat down with the dev team. I wasn’t there to pitch ideas, just to hear what they needed.
What slowed them down during handoff? Where did they have to make their own calls because the spec wasn't clear enough? What did they wish existed? Those conversations shaped everything that came after. The system wasn't designed for designers. It was designed for the whole team.
Specs weren't precise enough
Developers were making their own calls on interactive states and spacing.
Setup took too long
Every new feature started from scratch. No shared foundation to build on.
No single source of truth
Multiple versions of the same component lived in different files.
Naming was inconsistent
Design names didn't match code names. Translation was a source of error.
RESEARCH
Talking to Developers First
A design system only works if developers actually use it. So before I started designing anything, I sat down with the dev team. I wasn’t there to pitch ideas, just to hear what they needed.
What slowed them down during handoff? Where did they have to make their own calls because the spec wasn't clear enough? What did they wish existed? Those conversations shaped everything that came after. The system wasn't designed for designers. It was designed for the whole team.
Specs weren't precise enough
Developers were making their own calls on interactive states and spacing.
Setup took too long
Every new feature started from scratch. No shared foundation to build on.
No single source of truth
Multiple versions of the same component lived in different files.
Naming was inconsistent
Design names didn't match code names. Translation was a source of error.
Design Solutions
UI and Component Strategy
The system had to work for both Zyte’s marketing brand, which was already set, and the product UI, which needed its own rules for function, hierarchy, and accessibility.
I referred to Google Material Design as a foundation for best practices including component behaviour, spacing systems, and interactive states, then adapted everything to fit Zyte's specific context and brand.
Architecture
Mapped the structure so anyone could navigate the library without a tutorial.
Visual Design
Icons and illustrations aligned with brand and interface patterns.
Button Hierarchy
Five button types, each with a clear role, so users always know what an action will do before they click it.
Design Solutions
UI and Component Strategy
The system had to work for both Zyte’s marketing brand, which was already set, and the product UI, which needed its own rules for function, hierarchy, and accessibility.
I referred to Google Material Design as a foundation for best practices including component behaviour, spacing systems, and interactive states, then adapted everything to fit Zyte's specific context and brand.
Architecture
Mapped the structure so anyone could navigate the library without a tutorial.
Visual Design
Icons and illustrations aligned with brand and interface patterns.
Button Hierarchy
Five button types, each with a clear role, so users always know what an action will do before they click it.
Design Solutions
UI and Component Strategy
The system had to work for both Zyte’s marketing brand, which was already set, and the product UI, which needed its own rules for function, hierarchy, and accessibility.
I referred to Google Material Design as a foundation for best practices including component behaviour, spacing systems, and interactive states, then adapted everything to fit Zyte's specific context and brand.
Architecture
Mapped the structure so anyone could navigate the library without a tutorial.
Visual Design
Icons and illustrations aligned with brand and interface patterns.
Button Hierarchy
Five button types, each with a clear role, so users always know what an action will do before they click it.
Design Solutions
UI and Component Strategy
The system had to work for both Zyte’s marketing brand, which was already set, and the product UI, which needed its own rules for function, hierarchy, and accessibility.
I referred to Google Material Design as a foundation for best practices including component behaviour, spacing systems, and interactive states, then adapted everything to fit Zyte's specific context and brand.
Architecture
Mapped the structure so anyone could navigate the library without a tutorial.
Visual Design
Icons and illustrations aligned with brand and interface patterns.
Button Hierarchy
Five button types, each with a clear role, so users always know what an action will do before they click it.
Design Solutions
Figma Variants, Bridging Design and Code
We named each variant to match the prop/value format devs were already using in their frontend frameworks. Just open the file, check the spec, and build without extra steps.
Every component was annotated with behaviour notes, edge cases, and interaction states. The file was built to answer questions before anyone had to ask them.
Date Picker
Designed with clear spacing and consistent padding so users can scan and select a date without second-guessing what they're looking at, with a tooltip state that surfaces data like extraction counts directly on the calendar.
Extraction Log Panel
A scrollable list view that lets engineers filter and sort their extraction history by time and status, with colour coded indicators so the state of each entry is readable at a glance.
Date Picker Flow
Three interaction states in one component. A single date selection, a tooltip that surfaces extraction data on hover, and a dual calendar range picker with preset shortcuts like Today and Last 30 days. Each state was designed to give engineers exactly the context they need depending on how they want to query their data.
Icon Button Variants
Every colour, size, and interactive state documented in one place so the right button always looks the same no matter who builds it.
Design Solutions
Figma Variants, Bridging Design and Code
We named each variant to match the prop/value format devs were already using in their frontend frameworks. Just open the file, check the spec, and build without extra steps.
Every component was annotated with behaviour notes, edge cases, and interaction states. The file was built to answer questions before anyone had to ask them.
Date Picker
Designed with clear spacing and consistent padding so users can scan and select a date without second-guessing what they're looking at, with a tooltip state that surfaces data like extraction counts directly on the calendar.
Extraction Log Panel
A scrollable list view that lets engineers filter and sort their extraction history by time and status, with colour coded indicators so the state of each entry is readable at a glance.
Date Picker Flow
Three interaction states in one component. A single date selection, a tooltip that surfaces extraction data on hover, and a dual calendar range picker with preset shortcuts like Today and Last 30 days. Each state was designed to give engineers exactly the context they need depending on how they want to query their data.
Icon Button Variants
Every colour, size, and interactive state documented in one place so the right button always looks the same no matter who builds it.
Figma Variants, Bridging Design and Code
We named each variant to match the prop/value format devs were already using in their frontend frameworks. Just open the file, check the spec, and build without extra steps.
Every component was annotated with behaviour notes, edge cases, and interaction states. The file was built to answer questions before anyone had to ask them.
Date Picker
Designed with clear spacing and consistent padding so users can scan and select a date without second-guessing what they're looking at, with a tooltip state that surfaces data like extraction counts directly on the calendar.
Extraction Log Panel
A scrollable list view that lets engineers filter and sort their extraction history by time and status, with colour coded indicators so the state of each entry is readable at a glance.
Date Picker Flow
Three interaction states in one component. A single date selection, a tooltip that surfaces extraction data on hover, and a dual calendar range picker with preset shortcuts like Today and Last 30 days. Each state was designed to give engineers exactly the context they need depending on how they want to query their data.
Icon Button Variants
Every colour, size, and interactive state documented in one place so the right button always looks the same no matter who builds it.
Figma Variants, Bridging Design and Code
We named each variant to match the prop/value format devs were already using in their frontend frameworks. Just open the file, check the spec, and build without extra steps.
Every component was annotated with behaviour notes, edge cases, and interaction states. The file was built to answer questions before anyone had to ask them.
Date Picker
Designed with clear spacing and consistent padding so users can scan and select a date without second-guessing what they're looking at, with a tooltip state that surfaces data like extraction counts directly on the calendar.
Extraction Log Panel
A scrollable list view that lets engineers filter and sort their extraction history by time and status, with colour coded indicators so the state of each entry is readable at a glance.
Date Picker Flow
Three interaction states in one component. A single date selection, a tooltip that surfaces extraction data on hover, and a dual calendar range picker with preset shortcuts like Today and Last 30 days. Each state was designed to give engineers exactly the context they need depending on how they want to query their data.
Icon Button Variants
Every colour, size, and interactive state documented in one place so the right button always looks the same no matter who builds it.
FIGMA VARIANTS
Dataset Card Variants
Figma variants mapped to front-end props with annotations for easy developer handoff.
Dataset Card Variants
Figma variants mapped to front-end props with annotations for easy developer handoff.
Dataset Card Variants
Figma variants mapped to front-end props with annotations for easy developer handoff.
Dataset Card Variants
Figma variants mapped to front-end props with annotations for easy developer handoff.
Design Solutions
Atomic Templates, Before and After
When atoms, molecules, and organisms come together, you don’t just get consistency. You get speed. The team could spin up new pages way faster because all the decisions were already made.
Before
Inconsistent spacing, ad-hoc components, no shared logic. Every designer was working from their own version of the truth and every developer was filling in the gaps on their own.
After
Built from the same parts, speaking the same visual language. Every component intentional, every spacing decision documented, and every developer working from the same file with confidence.
Billing and Subscriptions
A real-world example of the design system in action. Multiple subscription states, usage indicators, status badges, and action buttons all built from the same components, maintaining visual consistency across a complex and information-dense page.
Plan Details
With the design system in place, a page this complex becomes manageable. Four subscription tiers, granular pricing breakdowns, and a live summary panel all built from the same components and holding together visually no matter how much information is on screen.
Design Solutions
Atomic Templates, Before and After
When atoms, molecules, and organisms come together, you don’t just get consistency. You get speed. The team could spin up new pages way faster because all the decisions were already made.
Before
Inconsistent spacing, ad-hoc components, no shared logic. Every designer was working from their own version of the truth and every developer was filling in the gaps on their own.
After
Built from the same parts, speaking the same visual language. Every component intentional, every spacing decision documented, and every developer working from the same file with confidence.
Billing and Subscriptions
A real-world example of the design system in action. Multiple subscription states, usage indicators, status badges, and action buttons all built from the same components, maintaining visual consistency across a complex and information-dense page.
Plan Details
With the design system in place, a page this complex becomes manageable. Four subscription tiers, granular pricing breakdowns, and a live summary panel all built from the same components and holding together visually no matter how much information is on screen.
Design Solutions
Atomic Templates, Before and After
When atoms, molecules, and organisms come together, you don’t just get consistency. You get speed. The team could spin up new pages way faster because all the decisions were already made.
Before
Inconsistent spacing, ad-hoc components, no shared logic. Every designer was working from their own version of the truth and every developer was filling in the gaps on their own.
After
Built from the same parts, speaking the same visual language. Every component intentional, every spacing decision documented, and every developer working from the same file with confidence.
Billing and Subscriptions
A real-world example of the design system in action. Multiple subscription states, usage indicators, status badges, and action buttons all built from the same components, maintaining visual consistency across a complex and information-dense page.
Plan Details
With the design system in place, a page this complex becomes manageable. Four subscription tiers, granular pricing breakdowns, and a live summary panel all built from the same components and holding together visually no matter how much information is on screen.
Design Solutions
Atomic Templates, Before and After
When atoms, molecules, and organisms come together, you don’t just get consistency. You get speed. The team could spin up new pages way faster because all the decisions were already made.
Before
Inconsistent spacing, ad-hoc components, no shared logic. Every designer was working from their own version of the truth and every developer was filling in the gaps on their own.
After
Built from the same parts, speaking the same visual language. Every component intentional, every spacing decision documented, and every developer working from the same file with confidence.
Billing and Subscriptions
A real-world example of the design system in action. Multiple subscription states, usage indicators, status badges, and action buttons all built from the same components, maintaining visual consistency across a complex and information-dense page.
Plan Details
With the design system in place, a page this complex becomes manageable. Four subscription tiers, granular pricing breakdowns, and a live summary panel all built from the same components and holding together visually no matter how much information is on screen.
Conclusion
Impact and Efficiency Gains
Setup times dropped by up to 70%. But the real win was less obvious. Designers stopped second-guessing, and devs stopped asking which component version to use. The system let everyone move fast without breaking things.
If I did this again, I’d push for design tokens synced straight to code from day one. That way, what ships is as close to pixel-perfect as possible. That’s the next frontier.
The best design work is often the work that enables other work.
Conclusion
Impact and Efficiency Gains
Setup times dropped by up to 70%. But the real win was less obvious. Designers stopped second-guessing, and devs stopped asking which component version to use. The system let everyone move fast without breaking things.
If I did this again, I’d push for design tokens synced straight to code from day one. That way, what ships is as close to pixel-perfect as possible. That’s the next frontier.
The best design work is often the work that enables other work.
Conclusion
Impact and Efficiency Gains
Setup times dropped by up to 70%. But the real win was less obvious. Designers stopped second-guessing, and devs stopped asking which component version to use. The system let everyone move fast without breaking things.
If I did this again, I’d push for design tokens synced straight to code from day one. That way, what ships is as close to pixel-perfect as possible. That’s the next frontier.
The best design work is often the work that enables other work.
Conclusion
Impact and Efficiency Gains
Setup times dropped by up to 70%. But the real win was less obvious. Designers stopped second-guessing, and devs stopped asking which component version to use. The system let everyone move fast without breaking things.
If I did this again, I’d push for design tokens synced straight to code from day one. That way, what ships is as close to pixel-perfect as possible. That’s the next frontier.
Key Learnings
Design Systems in Action
A design system is only as good as the people who use it. Components matter, but so do naming, documentation, and structure. If someone can't find what they need in 30 seconds, something’s off.
Talking to developers before designing anything was the best decision I made on this project. Auditing what existed first meant I was solving real problems, not imaginary ones.
Key Learnings
Design Systems in Action
A design system is only as good as the people who use it. Components matter, but so do naming, documentation, and structure. If someone can't find what they need in 30 seconds, something’s off.
Talking to developers before designing anything was the best decision I made on this project. Auditing what existed first meant I was solving real problems, not imaginary ones.
Key Learnings
Design Systems in Action
A design system is only as good as the people who use it. Components matter, but so do naming, documentation, and structure. If someone can't find what they need in 30 seconds, something’s off.
Talking to developers before designing anything was the best decision I made on this project. Auditing what existed first meant I was solving real problems, not imaginary ones.
Key Learnings
Design Systems in Action
A design system is only as good as the people who use it. Components matter, but so do naming, documentation, and structure. If someone can't find what they need in 30 seconds, something’s off.
Talking to developers before designing anything was the best decision I made on this project. Auditing what existed first meant I was solving real problems, not imaginary ones.