TANVI MODI
AI Product Designer
Background
Visa's internal teams were building hundreds of data dashboards across products, regions, and business units. But there was no shared standard for what "good" looked like. Dashboards were technically functional but hard to read, inconsistent in interaction patterns, and disconnected from the people actually using them.
The core problem was that there was too much data and a lack of design thinking applied to data products.
My role
Data Experience Design Engineer
Jun 2022 — Jan 2025
I was part of the Data Experience (DX) team as a design engineer (65% design, 35% build), focused on elevating the quality of data products by empowering designers with training, resources, and systems that make data more human, accessible, and actionable.
I worked across three interconnected work streams:
01 Product Design: Government Insights Hub
The Brief
Visa was building a data dashboard for Ministry of Commerce stakeholders. Policy advisors who needed economic insights to make decisions, not data analysts who wanted to explore raw numbers.
They wanted to know:
-
How are small businesses performing compared to the rest of the economy?
-
Which industry segments are facing challenges?
-
How can we address them?
THE PROCESS –– Since this project is under NDA, more nuances of the project will be shared during the interview.
i) product discovery
I used the DX team's Viz Canvas to lock the purpose before touching any design tool. The canvas maps out audience, key business questions, analytical tasks, and information needs in one place. Everything downstream gets evaluated against it.
This viz canvas helped us narrow a broad "show us the economy" brief down to small business spending, the one area Visa's transaction data could answer credibly. It also surfaced a key audience shift: the real users weren't analysts running queries, they were policy advisors with 15 minutes before a committee meeting. That turned the product from an exploration tool into a briefing tool.
ii) structuring the information
A policy advisor lands on the summary, spots a declining sector, clicks into the category view, and drills into regional data to understand why. Each level answers a more specific question. The default view covers the top three questions. Everything else is one click away.
iii) choosing the right data representation
Every chart had to earn its place by directly supporting an analytical task. I mapped chart form choices against the key business questions:
-
Comparing spend across industries? Grouped bar chart.
-
Tracking performance over quarters? Line chart with trend annotations.
-
Showing regional distribution? Choropleth with drill-down to detail tables.
I also looked at where data abstraction choices could lead to misinterpretation. Aggregating too broadly hides important patterns. Too granularly, and the signal gets buried in noise.
02 Visa Product Design System
Visa Chart Components is an open-source, accessibility-focused design system for data visualization. Built on D3.js and Stencil.js, it's framework-agnostic and used across Visa's product ecosystem. See the charts published live here.
What existed before
The older Visa chart components were built with accessibility in mind, but lacked Visa's brand identity, visual hierarchy, and the readability controls teams needed to make data clear at a glance. Heavy gridlines competed with the data, labels were cluttered, and styling varied across chart types, making the library feel disconnected from the cohesive Visa brand experience.
My role
Teams across Visa were building dashboards with VCC, but kept running into the same issues: unclear defaults, frequent customization requests, and gaps between what Figma showed and what code produced. I was brought in to close those gaps by redesigning components, writing usage guidelines, and maintaining parity between the Figma and code libraries.
40+
reusable chart components redesigned with guidelines
50%
reduction in design & engineering support time by shipping clearer defaults that cut down on team customization requests
20%
increase in user success rate for interpreting charts correctly leading to faster and clearer decision making
Here's an example of a redesigned dumbbell plot redesigned:
What changed and why?
In the dumbbell plot redesign above,
-
Vertical gridlines replace horizontal ones to match the eye's natural reading direction
-
A highlight palette draws attention to positive movement
-
Improved titles and accessibility controls reduce the cognitive load
Collaboration and tradeoffs
VCC is opinionated by design: pre-configured styling, motion, and accessibility defaults so every chart meets Visa's global standards out of the box. I worked with developers and the a11y team to draw the line between rigid (color contrast, keyboard nav, screen reader support) and flexible (labels, annotations, layout density).
-
Color system: finding the middle ground. Our palettes passed contrast checks, but gridlines were a gray area. The a11y team flagged them as too light; from a data visualization standpoint, heavy gridlines compete with the data. We landed on a middle-ground value that met accessibility requirements without pulling attention from the chart.
-
Figma-to-code parity: I referenced chart props in the existing code library to make sure Figma components mapped to what developers could actually build, closing the gap that had been causing handoff rework.
03 Raising the quality bar for data + design at Visa
Helping teams think differently about their data products
DX Coaching
-
Conducted 26 x 1:1 coaching sessions with analysts and designers on dashboard usability and clarity
-
Multiple recurring sessions that improved dashboard/chart representation DX scores by 40%
Training & Support
-
Developed the DX learning pathway and ran hands-on 2 x 6-week workshops introducing teams to data product design practices
-
Workshops led to a 70% boost in participants' confidence applying DX concepts in their own dashboards and a 4.8/5 average satisfaction score from participants
DX Evaluation
-
Evaluated 6 dashboards across product, ops, and business units using the DX scoring framework.
-
Improved average dashboard DX score by ~25% post evaluation
From the teams I coached and collaborated with:
— UX designer, Visa Payments Platform
Tanvi's willingness to collaborate, co-design, and offer her expert opinion was invaluable, and made my project sail smoothly ahead. I enjoyed working with Tanvi so much that I shared our process and outcomes with the rest of my design team.
Tanvi is amazing at explaining concepts and walking the class through Figma. I had 1:1 sessions where she helped me apply DX principles to my own dashboard. My team now uses the framework she taught us for every new project. It was great working close and learning a lot from her.
— Senior data analyst, Visa Business Intelligence
Looking back
-
The gap between Figma and real data is where the real design happens. Some of my best decisions came from moments where a mockup fell apart with real data. A chart that looked clean with 5 categories becomes unusable with 30. Those moments forced me to treat data as a variable, not a constant.
-
Tableau changed how I design dashboards. Working in Tableau with live data before finalizing designs in Figma became a core part of my process. Exploratory analysis would surface patterns I didn't expect, and that would change the chart type, the default aggregation, or even which metric got top placement. Designing with real data exposed edge cases that no placeholder dataset ever would.
-
Influence scales better than output. Early on, I focused on how many dashboards I could improve directly. Over time, I realized the higher-leverage work was giving others the tools and confidence to improve their own. The coaching, the training materials, the Figma library: those kept working after I moved on.
