/ Data Visualization or Visualize Data? /
/ Data Visualization or Visualize Data? /
/ Data Visualization or Visualize Data? /
00.0
CONTENTS
01.1
Introduction
-01-
01.1
Introduction
-02-
Why Report Matters?
Reports aren’t just numbers—they’re the bridge between raw data and actionable insight.
On our platform, customers depend on them to analyze trends, spot risks, and make decisions.
But dense tables and overly complex charts often create barriers, especially for non-technical stakeholders. This redesign set out to make reports intuitive, engaging, and inclusive—so both analysts and decision-makers could quickly understand and act on the data.
Precision or Storytelling?
As I worked through the redesign, I realized there are two fundamentally different ways to present data:
Data Visualization – Precision above all else. Every bar, bubble, and line is scaled exactly to reflect its value. Ideal for analytical dashboards with interactive tooltips, but in static reports, small values can become invisible and big ones overwhelming.
Visualizing Data – Story first. Simplifies scale to highlight patterns, relationships, and meaning. This approach favors readability and engagement, drawing on principles like Dual-Coding Theory and Gestalt grouping to make information memorable.
For static reports—where tooltips aren’t an option—I leaned into Visualizing Data. The goal: preserve the truth of the numbers, but make their story instantly clear.
From Bubbles to Barriers
A bubble graph seemed like a natural choice for our “Top Feeds Scanned” section—visually appealing and easy to scan.
But real-world data exposed two big problems:
Proportional bubble sizing led to extremes—tiny values were invisible, large values dominated, and similar values looked the same.
Brand color constraints made differentiation harder—our purple palette required up to eight gradient shades, but human vision struggles to distinguish close blue-violet tones.
The result: a graphic that looked good in theory, but in practice was cluttered, hard to interpret, and inaccessible for some users.
01.1
Introduction
-02-
Why Report Matters?
Reports aren’t just numbers—they’re the bridge between raw data and actionable insight.
On our platform, customers depend on them to analyze trends, spot risks, and make decisions.
But dense tables and overly complex charts often create barriers, especially for non-technical stakeholders. This redesign set out to make reports intuitive, engaging, and inclusive—so both analysts and decision-makers could quickly understand and act on the data.
Precision or Storytelling?
As I worked through the redesign, I realized there are two fundamentally different ways to present data:
Data Visualization – Precision above all else. Every bar, bubble, and line is scaled exactly to reflect its value. Ideal for analytical dashboards with interactive tooltips, but in static reports, small values can become invisible and big ones overwhelming.
Visualizing Data – Story first. Simplifies scale to highlight patterns, relationships, and meaning. This approach favors readability and engagement, drawing on principles like Dual-Coding Theory and Gestalt grouping to make information memorable.
For static reports—where tooltips aren’t an option—I leaned into Visualizing Data. The goal: preserve the truth of the numbers, but make their story instantly clear.
From Bubbles to Barriers
A bubble graph seemed like a natural choice for our “Top Feeds Scanned” section—visually appealing and easy to scan.
But real-world data exposed two big problems:
Proportional bubble sizing led to extremes—tiny values were invisible, large values dominated, and similar values looked the same.
Brand color constraints made differentiation harder—our purple palette required up to eight gradient shades, but human vision struggles to distinguish close blue-violet tones.
The result: a graphic that looked good in theory, but in practice was cluttered, hard to interpret, and inaccessible for some users.
-03-
02.1
Process
Craft a Conceptual Visual
Craft a Conceptual Visual
To fix this, I redesigned the graphic around clarity rather than strict proportionality:
Fixed Bubble Sizes – A limited range of small, medium, and large bubbles for visual balance.
Strategic Layout – Deliberately mixing sizes to avoid similar bubbles clustering.
Direct Number Labels – Embedding values inside bubbles so no legend scanning was needed.
Varied Text Size – Larger labels for higher-impact numbers.
Refined Color Palette – Reducing from 8 shades to 4 high-contrast colors for clear differentiation.
This shifted the chart from a mathematical diagram to a conceptual storytelling visual—retaining accuracy while improving readability.
To fix this, I redesigned the graphic around clarity rather than strict proportionality:
Fixed Bubble Sizes – A limited range of small, medium, and large bubbles for visual balance.
Strategic Layout – Deliberately mixing sizes to avoid similar bubbles clustering.
Direct Number Labels – Embedding values inside bubbles so no legend scanning was needed.
Varied Text Size – Larger labels for higher-impact numbers.
Refined Color Palette – Reducing from 8 shades to 4 high-contrast colors for clear differentiation.
This shifted the chart from a mathematical diagram to a conceptual storytelling visual—retaining accuracy while improving readability.
To fix this, I redesigned the graphic around clarity rather than strict proportionality:
Fixed Bubble Sizes – A limited range of small, medium, and large bubbles for visual balance.
Strategic Layout – Deliberately mixing sizes to avoid similar bubbles clustering.
Direct Number Labels – Embedding values inside bubbles so no legend scanning was needed.
Varied Text Size – Larger labels for higher-impact numbers.
Refined Color Palette – Reducing from 8 shades to 4 high-contrast colors for clear differentiation.
This shifted the chart from a mathematical diagram to a conceptual storytelling visual—retaining accuracy while improving readability.
To fix this, I redesigned the graphic around clarity rather than strict proportionality:
Fixed Bubble Sizes – A limited range of small, medium, and large bubbles for visual balance.
Strategic Layout – Deliberately mixing sizes to avoid similar bubbles clustering.
Direct Number Labels – Embedding values inside bubbles so no legend scanning was needed.
Varied Text Size – Larger labels for higher-impact numbers.
Refined Color Palette – Reducing from 8 shades to 4 high-contrast colors for clear differentiation.
This shifted the chart from a mathematical diagram to a conceptual storytelling visual—retaining accuracy while improving readability.
Making Reports Inclusive
Making Reports Inclusive
User research showed that while security analysts are the main audience, reports are often shared with executives, legal teams, and other non-technical roles.
One interviewee admitted they didn’t understand key terms like typosquatting, and struggled to interpret visual formats.
To address this, I added an inline glossary, divided into:
Platform-specific terms – For understanding Bolster’s own categories and processes.
Industry-standard terms – To explain common cybersecurity language.
This ensured that anyone, regardless of technical background, could confidently read and share the report.
User research showed that while security analysts are the main audience, reports are often shared with executives, legal teams, and other non-technical roles.
One interviewee admitted they didn’t understand key terms like typosquatting, and struggled to interpret visual formats.
To address this, I added an inline glossary, divided into:
Platform-specific terms – For understanding Bolster’s own categories and processes.
Industry-standard terms – To explain common cybersecurity language.
This ensured that anyone, regardless of technical background, could confidently read and share the report.
User research showed that while security analysts are the main audience, reports are often shared with executives, legal teams, and other non-technical roles.
One interviewee admitted they didn’t understand key terms like typosquatting, and struggled to interpret visual formats.
To address this, I added an inline glossary, divided into:
Platform-specific terms – For understanding Bolster’s own categories and processes.
Industry-standard terms – To explain common cybersecurity language.
This ensured that anyone, regardless of technical background, could confidently read and share the report.
To fix this, I redesigned the graphic around clarity rather than strict proportionality:
Fixed Bubble Sizes – A limited range of small, medium, and large bubbles for visual balance.
Strategic Layout – Deliberately mixing sizes to avoid similar bubbles clustering.
Direct Number Labels – Embedding values inside bubbles so no legend scanning was needed.
Varied Text Size – Larger labels for higher-impact numbers.
Refined Color Palette – Reducing from 8 shades to 4 high-contrast colors for clear differentiation.
This shifted the chart from a mathematical diagram to a conceptual storytelling visual—retaining accuracy while improving readability.
Beyond the Bubble Charts
Beyond the Bubble Charts
Simplified Color Usage – Moved from multiple ambiguous shades to consistent color coding with clear meaning.
Replaced Irregular Shapes – Swapped trapezoids and arrows for clean horizontal bar charts that make comparisons faster.
Readable Numbers – Abbreviated large values (e.g., 2.8M instead of 2,800,000) to improve scanning speed.
Trend Indicators – Added icons to show directional change for predictive context.
Simplified Color Usage – Moved from multiple ambiguous shades to consistent color coding with clear meaning.
Replaced Irregular Shapes – Swapped trapezoids and arrows for clean horizontal bar charts that make comparisons faster.
Readable Numbers – Abbreviated large values (e.g., 2.8M instead of 2,800,000) to improve scanning speed.
Trend Indicators – Added icons to show directional change for predictive context.
Simplified Color Usage – Moved from multiple ambiguous shades to consistent color coding with clear meaning.
Replaced Irregular Shapes – Swapped trapezoids and arrows for clean horizontal bar charts that make comparisons faster.
Readable Numbers – Abbreviated large values (e.g., 2.8M instead of 2,800,000) to improve scanning speed.
Trend Indicators – Added icons to show directional change for predictive context.
Simplified Color Usage – Moved from multiple ambiguous shades to consistent color coding with clear meaning.
Replaced Irregular Shapes – Swapped trapezoids and arrows for clean horizontal bar charts that make comparisons faster.
Readable Numbers – Abbreviated large values (e.g., 2.8M instead of 2,800,000) to improve scanning speed.
Trend Indicators – Added icons to show directional change for predictive context.
02.1
Process
-04-
02.2
Design Notes
-05-
03.1
Impact
-06-
The redesign:
Improved comprehension for both technical and non-technical readers.
Reduced color confusion and improved visual accessibility.
Made reports faster to scan while retaining the necessary depth for analysis.
The redesign:
Improved comprehension for both technical and non-technical readers.
Reduced color confusion and improved visual accessibility.
Made reports faster to scan while retaining the necessary depth for analysis.
Takeaway: In static reports, perfect proportional scaling isn’t always the best choice. Sometimes the clearest way to tell the truth is to bend it just enough so everyone can see it.
03.2
Design Showcase
-07-
03.3
Cover Aesthetics
-08-
03.3
Cover Aesthetics
-08-
Go Back
Data Visualization or Visualize Data?
Go Back
Visualize Data?