Data Visualization Dashboard
Dashboard and Design System for Analytics
Fintech
Web App
Role
Lead UX/UI Designer
Year
2025
Team
Design Engineering Product
Responsibilities
Color Tokens Component Creation Design System Chart Templates Stakeholder Alignment Documentation
Challenge
Create a scalable analytics dashboard displaying social media data for an AI publishing application. Development constraints including the implementation of X for the MVP, with the goal of integrating APIs from Discord and TikTok in later updates.
The dashboard should have familiar components to those displayed in internal dashboards across all socials, such that the X dashboard components and layout match Discord's while integrating cohesively into the ecosystem's design system.
With the integration of a new business intelligence platform, Metabase, the style guide color palettes, charts, and graphs templates had to align with their implementation documentation as well.
Research
I conducted secondary research, which included documentation of all social media platforms planned to be integrated, design systems, competitors, and Metabase. While researching various design systems including Apple, Google, IBM, and Microsoft for data analytics documentation, IBM provided the most thorough approach to color palettes with a focus on accessibility which was the right fit for this project. Considering time constraints within an agile environment, I developed a new style guide utilizing open source IBM color scales as secondary colors and created a primary color scale for the company's brand.
Key Insights
Color Palette
Consistent dual brand colors function efficiently for 2 metric dashboard charts & graphs, which based on research would be the majority of the data integrated in the dashboards.
Charts & Graphs
The audit of social media platform analytics and Metabase documentation informed the types of charts supported by all apps: bar, line, area, pie, map, and meter with multiple variations of them.
Layout
Focusing on object-oriented design for the dashboard, I sought to find common components, metrics, and themes between all social media dashboards. A common component found within them and competitor dashboards were cards with trends, which led to the creation of a component card that would work universally regardless of the type of trend it is showcasing.
Another insight was the inclusion of components with similar functionality, such as date input, time range, and frequency. The most recurrent chart types among the dashboards included 1-2 metrics in the form of bar charts, line charts and area charts.
With primarily X (Twitter) features considered for the first version of the dashboard, I had to ensure future social integrations would function under the same layout and components.
Color Palette
With the layout ideated into a wireframe, I proceeded to build a color palette based on research insights. I mathematically gathered 10 different shades of the 2 brand colors, with each shade having a difference of 10% in lightness. Utilizing the HSL (hue, saturation, lightness) color system ensures effectiveness throughout development, allowing engineers to manually adjust values purposefully and visualize the update.
The studies of different design system data analytics documentation revealed the three types of color palettes supported in charts, graphs, and maps: categorical, sequential, and diverging. A categorical palette is used when the variable takes on distinct labels without inherent ordering, e.g. bar & donut charts. Sequential palettes are utilized when the variable is numeric or has ordered values, for instance with heat maps and choropleth maps. A diverging palette is a combination of sequential palettes with a central value which are able to visualize survey and financial data.
The 3 color palette types with example graphics including discrete and continuous variations, as well as the primary, secondary, and neutral color palettes.
I adjusted the lightness percentage in HSL color scales to allow for a better visual perception of color, and a good practice is to increase saturation as the lightness gets further away from 50%.
Templates: Charts & Graphs
A constraint from Metabase integration was only allowing area charts to include solid and transparent colors — not gradients. Gradients are also not recommended for accessibility purposes, as more than 2 metric gradients overlayed create visual clutter and affect user experience. This made the style selection easier as the constraint dicated what was feasible and the area chart templates with gradient colors were discarded.
Templates for charts & graphs, including a combined mixture of variants with the inclusion of design system color tokens in variables.
Results
Following the layout, color palette, and chart template styles I implemented the components into a development ready high-fidelity prototype. The screen mockup was created with a responsive auto layout which resized the chart templates without distortion. The layout included components and color tokens in variables from the existing ecosystem's design system. The final UI was realized and developed into the Ai Content Engine application.
The final high-fidelity prototype, which included charts with 2 metrics for the first version of the dashboard overview.
Scalable Dashboard
Shipped a data visualization layout considering business and feasibility constraints. The prototype posseses expansive capabilities due to research from multiple social media integrations, color palettes and systems, chart guidelines, and existing ecosystem design system.
Retention Increase
The users remain in the platform and are able to evaluate analytics internally — a user-centered feature improvement.
Multiple Applications
The new data visualization guidelines serve as a foundation for other applications of analytics in the ecosystem.
More Case Studies
