ADOBE VENN
ADOBE VENN
Owned and led design efforts for the Venn Diagram component of Adobe RSC 2, planned to launch in late 2025
ROLE
Product Design
UX Research
Interaction Design
TEAM
Working with 1 Designer, 1 PM,
and 2 Developers.
TIMELINE
January 2025 - June 2025
The Problem
The Problem
Venn Diagrams are powerful tools for visualizing relationships between different data sets, which can help users to diagnose patterns and make informed business decisions. Currently, React Spectrum Charts lacks this functionality.
Venn Diagrams are powerful tools for visualizing relationships between different data sets, which can help users to diagnose patterns and make informed business decisions. Currently, React Spectrum Charts lacks this functionality.
The Challenge
The Challenge
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
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
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
Surveys and Interviews
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.
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
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
Understanding the Solution
Understanding the Solution
Affinity Mapping
Affinity Mapping
We used affinity mapping to categorize and brainstorm possible solutions based on the interview, surveys, and competitive analysis insights.
We used affinity mapping to categorize and brainstorm possible solutions based on the interview, surveys, and competitive analysis insights.
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
User Journey Map
User Journey Map
After defining our key features for the scope of work, we use user journey map to understand how different workflows affect the experience of the product.
After defining our key features for the scope of work, we use user journey map to understand how different workflows affect the experience of the product.
Non-Analysts Workflow
Non-Analysts 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
Design
Design
We split up ideating storyboards, and I was responsible for creating data explorer workflow. We were all able to come up with 5 storyboards to visualize different features.
We split up ideating storyboards, and I was responsible for creating data explorer workflow. We were all able to come up with 5 storyboards to visualize different features.
Sample Storyboards
Sample Storyboards
Moodboard and Branding
Moodboard and Branding
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.
Due to NDA, we can't fully disclose the design guideline
Due to NDA, we can't fully disclose the design guideline
Key Features
Key Features
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.
The default state is the initial image rendered when the code is executed.
B. Hover State
The hover state provides a quick data preview, removing the need for additional interactions.
The hover state provides a quick data preview, removing the need for additional interactions.
C. Selection State
The selection state unlocks additional actions, enabling users to compare trends from previous timeline with bar charts, and annotate or comment for team feedback.
The selection state unlocks additional actions, enabling users to compare trends from previous timeline with bar charts, and annotate or comment for team feedback.
D. Multi Selection State
Multi-selection states allow users to compare datasets and identify trends efficiently.
Multi-selection states allow users to compare datasets and identify trends efficiently.
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.
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
Technical feasibility, especially when nesting charts inside tooltips (initial concept).
02
Different needs of information visualization, especially when dealing with quantitative data.
03
Scope of the project vs user demands
The impact so far
The impact so far
Although the product has not yet been shipped, it is 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.
Although the product has not yet been shipped, it is 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.
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’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 developers.
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 developers.
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)
Stay tuned for more!
Stay tuned for more!
Prototype is still under construction 🚧
Prototype is still under construction 🚧
Next project Damkar