Adobe Venn
Adobe Venn
Designing Adobe’s Next-Gen Venn Diagram Visualization by turning complex data overlaps into clear, interactive tools.
Role:
Product Design, User Research, Interaction Design
Team:
2 Designers, 1 PM, 2 Devs
Timeline:
January 2025 - June 2025
The Problem
The Problem
Non-technical users (like designers and PMs) struggled to interpret overlap relationships in data due to limited tools in React Spectrum Charts (RSC) 1.
There was no scalable way to visualize and analyze overlapping relationships, leading to misalignment in data-driven decisions.
Non-technical users (like designers and PMs) struggled to interpret overlap relationships in data due to limited tools in React Spectrum Charts (RSC) 1.
There was no scalable way to visualize and analyze overlapping relationships, leading to misalignment in data-driven decisions.
React Spectrum Charts is a declarative library that provides a set of React components to create charts that follow Adobe's Spectrum design system.
Problem Statement
Problem Statement
How might analysts and non-technical stakeholders use the Venn Diagram component within React Spectrum Charts so that they can make informed decisions by understanding key data intersections and differences?
How might analysts and non-technical stakeholders use the Venn Diagram component within React Spectrum Charts so that they can make informed decisions by understanding key data intersections and differences?
Research
Research
Surveys and Interviews
Surveys and Interviews
I conducted several semi-structured interviews with Analysts, Designers, and non-professionals to understand their motivation, needs, and frustrations regarding Venn Diagram.
Here's what I found:
I conducted several semi-structured interviews with Analysts, Designers, and non-professionals to understand their motivation, needs, and frustrations regarding Venn Diagram.
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 used SWOT analysis to determine strengths, weaknesses, opportunities, and threats in 10+ competitors to identify potential areas for differentiation within the market.
I used SWOT analysis to determine strengths, weaknesses, opportunities, and threats in 10+ competitors to identify potential areas for differentiation within the market.
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
After synthesizing our research findings, I created two personas: Designer (Brad) and Analyst (Avery), as guidance in shaping the product direction.
After synthesizing our research findings, I created two personas: Designer (Brad) and Analyst (Avery), as guidance in shaping the product direction.
User Journey Map
User Journey Map
We created journey maps based on the two personas to uncover friction points and identify users' mental models.
We created journey maps based on the two personas to uncover friction points and identify users' mental models.
Designers Workflow
Designers Workflow
Analysts Workflow
Analysts Workflow
Understanding the Solution
Based on the insights, our goal was to focus on visual clarity, interaction logic, and component flexibility.
Based on the insights, our goal was to focus on visual clarity, interaction logic, and component flexibility.
I used affinity mapping to surface recurring themes and needs, and these insights were then categorized into three areas.
I used affinity mapping to surface recurring themes and needs, and these insights were then categorized into three areas.
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
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
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
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
Design
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
Iterations and User Testing
Iterations and User Testing
Based on feedback and a few technical surprises—here’s how the diagram evolved:
Based on feedback and a few technical surprises, here’s how the diagram evolved:
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
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
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 Designs
Final Designs
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
This feature gives quick preview + customizable key insight tooltip for storytelling.
This feature gives quick preview + customizable key insight tooltip for storytelling.
Selection State
Selection State
This feature 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.
This feature 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
This feature 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.
This feature 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
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.
Considerations
Considerations
While our concepts are strong and innovative, there are still some considerations as we were asking HMW questions throughout the process.
While our concepts are strong and innovative, there are still some considerations as we were asking HMW questions throughout the process.
⭐️
⭐️
Generative AI summary could be challenging to implement
Generative AI summary could be challenging to implement
⭐️
⭐️
Different needs of information visualization, especially when dealing with quantitative data.
Different needs of information visualization, especially when dealing with quantitative data.
⭐️
⭐️
Scope of the project vs user demands
Scope of the project vs user demands
Impact
Impact
Throughout the project, I led iterative design reviews with senior staffs, securing full implementation approval and integration into their GitHub repository.
Throughout the project, I led iterative design reviews with senior staffs, securing full implementation approval and integration into their GitHub repository.
At the end, here's what we achieved:
At the end, here's what we achieved:
⭐️
A new Venn visualization tool that enhances how users analyze and present overlapping data
A new Venn visualization tool that enhances how users analyze and present overlapping data
⭐️
Increased average task completion rate by 80% from initial concept testing to final validation
Increased average task completion rate by 80% from initial concept testing to final validation
⭐️
Reduced onboarding time by 20% through comprehensive design guidelines, code documentation, and use case examples
Reduced onboarding time by 20% through comprehensive design guidelines, code documentation, and use case examples
⭐️
Full alignment with the Spectrum 2 design system and stakeholder approval across all design review sessions
Full alignment with the Spectrum 2 design system and stakeholder approval across all design review sessions
What I Learned
What I Learned
🧠 Flexibility as a key
🧠 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
⏱️ Scalability in iterations
As I was working with an evolving design system, I had to tweaked the design to stay aligned without losing its intent. Through this, I gained a deeper understanding of scalability and how features naturally evolve once in real-world use.
As I was working with an evolving design system, I had to tweaked the design to stay aligned without losing its intent. Through this, I gained a deeper understanding of scalability and how features naturally evolve once in real-world use.
As I was working with an evolving design system, I had to tweaked the design to stay aligned without losing its intent. Through this, I gained a deeper understanding of scalability and how features naturally evolve once in real-world use.
Storytelling
Designing with logic, motivated by detail, building with heart.
Storytelling
Designing with logic, motivated by detail, building with heart.
