Data Visualization
Data Visualization
Shipped 2025
Shipped 2025
Adobe Venn
Adobe Venn
Helping users analyze overlapping data segments through Adobe Analytics' interactive Venn visualization.
Role:
Product Design, User Research, Interaction Design
Team:
2 Designers, 1 PM, 2 Devs
Timeline:
January 2025 - June 2025
Outcomes
Outcomes
Shipped a Venn visualization tool for 100,000+ users
Shipped a Venn visualization tool for 100,000+ users
Shipped a Venn visualization tool for 100,000+ users
With design system alignment and integration into Adobe Analytics and Customer Journey Analytics.
With design system alignment and integration into Adobe Analytics and Customer Journey Analytics.
With design system alignment and integration into Adobe Analytics and Customer Journey Analytics.
Streamlined dev-design onboarding time by 20%
Streamlined dev-design onboarding time by 20%
Streamlined dev-design onboarding time by 20%
Through UI specifications, code documentation, and use case examples.
Through UI specifications, code documentation, and use case examples.
Through UI specifications, code documentation, and use case examples.
Increased average task completion rate by 50%
Increased average task completion rate by 80%
From initial concept testing to final validation.
Increased average task completion rate by 50%
From initial concept testing to handoff.
From initial concept testing to handoff.
Context
Context
React Spectrum Charts is Adobe's charting library used across Adobe Analytics and Customer Journey Analytics platforms, serving B2B and B2C customers for analyzing complex customer data.
Summary:
React Spectrum Charts is Adobe's charting library used across Adobe Analytics and Customer Journey Analytics platforms, serving B2B and B2C customers for analyzing complex customer data.
Summary:
⭐️
⭐️
Context —> Library serving Adobe Analytics & Customer Journey Analytics
Context —> Library serving Adobe Analytics & Customer Journey Analytics
⭐️
⭐️
Gap —> No visualization component for overlapping data relationships
Gap —> No visualization component for overlapping data relationships
⭐️
⭐️
Problem —> Teams forced to export data or use external tools, breaking design system consistency
Problem —> Teams forced to export data or use external tools, breaking design system consistency
⭐️
⭐️
Solution —> Developed a native Venn diagram component
Solution —> Developed a native Venn diagram component
Problem Statement
Problem Statement
How might we enable overlap visualization in React Spectrum Charts so teams can analyze data intersections without leaving Adobe's design system ecosystem?
How might we enable overlap visualization in React Spectrum Charts so teams can analyze data intersections without leaving Adobe's design system ecosystem?
Research
Research
Surveys and Interviews
Surveys and Interviews
I conducted 8 semi-structured interviews to understand user's current workflows with data visualization tools.
Participants included analysts, designers, and product managers from the Adobe Analytics team, and external developers who have experience with data visualization libraries.
Here's what I found:
I conducted 8 semi-structured interviews to understand user's current workflows with data visualization tools.
Participants included analysts, designers, and product managers from the Adobe Analytics team, and external developers who have experience with data visualization libraries.
Here's what I found:
Motivation
Analytical tool to compare datasets
Presenting findings and insights
Creating aesthetically pleasing data visualization
Understanding complex relationships and patterns
Needs
Data that can autofill
Connect and summarize relationships easily
Communicate with both analyst and non analyst
Quantitative data can be scaled to visualize disparity.
Easy integration with presentation tools.
More intuitive documentation with real-world examples, not just syntax explanations.
Pain Points
Switching between tools because no single tool meets all their needs
Scaling the intersection space proportionally based on data input is difficult
Having to manually input all the data again if they need changes
Documentation is hard to navigate, unclear, and lacks practical examples
Legends and axes are problematic; complex placement, sizing, and management
Surveys and Interviews
We conducted several semi-structured interviews with Analysts, Designers, Developers, and non-professionals to understand their motivation, needs, and frustrations regarding Venn Diagram.
What We Found
Motivation
Analytical tool to compare datasets
Presenting findings and insights
Creating aesthetically pleasing data visualization
Understanding complex relationships and patterns
Needs
Data that can autofill
Connect and summarize relationships easily
Communicate with both analyst and non analyst
Quantitative data can be scaled to visualize disparity.
Easy integration with presentation tools.
More intuitive documentation with real-world examples, not just syntax explanations.
Pain Points
Switching between tools because no single tool meets all their needs
Scaling the intersection space proportionally based on data input is difficult
Having to manually input all the data again if they need changes
Documentation is hard to navigate, unclear, and lacks practical examples
Legends and axes are problematic; complex placement, sizing, and management
Motivation
Presenting findings and insights
Analytical tool to compare datasets
Creating aesthetically pleasing data visualization
Understanding complex relationships and patterns
Needs
Data that can autofill
Connect and summarize relationships easily
Communicate with both analyst and non analyst
Documentation with real-world examples, not just syntax explanations
Easy integration with presentation tools
Quantitative data can be scaled to visualize disparity
Pain Points
Switching between tools because no single tool meets all their needs
Having to manually input all the data again if they need changes
Legends and axes are problematic; complex placement, sizing, and management
Scaling the intersection space proportionally based on data input is difficult
Documentation is hard to navigate, unclear, and lacks practical examples
Competitive Analysis
Competitive Analysis
I analyzed 15+ existing Venn diagram tools using SWOT analysis to identify gaps in the market and opportunities for differentiation within Adobe's ecosystem.
I analyzed 15+ existing Venn diagram tools using SWOT analysis to identify gaps in the market and opportunities for differentiation within Adobe's ecosystem.
Competitors include: Google Analytics, Microsoft Smart Art, Canva, Lucid Charts, and more.
Competitors include: Google Analytics, Microsoft Smart Art, Canva, Lucid Charts, and more.
Strengths
Can do numerical calculations
Real-time interface when changing data
Integration into web apps and design system
Weaknesses
Unintuitive interaction, such as dragging filters around.
Can only represents binary relationship.
Unreadable design due to complex data and overlaps.
Opportunities
Quantitative data representation and analysis
More interactive and actionable properties
AI & Smart Data-Driven Enhancements
Threats
Struggle with large datasets.
Other data visualization that are alternatives
Scope and timeline of the project
Personas
Personas
Based on interview insights, I created three primary personas:
Based on interview insights, I created three primary personas:
⭐️
⭐️
Brad —> Design flexibility without coding
Brad —> Design flexibility without coding
⭐️
⭐️
Carlos —> Fast implementation with reliable documentation
Carlos —> Fast implementation with reliable documentation
⭐️
⭐️
Avery —> Clear communication of overlaps to executives
Avery —> Clear communication of overlaps to executives
These personas guided our feature prioritization and interaction design decisions.
These personas guided our feature prioritization and interaction design decisions.
User Journey Map
User Journey Map
We created journey maps based on the three personas to identify gaps in the workflow, such as data filtering, documentation, and more.
We created journey maps based on the three personas to identify gaps in the workflow, such as data filtering, documentation, and more.
Designers Workflow
Designers Workflow
Analysts Workflow
Analysts Workflow
Engineers Workflow
Engineers Workflow
Understanding the Solution
Understanding the Solution
Our research revealed three critical pain points that shaped our solution approach:
Our research revealed three critical pain points that shaped our solution approach:
⭐️
⭐️
Information Overload —> Interaction Solutions
Information Overload —> Interaction Solutions
⭐️
⭐️
Juggling Different Tools —> Documentation Solutions
Juggling Different Tools —> Documentation Solutions
⭐️
⭐️
Brand Inconsistency —> Customization Solutions
Brand Inconsistency —> Customization Solutions
Documentations
Documentations
Animation tutorial to visualize how the tool is being used
Animation tutorial to visualize how the tool is being used
Use case of diagrams with real-world examples
Use case of diagrams with real-world examples
Adobe’s Spectrum 2 standard for documentation
Adobe’s Spectrum 2 standard for documentation
Interactions
Interactions
Hover, Focus, and Select State
Hover, Focus, and Select State
Smart filtering tools to help compare variables
Smart filtering tools to help compare variables
Data can be pasted directly and shown after setting the overlap
Data can be pasted directly and shown after setting the overlap
Option to set or automatically change circle size relative to dataset size
Option to set or automatically change circle size relative to dataset size
Customization
Customization
Custom font, colors, and styles
Custom font, colors, and styles
Premade palette for data visualizations and save as template
Premade palette for data visualizations and save as template
Option to save it as png, svg, or jpg
Option to save it as png, svg, or jpg
Modify the tooltips & the legend of the chart
Modify the tooltips & the legend of the chart
Key Features
Key Features
To determine feature priority, I assessed each potential feature against our timeline, project scope, technical feasibility, and most importantly, how well it solved the specific user problems we identified.
To determine feature priority, I assessed each potential feature against our timeline, project scope, technical feasibility, and most importantly, how well it solved the specific user problems we identified.
Must Have
Must Have
Find intersection points for all datasets provided
Find intersection points for all datasets provided
Hover state, focus state, exit state
Hover state, focus state, exit state
RSC Api when coding the Venn
RSC Api when coding the Venn
Documentation with real-world examples, not just syntax explanations
More intuitive documentation with real-world examples, not just syntax explanations.
Responsive to the type of data input ( for quantitative data)
Responsive to the type of data input ( for quantitative data)
Should Have
Should Have
Customizable fonts, colors, shapes, style
Customizable fonts, colors, shapes, style
Option to set circle size relative to dataset size
Option to set circle size relative to dataset size
Smart filtering tools to help compare variables
Smart filtering tools to help compare variables
Save as templates for future use
Save as templates for future use
Nice to Have
Nice to Have
Export diagrams to svg/png
Export diagrams to svg/png
AI assistant to create chart
AI assistant to create chart
User Testing
User Testing
Based on feedback from user testing and developers' concerns in technical implementation, I made some changes on the design:
Based on feedback from user testing and developers' concerns in technical implementation, I made some changes on the design:
Initial Concept
Initial Concept
The initial concept is a Venn tool with actionable tooltips, clean legend, and multi‑select for side-by-side comparison
The initial concept is a Venn tool with actionable tooltips, clean legend, and multi‑select for side-by-side comparison
Iteration 1: Color Palette Update
I adapted our diagram colors to the new Spectrum 2 system while maintaining text contrast and accessibility.
Iteration 1: Color Palette Update
I adapted our diagram colors to the new Spectrum 2 system while maintaining text contrast and accessibility.
Iteration 2: Simplifying Tooltip Complexity
Iteration 2: Simplifying Tooltip Complexity
Iteration 2: Simplifying Tooltip Complexity
⭐️
⭐️
Replaced mini charts with key stats to improve readability
Replaced mini charts with key stats to improve readability
⭐️
⭐️
Clear labeling of overlaps with color blocks to differentiate
Clear labeling of overlaps with color blocks to differentiate
⭐️
⭐️
One clear CTA that leads to deeper insights
One clear CTA that leads to deeper insights
5/5 users successfully identified overlapping data segments
Iteration 3: AI Insights on Hover (Future Concept)
I proposed adding AI-written summary on hover to give quick, easy-to-understand explanations of the data, especially for non-technical audiences.
While AI integration wasn’t in scope, it’s serves as a future improvement to make complex information simpler and more engaging.
Iteration 3: AI Insights on Hover (Future Concept)
I proposed adding AI-written summary on hover to give quick, easy-to-understand explanations of the data, especially for non-technical audiences.
While AI integration wasn’t in scope, it’s serves as a future improvement to make complex information simpler and more engaging.
Iteration 4: Reducing Cognitive Load in Legend
What I changed:
Iteration 4: Reducing Cognitive Load in Legend
What I changed:
⭐️
⭐️
Only display primary categories
Only display primary categories
⭐️
⭐️
Replace rectangle color blocks with circles for visual consistency
Replace rectangle color blocks with circles for visual consistency
This reduced cognitive load and made the diagram more approachable.
This reduced cognitive load and made the diagram more approachable.
5/5 users understood the context presented in the legend
Iteration 5: Balancing Technical Complexities
I simplified the interaction model using a consistent outline instead of custom shapes to better align with user expectations and data logic, while addressing the library limitations.
Iteration 5: Balancing Technical Complexities
I simplified the interaction model using a consistent outline instead of custom shapes to better align with user expectations and data logic, while addressing the library limitations.
Iteration 5: Balancing Technical Complexities
I simplified the interaction model using a consistent outline instead of custom shapes to better align with user expectations and data logic, while addressing the library limitations.
Final Solution
Final Solution
After doing multiple rounds of user testing and validation, we came up with key solutions for maximizing insights and experience of a Venn diagram.
After doing multiple rounds of user testing and validation, we came up with key solutions for maximizing insights and experience of a Venn diagram.
Default State
Default State
Evenly sized circles, simple and clean look.
Evenly sized circles, simple and clean look.
Hover State
Hover State
Gves quick preview + customizable key insight tooltip for storytelling.
Gves quick preview + customizable key insight tooltip for storytelling.
Selection State
Selection State
Allow users to click on areas to gain deeper insight and an optional drill-down into user attributes to break down the data by dimension.
Allow users to click on areas to gain deeper insight and an optional drill-down into user attributes to break down the data by dimension.
Focus State
Focus State
For keyboard navigation ("tab" key to navigate and "return" to select circle), improving accessibility.
For keyboard navigation ("tab" key to navigate and "return" to select circle), improving accessibility.
Autoscale
Autoscale
Dynamically adjusts the proportion of circles based on the data size. This was especially helpful to build a scalable visualization without the need for manual adjustments.
Dynamically adjusts the proportion of circles based on the data size. This was especially helpful to build a scalable visualization without the need for manual adjustments.
When the intersection between circles is small, users can click the "Intersections" button and a pop-up will appear to provide a detailed breakdown of the data.
When the intersection between circles is small, users can click the "Intersections" button and a pop-up will appear to provide a detailed breakdown of the data.
Dark Mode
Dark Mode
The dark mode is used mainly for reducing eye strain and aligns with modern aesthetic preferences.
The dark mode is used mainly for reducing eye strain and aligns with modern aesthetic preferences.
Documentation & Handoff
Documentation & Handoff
To ensure smooth developer alignment and onboarding, I built Figma usage guidelines and UI specs for the component library.
Here’s a sneak peek of the resources I created to support consistent implementation across teams:
To ensure smooth developer alignment and onboarding, I built Figma usage guidelines and UI specs for the component library.
Here’s a sneak peek of the resources I created to support consistent implementation across teams:
This documentation streamlined dev–design handoff by 20% during user testing
This documentation streamlined dev–design handoff by 20% during user testing
Usage Guideline
Mini Design System
What I Learned
What I Learned
🧠 Flexibility as a key
🧠 Flexibility as a key
A week before the handoff, devs said the library couldn’t support our interaction design. So I worked closely with the devs to reworked it. That experience taught me to stay flexible and work under pressure.
A week before the handoff, devs said the library couldn’t support our interaction design. So I worked closely with the devs to reworked it. That experience taught me to stay flexible and work under pressure.
A week before the handoff, devs said the library couldn’t support our interaction design. So I worked closely with the devs to reworked it. That experience taught me to stay flexible and work under pressure.
⏱️ Scalability in iterations
⏱️ Scalability in iterations
As I was working with an evolving design system, I had to tweak the design to stay aligned without losing its intent. Through this, I gained a deeper understanding of scalability and how features naturally evolve in real-world use.
As I was working with an evolving design system, I had to tweak the design to stay aligned without losing its intent. Through this, I gained a deeper understanding of scalability and how features naturally evolve in real-world use.
As I was working with an evolving design system, I had to tweak the design to stay aligned without losing its intent. Through this, I gained a deeper understanding of scalability and how features naturally evolve in real-world use.
Storytelling
DESIGNING WITH LOGIC, MOTIVATED BY IMPACT, BUILDING WITH
Storytelling
DESIGNING WITH LOGIC, MOTIVATED BY IMPACT, BUILDING WITH
