1. Weak Color Contrast
Low color saturation and contrast made key trends harder to spot.
ThinkingData 4.0 Data Visualization
Overview
ThinkingData is a global gaming analytics company that provides data platforms for actionable player insights. In 2023, the product underwent a major 4.0 redesign, and I led the overhaul of its data visualization system.
Pain Point
Based on user feedback and a comprehensive audit of existing dashboards, I identified three key issues:
2. Limited Readability
Text on colored backgrounds did not meet readability standards.
3. Inappropriate Chart Usage
Some chart types were not well aligned with the data context.
Insight: Poor visual hierarchy increases cognitive load. Users spend more time decoding charts instead of deriving insights.
Design Goals
Drawing from these insights, I established clear goals to guide the new data visualization design.
Unified and scalable visualization standards
Build consistent guidelines for chart usage, colors, layouts, and best practices.
Support advanced analysis
Add advanced chart types such as bubble and scatter charts to support complex workflows.
Improve visual clarity
Increase color contrast and strengthen visual hierarchy to reduce cognitive load.
Enhance readability and accessibility
Improve text contrast, especially in color-heavy charts like heatmaps.
Research
Before moving into design execution, I studied current visual design practices to better understand industry standards and emerging best practices. I reviewed some of the most established design systems and documentation, including Material Design, IBM Design System, and Ant Design, to identify principles that could improve clarity, accessibility, and consistency in data-heavy interfaces.
Design Process
With these issues identified, I approached the redesign from three angles: refining the color system, improving readability in dense data views, and aligning chart types more closely with analytical use cases.
01. Refining the Color System
To improve the overall visual experience, I started with the most fundamental layer of the interface: the color palette.
After auditing the existing palette, I found that many of the original colors had relatively low saturation, which made charts feel visually dull and contributed to fatigue during extended analysis. In addition, adjacent colors often lacked sufficient contrast, making comparisons between data series less clear.
To address this, I refined the existing palette by increasing saturation and selecting color combinations with stronger contrast between neighboring hues. I also expanded the palette from 8 to 12 colors, allowing charts to support more categories while maintaining visual distinction and consistency.
02. Improving Readability in Dense Data Views
Beyond the overall palette, I also focused on improving readability in more information-dense scenarios, especially heatmaps.
The original Cohort Heatmap used only 10 color steps, which made subtle value differences difficult to perceive in high-density views. Each step was manually selected by designers, so the progression between levels lacked consistency. In addition, the overall saturation was too low, and three of the levels had contrast ratios below 3:1, falling short of WCAG accessibility standards.
To improve both clarity and scalability, I redesigned the heatmap scale by increasing saturation and expanding it to 20 levels, allowing value differences to be represented more precisely. Instead of manually defining every color step, I introduced an algorithm-based opacity system that could generate consistent scales from a single base color.
I also established a mapping rule that translated any value into a corresponding color level based on the minimum and maximum range within the visible dataset, making the system easier for engineers to implement and scale across scenarios.
03. Aligning Charts with Analytical Contexts
In parallel, I reviewed all chart types used across the platform to ensure each visualization better matched its analytical purpose.
During this process, I found that our Stacked Area Chart was rendered as overlapping transparent area layers. In gaming analytics, stacked area charts are often used to analyze contribution trends across channels, event sources, or player segments over time. In these cases, users need to understand both the overall trend and the proportional contribution of each category.
However, the transparent overlapping treatment drew attention to the contour lines rather than the actual values and proportions, which reduced interpretability. To improve clarity, I redesigned the chart as a solid stacked area chart. This made the visual focus return to cumulative area and proportional distribution, helping users more accurately understand composition changes over time.
Before VS After
The final design introduced a clearer and more consistent visualization system. The updated color palette improved contrast and readability, while standardized layouts reduced cognitive load.
Conclusion
This project deepened my understanding of data visualization as a system rather than a collection of individual charts. It also reinforced an important lesson: even charts that look similar can serve very different analytical purposes, and choosing the right visual language is critical to helping users move from reading data to understanding it.