Usage Stats
Product Designer
Web Data Extraction
Data is only useful if you can actually understand it. Zyte's engineers and developers were sitting on top of rich usage data including requests, costs, outputs, and features, but had no real way to read it at a glance. I designed a dashboard that turned raw numbers into something you could act on. The kind of tool where you open it, scan it for 30 seconds, and know exactly what's going on.
Usage Stats
Product Designer
Web Data Extraction
Data is only useful if you can actually understand it. Zyte's engineers and developers were sitting on top of rich usage data including requests, costs, outputs, and features, but had no real way to read it at a glance. I designed a dashboard that turned raw numbers into something you could act on. The kind of tool where you open it, scan it for 30 seconds, and know exactly what's going on.
Usage Stats
Product Designer
Web Data Extraction
Zyte is the original and best web data extraction platform. I designed a dashboard for web extraction engineers and developers to understand their usage and requests through data visualization.
Usage Stats
Product Designer
Web Data Extraction
Data is only useful if you can actually understand it. Zyte's engineers and developers were sitting on top of rich usage data including requests, costs, outputs, and features, but had no real way to read it at a glance. I designed a dashboard that turned raw numbers into something you could act on. The kind of tool where you open it, scan it for 30 seconds, and know exactly what's going on.
3
Chart types designed
Multi
Filter dimensions
Figma
Primary tool
2022
Year
3
Chart types designed
Multi
Filter dimensions
Figma
Primary tool
2022
Year
3
Chart types designed
Multi
Filter dimensions
Figma
Primary tool
2022
Year
Challenge
Too Much Data, Not Enough Clarity
The challenge with dashboards isn't adding features. It's knowing what to leave out. The dataset here was large, multi-dimensional, and meant for technical users who needed to slice it different ways depending on what they were investigating.
Challenge
Too Much Data, Not Enough Clarity
The challenge with dashboards isn't adding features. It's knowing what to leave out. The dataset here was large, multi-dimensional, and meant for technical users who needed to slice it different ways depending on what they were investigating.
Challenge
Too Much Data, Not Enough Clarity
The challenge with dashboards isn't adding features. It's knowing what to leave out. The dataset here was large, multi-dimensional, and meant for technical users who needed to slice it different ways depending on what they were investigating.
Challenge
Too Much Data, Not Enough Clarity
The challenge with dashboards isn't adding features. It's knowing what to leave out. The dataset here was large, multi-dimensional, and meant for technical users who needed to slice it different ways depending on what they were investigating.
DESIGN PROCESS
How I Approached This Project
01
Competitive review
Studied existing dashboard patterns to understand conventions worth keeping.
02
Tech Lead collaboration
Mapped what the data could actually do before designing anything.
03
Data viz research
Chose chart types based on function, not aesthetics.
04
Gestalt and iterate
Applied visual principles and refined through feedback rounds.
DESIGN PROCESS
How I Approached This Project
01
Competitive review
Studied existing dashboard patterns to understand conventions worth keeping.
02
Tech Lead collaboration
Mapped what the data could actually do before designing anything.
03
Data viz research
Chose chart types based on function, not aesthetics.
04
Gestalt and iterate
Applied visual principles and refined through feedback rounds.
DESIGN PROCESS
How I Approached This Project
01
Competitive review
Studied existing dashboard patterns to understand conventions worth keeping.
02
Tech Lead collaboration
Mapped what the data could actually do before designing anything.
03
Data viz research
Chose chart types based on function, not aesthetics.
04
Gestalt and iterate
Applied visual principles and refined through feedback rounds.
DESIGN PROCESS
How I Approached This Project
01
Competitive review
Studied existing dashboard patterns to understand conventions worth keeping.
02
Tech Lead collaboration
Mapped what the data could actually do before designing anything.
03
Data viz research
Chose chart types based on function, not aesthetics.
04
Gestalt and iterate
Applied visual principles and refined through feedback rounds.
RESEARCH
Understanding the Landscape
Before designing anything, I reviewed existing dashboard patterns and competitor products to understand what was already out there. What were engineers used to seeing? What conventions were worth following, and where were the gaps worth closing?
This wasn't about copying. It was about making sure I wasn't solving a problem that had already been solved well elsewhere, and spotting the patterns that users already had mental models for.
Users scan before they read
Visual hierarchy needs to surface the most important information before anything else.
Context switching kills focus
Engineers needed all their data in one place, not spread across multiple views.
Filters need to feel intuitive
Multi-select logic had to be obvious without explanation or onboarding.
Data constraints shape design
What looks good in Figma doesn't always exist in the backend. Know the limits first.
RESEARCH
Understanding the Landscape
Before designing anything, I reviewed existing dashboard patterns and competitor products to understand what was already out there. What were engineers used to seeing? What conventions were worth following, and where were the gaps worth closing?
This wasn't about copying. It was about making sure I wasn't solving a problem that had already been solved well elsewhere, and spotting the patterns that users already had mental models for.
Users scan before they read
Visual hierarchy needs to surface the most important information before anything else.
Context switching kills focus
Engineers needed all their data in one place, not spread across multiple views.
Filters need to feel intuitive
Multi-select logic had to be obvious without explanation or onboarding.
Data constraints shape design
What looks good in Figma doesn't always exist in the backend. Know the limits first.
RESEARCH
Understanding the Landscape
Before designing anything, I reviewed existing dashboard patterns and competitor products to understand what was already out there. What were engineers used to seeing? What conventions were worth following, and where were the gaps worth closing?
This wasn't about copying. It was about making sure I wasn't solving a problem that had already been solved well elsewhere, and spotting the patterns that users already had mental models for.
Users scan before they read
Visual hierarchy needs to surface the most important information before anything else.
Context switching kills focus
Engineers needed all their data in one place, not spread across multiple views.
Filters need to feel intuitive
Multi-select logic had to be obvious without explanation or onboarding.
Data constraints shape design
What looks good in Figma doesn't always exist in the backend. Know the limits first.
RESEARCH
Understanding the Landscape
Before designing anything, I reviewed existing dashboard patterns and competitor products to understand what was already out there. What were engineers used to seeing? What conventions were worth following, and where were the gaps worth closing?
This wasn't about copying. It was about making sure I wasn't solving a problem that had already been solved well elsewhere, and spotting the patterns that users already had mental models for.
Users scan before they read
Visual hierarchy needs to surface the most important information before anything else.
Context switching kills focus
Engineers needed all their data in one place, not spread across multiple views.
Filters need to feel intuitive
Multi-select logic had to be obvious without explanation or onboarding.
Data constraints shape design
What looks good in Figma doesn't always exist in the backend. Know the limits first.
Collaborating With the Tech Lead
A dashboard is only as good as the data powering it. I worked closely with the Tech Lead early on to understand what the data could actually do, what was possible to surface, what needed to be calculated on the backend, and what was simply out of scope.
Those conversations saved me from designing features that looked great in Figma but couldn't exist in production. Understanding the data constraints first meant every design decision was grounded in what was real.
Research
Feature-based and user-focused questions combined to uncover both what users needed and why they needed it.
Collaborating With the Tech Lead
A dashboard is only as good as the data powering it. I worked closely with the Tech Lead early on to understand what the data could actually do, what was possible to surface, what needed to be calculated on the backend, and what was simply out of scope.
Those conversations saved me from designing features that looked great in Figma but couldn't exist in production. Understanding the data constraints first meant every design decision was grounded in what was real.
Research
Feature-based and user-focused questions combined to uncover both what users needed and why they needed it.
Collaborating With the Tech Lead
A dashboard is only as good as the data powering it. I worked closely with the Tech Lead early on to understand what the data could actually do, what was possible to surface, what needed to be calculated on the backend, and what was simply out of scope.
Those conversations saved me from designing features that looked great in Figma but couldn't exist in production. Understanding the data constraints first meant every design decision was grounded in what was real.
Collaborating With the Tech Lead
A dashboard is only as good as the data powering it. I worked closely with the Tech Lead early on to understand what the data could actually do, what was possible to surface, what needed to be calculated on the backend, and what was simply out of scope.
Those conversations saved me from designing features that looked great in Figma but couldn't exist in production. Understanding the data constraints first meant every design decision was grounded in what was real.
Research
Feature-based and user-focused questions combined to uncover both what users needed and why they needed it.
Design Solutions
Gestalt Principles in Practice
With the research done, I applied Gestalt principles throughout the interface to guide how users read and interact with the data.
The law of similarity shaped the filter bar. Buttons, dropdowns, and inputs look related so users can scan the toolbar without reading every label. Proximity grouped related controls together so the layout communicated hierarchy before anyone clicked anything. Colour was used deliberately to signal meaning, not decoration. Each cost type gets its own colour so users know what they're looking at before they read a single label.
Filter UI
Gestalt law of similarity groups buttons, dropdowns, and inputs so users scan without reading every label. Colour encodes cost type so users know what they're looking at before reading a single label. Multi-select filters let engineers cross-reference status, output, features, and metrics at once.
Design Solutions
Gestalt Principles in Practice
With the research done, I applied Gestalt principles throughout the interface to guide how users read and interact with the data.
The law of similarity shaped the filter bar. Buttons, dropdowns, and inputs look related so users can scan the toolbar without reading every label. Proximity grouped related controls together so the layout communicated hierarchy before anyone clicked anything. Colour was used deliberately to signal meaning, not decoration. Each cost type gets its own colour so users know what they're looking at before they read a single label.
Filter UI
Gestalt law of similarity groups buttons, dropdowns, and inputs so users scan without reading every label. Colour encodes cost type so users know what they're looking at before reading a single label. Multi-select filters let engineers cross-reference status, output, features, and metrics at once.
Design Solutions
Gestalt Principles in Practice
With the research done, I applied Gestalt principles throughout the interface to guide how users read and interact with the data.
The law of similarity shaped the filter bar. Buttons, dropdowns, and inputs look related so users can scan the toolbar without reading every label. Proximity grouped related controls together so the layout communicated hierarchy before anyone clicked anything. Colour was used deliberately to signal meaning, not decoration. Each cost type gets its own colour so users know what they're looking at before they read a single label.
Filter UI
Gestalt law of similarity groups buttons, dropdowns, and inputs so users scan without reading every label. Colour encodes cost type so users know what they're looking at before reading a single label. Multi-select filters let engineers cross-reference status, output, features, and metrics at once.
Design Solutions
Gestalt Principles in Practice
With the research done, I applied Gestalt principles throughout the interface to guide how users read and interact with the data.
The law of similarity shaped the filter bar. Buttons, dropdowns, and inputs look related so users can scan the toolbar without reading every label. Proximity grouped related controls together so the layout communicated hierarchy before anyone clicked anything. Colour was used deliberately to signal meaning, not decoration. Each cost type gets its own colour so users know what they're looking at before they read a single label.
Filter UI
Gestalt law of similarity groups buttons, dropdowns, and inputs so users scan without reading every label. Colour encodes cost type so users know what they're looking at before reading a single label. Multi-select filters let engineers cross-reference status, output, features, and metrics at once.
Design Solutions
Choosing the Right Chart Types
Every chart type on the dashboard was a deliberate decision.
Bar Graphs
High contrast colours let engineers gauge relative values instantly. No mental math required.
Line Charts
The connected line makes trends over time obvious in a way a bar chart simply cannot.
Circular Charts
People are drawn to circles. Used intentionally for an at-a-glance sense of aggregate data.
Design Solutions
Choosing the Right Chart Types
Every chart type on the dashboard was a deliberate decision.
Bar Graphs
High contrast colours let engineers gauge relative values instantly. No mental math required.
Line Charts
The connected line makes trends over time obvious in a way a bar chart simply cannot.
Circular Charts
People are drawn to circles. Used intentionally for an at-a-glance sense of aggregate data.
Design Solutions
Choosing the Right Chart Types
Every chart type on the dashboard was a deliberate decision.
Bar Graphs
High contrast colours let engineers gauge relative values instantly. No mental math required.
Line Charts
The connected line makes trends over time obvious in a way a bar chart simply cannot.
Circular Charts
People are drawn to circles. Used intentionally for an at-a-glance sense of aggregate data.
Design Solutions
Choosing the Right Chart Types
Every chart type on the dashboard was a deliberate decision.
Bar Graphs
High contrast colours let engineers gauge relative values instantly. No mental math required.
Line Charts
The connected line makes trends over time obvious in a way a bar chart simply cannot.
Circular Charts
People are drawn to circles. Used intentionally for an at-a-glance sense of aggregate data.
Design Solutions
Filter Logic – Letting Users Ask Their Own Questions
The filter system was one of the most complex parts of the project. Engineers needed to cross-reference multiple dimensions at once including status, output, features, metrics, and cost, and see the results update in real time. A single toggle changes the whole story. Non-cumulative mode shows what happened at each moment in time, useful for spotting a spike or a drop. Cumulative mode shows the running total, useful for tracking overall growth. A small control with a big impact on how the data reads.
The table view sits alongside the charts for when engineers need granular, row-by-row detail on a specific request. Not everything belongs in a chart. Sometimes you just need the raw data in front of you.
Toggle
Non-cumulative mode shows what happened at each moment in time. Useful for spotting a spike or a drop.
Filter Logic
Successful outputs, Actions and Scripts enabled, at or under $0.004 per request. A specific question, a specific answer.
Table View
Granular row-by-row detail for when engineers need to investigate a specific request. Not everything belongs in a chart.
Design Solutions
Filter Logic – Letting Users Ask Their Own Questions
The filter system was one of the most complex parts of the project. Engineers needed to cross-reference multiple dimensions at once including status, output, features, metrics, and cost, and see the results update in real time. A single toggle changes the whole story. Non-cumulative mode shows what happened at each moment in time, useful for spotting a spike or a drop. Cumulative mode shows the running total, useful for tracking overall growth. A small control with a big impact on how the data reads.
The table view sits alongside the charts for when engineers need granular, row-by-row detail on a specific request. Not everything belongs in a chart. Sometimes you just need the raw data in front of you.
Toggle
Non-cumulative mode shows what happened at each moment in time. Useful for spotting a spike or a drop.
Filter Logic
Successful outputs, Actions and Scripts enabled, at or under $0.004 per request. A specific question, a specific answer.
Table View
Granular row-by-row detail for when engineers need to investigate a specific request. Not everything belongs in a chart.
Design Solutions
Filter Logic – Letting Users Ask Their Own Questions
The filter system was one of the most complex parts of the project. Engineers needed to cross-reference multiple dimensions at once including status, output, features, metrics, and cost, and see the results update in real time. A single toggle changes the whole story. Non-cumulative mode shows what happened at each moment in time, useful for spotting a spike or a drop. Cumulative mode shows the running total, useful for tracking overall growth. A small control with a big impact on how the data reads.
The table view sits alongside the charts for when engineers need granular, row-by-row detail on a specific request. Not everything belongs in a chart. Sometimes you just need the raw data in front of you.
Toggle
Non-cumulative mode shows what happened at each moment in time. Useful for spotting a spike or a drop.
Filter Logic
Successful outputs, Actions and Scripts enabled, at or under $0.004 per request. A specific question, a specific answer.
Table View
Granular row-by-row detail for when engineers need to investigate a specific request. Not everything belongs in a chart.
Design Solutions
Filter Logic – Letting Users Ask Their Own Questions
The filter system was one of the most complex parts of the project. Engineers needed to cross-reference multiple dimensions at once including status, output, features, metrics, and cost, and see the results update in real time. A single toggle changes the whole story. Non-cumulative mode shows what happened at each moment in time, useful for spotting a spike or a drop. Cumulative mode shows the running total, useful for tracking overall growth. A small control with a big impact on how the data reads.
The table view sits alongside the charts for when engineers need granular, row-by-row detail on a specific request. Not everything belongs in a chart. Sometimes you just need the raw data in front of you.
Toggle
Non-cumulative mode shows what happened at each moment in time. Useful for spotting a spike or a drop.
Filter Logic
Successful outputs, Actions and Scripts enabled, at or under $0.004 per request. A specific question, a specific answer.
Table View
Granular row-by-row detail for when engineers need to investigate a specific request. Not everything belongs in a chart.
Iteration
Feedback and Refinement
The dashboard went through multiple rounds of feedback with the Tech Lead and developers before it felt right. Early versions had too many controls visible at once. Filter interactions that seemed logical to me weren't obvious to the people actually using the data.
Each round of feedback tightened the layout, simplified the filter logic, and made the default view more immediately useful. The goal was always the same: open the dashboard, understand what's happening, take action. Everything that got in the way of that got cut or moved.
Iteration
Feedback and Refinement
The dashboard went through multiple rounds of feedback with the Tech Lead and developers before it felt right. Early versions had too many controls visible at once. Filter interactions that seemed logical to me weren't obvious to the people actually using the data.
Each round of feedback tightened the layout, simplified the filter logic, and made the default view more immediately useful. The goal was always the same: open the dashboard, understand what's happening, take action. Everything that got in the way of that got cut or moved.
Iteration
Feedback and Refinement
The dashboard went through multiple rounds of feedback with the Tech Lead and developers before it felt right. Early versions had too many controls visible at once. Filter interactions that seemed logical to me weren't obvious to the people actually using the data.
Each round of feedback tightened the layout, simplified the filter logic, and made the default view more immediately useful. The goal was always the same: open the dashboard, understand what's happening, take action. Everything that got in the way of that got cut or moved.
Iteration
Feedback and Refinement
The dashboard went through multiple rounds of feedback with the Tech Lead and developers before it felt right. Early versions had too many controls visible at once. Filter interactions that seemed logical to me weren't obvious to the people actually using the data.
Each round of feedback tightened the layout, simplified the filter logic, and made the default view more immediately useful. The goal was always the same: open the dashboard, understand what's happening, take action. Everything that got in the way of that got cut or moved.
Conclusion
From Data to Decisions
Dashboard design taught me that restraint is a skill. Every filter, every chart type, every label is a decision, and the wrong ones add cognitive load instead of removing it. Working directly with the Tech Lead and developers pushed me to understand the data before designing anything. The best visual decisions came straight from those conversations. Knowing what the data could and couldn't do meant I was never designing in a vacuum.
The result was a tool that technical users could actually trust. Because it was built around how they think, not just what looked good on screen.
01
Restraint is a skill. Leave out everything that doesn't serve the user's immediate goal.
02
Understand the data before designing. Constraints aren't blockers, they're the brief.
03
Visual principles like Gestalt aren't decoration. They're functional decisions that reduce cognitive load.
04
Collaboration makes better data products. The best design decisions came from conversations with the Tech Lead, not from designing alone.
Conclusion
From Data to Decisions
Dashboard design taught me that restraint is a skill. Every filter, every chart type, every label is a decision, and the wrong ones add cognitive load instead of removing it. Working directly with the Tech Lead and developers pushed me to understand the data before designing anything. The best visual decisions came straight from those conversations. Knowing what the data could and couldn't do meant I was never designing in a vacuum.
The result was a tool that technical users could actually trust. Because it was built around how they think, not just what looked good on screen.
01
Restraint is a skill. Leave out everything that doesn't serve the user's immediate goal.
02
Understand the data before designing. Constraints aren't blockers, they're the brief.
03
Visual principles like Gestalt aren't decoration. They're functional decisions that reduce cognitive load.
04
Collaboration makes better data products. The best design decisions came from conversations with the Tech Lead, not from designing alone.
Conclusion
From Data to Decisions
Dashboard design taught me that restraint is a skill. Every filter, every chart type, every label is a decision, and the wrong ones add cognitive load instead of removing it. Working directly with the Tech Lead and developers pushed me to understand the data before designing anything. The best visual decisions came straight from those conversations. Knowing what the data could and couldn't do meant I was never designing in a vacuum.
Restraint is a skill. Leave out everything that doesn't serve the user's immediate goal.
Understand the data before designing. Constraints aren't blockers, they're the brief.
Visual principles like Gestalt aren't decoration. They're functional decisions that reduce cognitive load.
Collaboration makes better data products. The best design decisions came from conversations with the Tech Lead, not from designing alone.
Conclusion
From Data to Decisions
Dashboard design taught me that restraint is a skill. Every filter, every chart type, every label is a decision, and the wrong ones add cognitive load instead of removing it. Working directly with the Tech Lead and developers pushed me to understand the data before designing anything. The best visual decisions came straight from those conversations. Knowing what the data could and couldn't do meant I was never designing in a vacuum.
The result was a tool that technical users could actually trust. Because it was built around how they think, not just what looked good on screen.
Restraint is a skill. Leave out everything that doesn't serve the user's immediate goal.
Understand the data before designing. Constraints aren't blockers, they're the brief.
Visual principles like Gestalt aren't decoration. They're functional decisions that reduce cognitive load.
Collaboration makes better data products. The best design decisions came from conversations with the Tech Lead, not from designing alone.