Enhancing Data Visualization for Meta Business products: A Design System Initiative for Trust & Action
Role
Fei Huang Lead Designer, Design Systems + Insights
Nagendra Chamalla Product Designer I Design System
Marine Lucus Lead Engineer I Design System
Jenny Chen Engineer I Design System
Megan Mesick Design Program Manager I Design System
Measurement Teams Product Designers, Product Managers, Researchers, Content Designers, Engineers
Project Overview
At Meta, the vast amount of data generated within Ads and business products is paramount for advertisers to make informed decisions and drive business growth. This project details an end-to-end initiative to evolve our data visualization components within the Geodesic (Geo) design system, focusing on building trust, improving data literacy, and enabling actionable insights for both product teams and end-users.
Responsibility
-
Led the strategy and system design for Meta’s data visualization framework across Ads products.
-
Designed flexible component architecture and decision patterns enabling teams to build insight-driven workflows.
-
Partnered with engineering and PM to define component APIs and system constraints for scalable implementation.
-
Enabled adoption across product teams through patterns, guidance, and cross-team collaboration.
Problems: System Gaps
-
Data visualization components were rigid and difficult for teams to adapt.
-
Charts surfaced insights but did not support decision workflows.
-
Product teams combined charts and controls in inconsistent ways, creating fragmented experiences across products.
The Approach: A Strategic Evolution of Components
The approach involved a multi-faceted strategy to address these challenges, grounded in a deep understanding of user needs and a commitment to scalable design system solutions.
Deep dive into product needs
Synthesized workshop insights: Identified key user pain points (e.g., trust issues, difficulty acting on data, rigid tools) and organizational goals (e.g., enhanced advertiser satisfaction, improved data literacy, GMV growth).
Gap analysis: Compared these product needs against the design system's existing data visualization principles, revealing critical gaps in component capabilities.
Long-term strategic vision for
design system data visualization components
Long-term strategy: Established a guiding principle for design system team: every newly developed data visualization component would embody a "Simple, Robotic, Flexible" DNA. This meant building modular, configurable components with built-in narrative hooks, treating variations as first-class citizens, and ensuring accessibility by design.
Guidance for advanced explorations: Provided clear guidance and potentially foundational components for advanced data visualization chart explorations, such as funnel charts, Sankey diagrams, and scatter plots, enabling product teams to tackle more complex analytical needs.
Short-term deliverable
- Component evolution: flexible Bar Chart -
Problem addressed
The critical gap identified in Principle 2: "Adapt to users' level and needs" – the lack of adaptability due to rigid components like the bar chart. Product teams needed an unranked view and more layout control.
Solution
Developed a new variant: An Unranked Horizontal Bar Chart component. This allowed for direct comparison of categories without implying a ranking, crucial for advanced analytical needs.
Introduced a configurable spacing property: This provided product teams with the flexibility to adjust the visual space between bars, enabling seamless integration with other UI elements.
- Ranking Bar Chart -
- Horizontal Bar Chart -
Implementation & impact
- A live product success story -
Pilot integration in Meta Ads Manager report surface
The Ads Manager team adopted the new unranked horizontal bar chart to present comparative insights where ranking was irrelevant.
The new spacing property was leveraged to enable users to see different daily spend with its predicted outcomes side by side. The recommended spend was clearly marked in the list to inform users and guide their next steps for more profits.
Accessibility by design
Ensured the new bar chart variant was fully accessible from the ground up. This included proper ARIA attributes for screen readers, full keyboard navigation, robust color contrast, and clear focus states.
Documentation & rollout
Comprehensive documentation was created, including usage guidelines, code examples, and accessibility notes. The component was formally released within the design system and made available to broader teams across the Ads organization, facilitating widespread adoption.
- Data Visualization Documentation -
Outcomes and Impact: Driving Value Through a Comprehensive Data Visualization Initiative
This initiative significantly advanced Meta's data visualization capabilities, directly contributing to business growth, enhancing user experience, and improving design system efficiency across various components and product surfaces.
Drove tangible business and user outcomes
Increased revenue and engagement: The launch of new data visualization features, including Area Line Charts and Heat Maps, directly contributed to a significant increase in revenue from key ad formats. Enhanced experiences helped users to see different daily spend with its predicted outcomes side by side, with recommended spend clearly marked to guide actions for more profits.
Enhanced user trust and literacy: Users reported greater confidence in data quality and improved ability to interpret and act on insights, fostering a more data-driven culture. This was bolstered by resolving critical accessibility issues in core components like the GeoBarChart on mobile, which removed accessibility red flags from Meta business products.
Improved decision-making: By providing flexible and clear visualizations, users were better equipped to understand complex data, leading to more informed decisions and effective marketing efforts.
Accelerated product development and efficiency
Shipped critical components: Successfully designed, developed, and shipped highly requested data visualization components, including the GeoHorizontalBarChart (landed in code and documentation Q1 2024) and comparison features on Line and Bar charts.
Reduced development overhead: Design system components were identified as significantly faster to use, resulting in substantial estimated engineer time savings annually. This efficiency gain was achieved by providing robust, configurable "Lego pieces" that significantly reduced the need for custom coding by product teams.
Prevented usability issues: Contributed to a double-digit percentage reduction in usability issue leakage in internal quality reviews and identified that Geo components could prevent a high percentage of such leaks, demonstrating proactive quality improvement.
Streamlined processes: Implemented Quality Checks within internal review processes, directly reducing revision requests and improving overall release quality for data visualization features.
Strengthened design system utility and standards
Formalized data visualization strategy: Established a clear strategic vision for data visualization within the design system, guiding future development of standards, patterns, and templates.
Enhanced documentation and discoverability: Led the creation of a comprehensive data visualization chart inventory and new product system documentation standards (multiple new standards shipped), significantly improving component clarity, discoverability, and reducing support requests.
Standardized accessibility and color usage: Developed and implemented a data visualization color strategy and ensured consistent line weights in documentation, reinforcing accessibility and visual consistency across products.
Fostered collaboration: Improved data visualization feedback loops and built strong partnerships with product and measurement teams, influencing their roadmaps and ensuring alignment on critical data visualization needs.
Strategic foundation for future growth
This initiative established a clear path for future data visualization component development, ensuring all new components (e.g., line charts, donut charts, advanced explorations like funnel charts, Sankey diagrams, and scatter plots) will inherit this "simple, robotic, flexible" DNA, driving long-term consistency and impact across Meta's business products.