ADOBE VENN
ADOBE VENN
Designed a reusable Venn diagram component for Adobe’s enterprise system library. This component was built to serve B2B SaaS teams working with overlapping data categories—ensuring flexibility, accessibility, and edge-case support across teams.
ROLE
UX Design
UX Research
Interaction Design
ROLE
UX Design
UX Research
Interaction Design
TEAM
2 Designers
1 PM
2 Developers
TEAM
2 Designers
1 PM
2 Developers
TIMELINE
January 2025 - June 2025
TIMELINE
January 2025 - June 2025
The Problem
The Problem
Non-analyst users (e.g., designers, PMs) struggled to interpret overlap relationships in data due to limited visual tools in RSC 1. There was no scalable, accessible, and branded way to show overlapping relationships—leading to misalignment in data-driven decisions.
Non-analyst users (e.g., designers, PMs) struggled to interpret overlap relationships in data due to limited visual tools in RSC 1. There was no scalable, accessible, and branded way to show overlapping relationships—leading to misalignment in data-driven decisions.
Why Is It Important?
Why Is It Important?
While quantitative data on the impact of Venn diagrams is limited, their qualitative benefits are well-recognized across industries
While quantitative data on the impact of Venn diagrams is limited, their qualitative benefits are well-recognized across industries
Facilitating
cost reduction and increased efficiency in supply chain management.
cost reduction and increased efficiency in supply chain management.
Identifying
shared characteristics among customer segments, informing targeted marketing strategies.
shared characteristics among customer segments, informing targeted marketing strategies.
Aligning
design, technology, and user experience, contributing to brand strategies in brands like Apple and Google.
design, technology, and user experience, contributing to brand strategies in brands like Apple and Google.
Problem Statement
Problem Statement
How might non-analysts 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 non-analysts use the Venn Diagram component within React Spectrum Charts so that they can make informed decisions by understanding key data intersections and differences?
Our Timeline
Our Timeline
I worked with a cross functional team of 5. The phase 1 of the project was focused on research and concept validation.
I worked with a cross functional team of 5. The phase 1 of the project was focused on research and concept validation.
Week 1-3
Week 4-6
Week 7-8
User Research
Literature Review, Competitive Analysis, Interviews, Surveys,
Define and Ideate
Affinity Mapping, Story boarding, Journey Mapping, Personas, Moodboarding
Validate
Prototyping, Usability Testing, Presentation, Iterating
Development
In Progress
Week 1-3
Week 4-6
Week 7-8
User Research
Literature Review, Market Research, Interviews, Surveys, Affinity Mapping
Ideation
Prioritization, Storyboarding, Journey Mapping, Personas, Moodboarding
Validation
Prototyping, Usability Testing, Presentation, Iteration
Development
Research
Research
Surveys and Interviews
Surveys and Interviews
We conducted several semi-structured interviews with Analysts, Designers, and non-professionals to understand their motivation, needs, and frustrations regarding Venn Diagram.
We conducted several semi-structured interviews with Analysts, Designers, and non-professionals to understand their motivation, needs, and frustrations regarding Venn Diagram.
What We Found
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
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
More intuitive 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
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
More intuitive 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
We used SWOT analysis to determine existing strengths, weaknesses, opportunity, and threats in 10+ competitor's, allowing us to identify potential areas for differentiation and strategic advantage within the market.
We used SWOT analysis to determine existing strengths, weaknesses, opportunity, and threats in 10+ competitor's, allowing us to identify potential areas for differentiation and strategic advantage within the market.
SWOT
Strengths
Can do numerical calculations
Real-time interface when changing data
Integration into web apps and
design system
Opportunities
Quantitative data representation and analysis
More interactive and actionable properties
AI & Smart Data-Driven Enhancements
Weaknesses
Unintuitive interaction, such as dragging filters around.
Can only represents binary relationship.
Unreadable design due to complex data and overlaps.
Threats
Struggle with large datasets.
Other data visualization that are alternatives
Scope and timeline of the project
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 conducting interviews and synthesizing our research findings, we created two key personas— Brad (Designer) and Avery (Analyst. These personas represent the primary user groups we aim to support and served as a compass in shaping the product direction.
After conducting interviews and synthesizing our research findings, we created two key personas— Brad (Designer) and Avery (Analyst. These personas represent the primary user groups we aim to support and served as a compass in shaping the product direction.
User Journey Map
User Journey Map
To better understand how our personas interact with data visualization tools in their day-to-day workflows, we created a journey map. This allowed us to uncover friction points and identify moments where a Venn component could provide clarity and impact.
To better understand how our personas interact with data visualization tools in their day-to-day workflows, we created a journey map. This allowed us to uncover friction points and identify moments where a Venn component could provide clarity and impact.
Designers Workflow
Designers Workflow
Ideation
Get dataset from analysts in csv format
Sketching what type of chart works best for the data
Clean data to work with
Out-of-scope
Data Manipulation
Plug data in Raw Graph
Filter data
Data input
Clear instructions on how to apply filters to data
Customization and Design
Accessing the Figma component
Customize shapes, color, and style
Documentation on how to set each parameter
Parameters on customizing interaction design (out-of-scope)
Communication
and Hand off
Learn about libraries' capability
Communicate with engineers of the viability of the design
Clear documentation
Action
Function
Analysts Workflow
Analysts Workflow
Discovery
View documentations
Compares it with existing tools like Excel, Tableau, or other libraries.
Documentations and use cases
Link to the github/download code
Adoption
Installs and configures the Venn diagram component
Loads data (e.g. product or financial reports)
npm installation with sample code snippets.
Hover state, focus state, exit state
Reading
Documentation
Referring to specific section when adding feature and navigating
Documentation on how to set each parameter
Customization +Exporting
Modifies style to match the company’s branding
Adjusts how intersections are displayed for better readability
Download the diagram once it looks ready to go
Export button in react
Action
Function
Sample Storyboards
Sample Storyboards
Understanding the Solution
Understanding the Solution
Based on our insights, we set out to design a solution that emphasizes visual clarity, interaction logic, and component flexibility. Here’s how we translated these needs:
Based on our insights, we set out to design a solution that emphasizes visual clarity, interaction logic, and component flexibility. Here’s how we translated these needs:
Affinity Mapping
Affinity Mapping
We used affinity mapping to surface recurring themes and needs. These insights were then categorized into three major opportunity areas: documentation, interaction patterns, and customization flexibility.
We used affinity mapping to surface recurring themes and needs. These insights were then categorized into three major opportunity areas: documentation, interaction patterns, and customization flexibility.
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
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
More intuitive 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 ( structures for qualitative/quantitative data)
Responsive to the type of data input ( structures for qualitative/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 the data visualization that users made for future use.
Save as templates for the data visualization that users made 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
Moodboard
Moodboard
To align our design with the sponsor, Adobe, we have to make sure that the typography, style, colors, and design systems are cohesive across all design iteration.
To align our design with the sponsor, Adobe, we have to make sure that the typography, style, colors, and design systems are cohesive across all design iteration.
Initial Concept
Initial Concept
The initial concept centered on making overlapping datasets easier to explore through an intuitive Venn diagram. We focused on creating actionable tooltips that surfaced key insights without overwhelming the user. Additionally, we designed a legend that clearly represented all data categories, paired with a multi-select feature that allowed users to compare specific segments side-by-side.
The initial concept centered on making overlapping datasets easier to explore through an intuitive Venn diagram. I focused on creating actionable tooltips that surfaced key insights without overwhelming the user. Additionally, I designed a legend that represented all data categories, paired with a multi-select feature that allowed users to compare specific segments side-by-side.
The initial concept centered on making overlapping datasets easier to explore through an intuitive Venn diagram. We focused on creating actionable tooltips that surfaced key insights without overwhelming the user. Additionally, we designed a legend that clearly represented all data categories, paired with a multi-select feature that allowed users to compare specific segments side-by-side.
Iterations and User Testing
Iterations and User Testing
Accommodating the new color palette
Our initial visuals received strong feedback, especially the colors that we chose. However, during the final design review, we were required to adopt a newly updated design system palette.
I quickly assessed the new palette, selecting hues closest to our original choices. I also adjusted text contrast for both light and dark backgrounds—ensuring accessibility and visual consistency.
Accommodating a new color palette
Our initial visuals received strong feedback, especially the colors that we chose. However, during the final design review, we were required to adopt a newly updated design system palette.
I quickly assessed the new palette, selecting hues closest to our original choices. I also adjusted text contrast for both light and dark backgrounds—ensuring accessibility and visual consistency.
Accommodating the new color palette
Our initial visuals received strong feedback, especially the colors that we chose. However, during the final design review, we were required to adopt a newly updated design system palette.
I quickly assessed the new palette, selecting hues closest to our original choices. I also adjusted text contrast for both light and dark backgrounds—ensuring accessibility and visual consistency.
Tooltip Complexity: Balancing Detail and Clarity
Tooltip Complexity: Balancing Detail and Clarity
AI Insights on Hover (Future-Forward Concept)
AI Insights on Hover (Future-Forward Concept)
Simplifying the legend to reduce cognitive load
During testing, several users—especially non-technical ones—struggled to interpret the legend when faced with more than 6 overlapping categories. The visual clutter caused confusion and slowed down comprehension.
I also considered edge cases: What if there were 10+ segments? To address both clarity and scalability, I redesigned the legend to display only the primary categories and removed numeric labels. This reduced cognitive load and made the diagram more approachable.
Simplifying the legend to reduce cognitive load
During testing, several users—especially non-technical ones—struggled to interpret the legend when faced with more than 6 overlapping categories. The visual clutter caused confusion and slowed down comprehension.
I also considered edge cases: What if there were 10+ segments? To address both clarity and scalability, I redesigned the legend to display only the primary categories and removed numeric labels. This reduced cognitive load and made the diagram more approachable.
Rethinking Fan Shapes for Interaction States
Our initial design used fan and almond shapes to indicate hover and selection states in the Venn diagram. While visually distinct, user feedback and competitive analysis revealed that these shapes misrepresented how overlaps worked and confused users.
Additionally, developers raised concerns about rendering performance and complexity. To address this, I simplified the interaction model—using unified model and outlines instead of custom shapes. This made the diagram easier to interpret and better aligned with user expectations and data logic.
Rethinking Fan Shapes for Interaction States
Our initial design used fan and almond shapes to indicate hover and selection states in the Venn diagram. While visually distinct, user feedback and competitive analysis revealed that these shapes misrepresented how overlaps worked and confused users.
Additionally, developers raised concerns about rendering performance and complexity. To address this, I simplified the interaction model—using unified model and outlines instead of custom shapes. This made the diagram easier to interpret and better aligned with user expectations and data logic.
Rethinking Fan Shapes for Interaction States
Our initial design used fan and almond shapes to indicate hover and selection states in the Venn diagram. While visually distinct, user feedback and competitive analysis revealed that these shapes misrepresented how overlaps worked and confused users.
Additionally, developers raised concerns about rendering performance and complexity. To address this, I simplified the interaction model—using unified model and outlines instead of custom shapes. This made the diagram easier to interpret and better aligned with user expectations and data logic.
Final Designs
Final Designs
After doing multiple rounds of user testing and concept validation, we come up with key solutions for maximizing insights and experience of a Venn diagram.
After doing multiple rounds of user testing and concept validation, we come up with key solutions for maximizing insights and experience of a Venn diagram.
01 States
01 States
Default State
The default state is the initial image rendered when the code is executed. All circles are evenly proportioned, regardless of data size.
The default state is the initial image rendered when the code is executed. All circles are evenly proportioned, regardless of data size.
B. Hover State
The hover state provides a quick data preview, removing the need for additional interactions.
Additionally, hovering over overlapping sections will show a customizable key insights for better data storytelling.
The hover state provides a quick data preview, removing the need for additional interactions.
Additionally, hovering over overlapping sections will show a customizable key insights for better data storytelling.
C. Selection State
A tool tip appears upon selection, allowing users to click on a specific section to drill down to more detail information about that section.
The outer circle of the Venn diagram is interactive, allowing users to explore intersecting areas with ease.
A tool tip appears upon selection, allowing users to click on a specific section to drill down to more detail information about that section.
Once drilling down, there will be an option to see user attributes. This will allow them to break down the data by dimension. For example, users may get to learn about this user group’s demographic information on a map visualization.
Selecting over a section will show metric values and dimensions such as category labels, values, descriptions, and explore user attributes which prompted them to external data visualization.
*Users can customize the action button on tooltips to caters to their needs, but this is the suggested actions.
Once drilling down, there will be an option to see user attributes. This will allow them to break down the data by dimension. For example, users may get to learn about this user group’s demographic information on a map visualization.
E. Focus State
Focus states enable keyboard navigation from the leftmost section to the center of overlaps, ensuring logical and accessible flow.
Additionally, hitting “Return” will switch to Select state.
Focus states enable keyboard navigation from the leftmost section to the center of overlaps, ensuring logical and accessible flow.
Additionally, hitting “Return” will switch to Select state.
02 Autoscale
02 Autoscale
The autoscale feature dynamically adjusts the proportion of circles based on the numerical value.
Users can toggle between the default and auto scaling depending on preferences.
*Due to a different sample data, the numbers are different from the previous examples.
The autoscale feature dynamically adjusts the proportion of circles based on the numerical value.
Users can toggle between the default and auto scaling depending on preferences.
*Due to a different sample data, the numbers are different from the previous examples.
When the intersection between circles is small, users can click the "Intersections" button.
A pop-up will appear to provide a detailed breakdown of the data for better clarity and interpretation.
When the intersection between circles is small, users can click the "Intersections" button.
A pop-up will appear to provide a detailed breakdown of the data for better clarity and interpretation.
03 Dark Mode
03 Dark Mode
The dark mode is used mainly for reducing eye strain. Additionally, many users find dark mode visually appealing, creating a more comfortable and modern look.
The dark mode is used mainly for reducing eye strain. Additionally, many users find dark mode visually appealing, creating a more comfortable and modern look.
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.
Considerations
Considerations
01
Generative AI summary could be challenging to implement
02
Different needs of information visualization, especially when dealing with quantitative data.
03
Scope of the project vs user demands
Impact
Impact
The product has already showing promising results through internal validation, usability testing, and alignment with Adobe's design ecosystem and mission—Changing the world through personalized digital experiences.
Throughout the project, I led multiple iterative design reviews with the React Spectrum 2 team, delivering 20+ high-fidelity mockups and ultimately securing full implementation approval and integration into their GitHub repository.
The product has already showing promising results through internal validation, usability testing, and alignment with Adobe's design ecosystem and mission—Changing the world through personalized digital experiences.
Throughout the project, I led multiple iterative design reviews with the React Spectrum 2 team, delivering 20+ high-fidelity mockups and ultimately securing full implementation approval and integration into their GitHub repository.
Validated Ideas
Circles, tooltips, and legend design.
Design Guidelines Aligned with Adobe Standards.
Autoscale feature is useful for quantitative analysis and presentation
Anticipated Impacts
Streamlined workflows through comprehensive design guidelines.
Enhanced visual tools for storytelling with data.
Delivers accessible and insight-driven data visualizations for better decision-making.
Validated Ideas
Circles, tooltips, and legend design.
Design Guidelines Aligned with Adobe Standards.
Autoscale feature is useful for quantitative analysis and presentation
Anticipated Impacts
Streamlined workflows through comprehensive design guidelines.
Enhanced visual tools for storytelling with data.
Delivers accessible and insight-driven data visualizations for better decision-making.
What I Learned
What I Learned
A week before final handoff, we hit a major hurdle—our developers informed us that React couldn’t support direct selection of overlapping sections in the Venn diagram. Since this was core to the interaction, my co-designer and I worked overtime with the developers to reframe the experience without compromising clarity or usability—which enable us to hand off the deliverables on time with quality intact.
At the same time, the Spectrum 2 design system was evolving—New color tokens, updated components, revised interaction states. Rather than seeing it as a blocker, I treated it as an opportunity to adapt and grow. I revised our designs week by week, ensuring every change aligned with Adobe’s evolving system without losing our original design intent.
These moments reminded me that constraints don’t just test your skills—they refine them. They pushed me to stay flexible, collaborative, and focused on impact.
A week before final handoff, we hit a major hurdle—our developers informed us that React couldn’t support direct selection of overlapping sections in the Venn diagram. Since this was core to the interaction, my co-designer and I worked overtime with the developers to reframe the experience without compromising clarity or usability—which enable us to hand off the deliverables on time with quality intact.
At the same time, the Spectrum 2 design system was evolving—New color tokens, updated components, revised interaction states. Rather than seeing it as a blocker, I treated it as an opportunity to adapt and grow. I revised our designs week by week, ensuring every change aligned with Adobe’s evolving system without losing our original design intent.
These moments reminded me that constraints don’t just test your skills—they refine them. They pushed me to stay flexible, collaborative, and focused on impact.
What’s next?
What’s next?
While the developers are in the process of implementing the design, my co-designer and I are designing a comprehensive guideline for both designers and engineers/analyst.
Additionally, we are testing new features and refining our design to better align with stakeholders' needs.
Which means…
While the developers are in the process of implementing the design, my co-designer and I are designing a comprehensive guideline for both designers and engineers/analyst.
Additionally, we are testing new features and refining our design to better align with stakeholders' needs.
Which means…
More
Research
More
Research
More
Validating
More
Validating
And...More
Designing
(Click me)
And...More
Designing
(Click me)
And...More
Designing
(Click me)
And...More
Designing
(Click me)
Stay tuned for more!
Stay tuned for more!
Next project myBCA