Data Visualization and Dashboard Design Case Study
Introduction
Dashboards make sense of the noise. They transform complex data into clear, actionable insights. A well-designed dashboard reduces distractions and keeps users focused on what matters. Thus, it helps make decisions quicker. A cluttered dashboard on the other hand, is like trying to find your keys in a messy room. It’s frustrating and slows you down.
The Problem
Throughout my career, I noticed something troubling. I often felt flattered by compliments on the visuals that I presented but…
I was missing the point. Presentations did not serve the purpose. Pretty dashboards did not speed up decisions. When presenting dashboards to stakeholders, most people would nod along, pretending to understand.
They didn’t want to seem out of their depth, but their body language gave away the confusion. It was clear that the visual representation of data wasn’t connecting the way it should.
At first, I thought: Dashboards and charts aren’t for everyone. But that assumption didn’t sit right with me.
Humans process visuals better than text or numbers. Why, then, did people struggle so much with visual data? This question kept nagging at me. So, I began asking for feedback every time I presented data. Questions like:
- Was anything unclear or overwhelming?
- How would you prefer to see this information?
- Is there anything missing that could help make quicker decisions?
- Was there anything you misunderstood before I clarified it?
- What was the most helpful insight?
- How well does this align with your needs?
I learned a lot. People often felt overwhelmed by cluttered layouts, unclear labels, or inappropriate chart types. What made sense to me as a technical person didn’t always resonate with their needs and expectations.
Process and Iterations
To tackle the problem, I started experimenting. Every dashboard I built became a test case. Here’s what I did:
- Sought input on every iteration, asking what worked and what didn’t.
- Reduced visual noise and grouped related metrics.
- Presented the same data using various methods. Line charts, bar charts, doughnuts — I tested them all.
Outcome
The result of this process was a design philosophy built around these principles:
1. Focus on what matters
Start with purpose. Define the key question your dashboard answers and the decisions it should enable. Avoid cramming in every metric.
2. Clarity over decoration
Follow the “data ink ratio” principle by removing visual noise. Functionality should always take precedence over flashiness.
3. Show numbers people can use
Precise figures can overwhelm users. For example, display revenue as “$1.2M” instead of “$1,234,567.89” Rounded numbers make trends clearer without losing meaning. Simpler numbers also make dashboards easier to scan and interpret at a glance.
4. Group related information
Metrics that belong together should stay together. On a financial dashboard, group revenue, expenses, and profit in one section. This structure shows their relationships, which minimizes mental effort.
5. Keep it consistent
When presenting similar metrics, stick to a uniform layout and style. If a column chart shows monthly sales for one product, use the same type of chart for other products too. Switching between visualizations for the same kind of data will confuse users. Repetitive patterns are easier to remember.
6. Guide attention with size and position
Emphasize key metrics using size and placement. For example, a logistics dashboard could feature “On-Time Delivery” at the top. Less important details can be placed below. Hierarchy helps users focus on what’s most important first.
7. Provide context
Numbers alone lack meaning. Add benchmarks or comparisons to interpret data with ease.
8. Label with clarity
Avoid jargon in labels. Replace terms like “CTR” with “Click-Through Rate” and “MAU” with “Monthly Active Users.” Clear labels ensure accessibility for all users, not just industry experts.
9. Iterate and adapt
Dashboards aren’t static. As priorities shift, add or remove data. For example, you can focus on churn rate instead of acquisition if retention becomes the goal.
10. Keep it Simple
Simpler visuals communicate information more clearly. Here is why…
- Hick’s Law: The time it takes to make a decision increases with the number and complexity of choices.
- Pre-attentive Processing: Our brain instantly notices features like color, shape, and size. With fewer details, it is easier to highlight critical data with contrasting colors or larger text.
- Cognitive Load: Too much information overwhelms users. Clean layouts with clear priorities make data easier to process. Avoid shadows, borders, and 3D effects, as they add unnecessary visual noise.
Pick the Right Chart
Matching the chart type to the data is critical. The wrong chart can confuse users and misrepresent insights. Here’s a guide to understanding when and why to use specific chart types.
Line Charts
Best for showing trends over time and identifying fluctuations. Visualize monthly sales, website traffic, or stock performance. Choose a line chart over a bar chart for time-series data. Because it emphasizes continuity and makes trends easier to spot.
Bar Charts
Best for comparing values across categories. Bar charts provide a clear visual distinction between groups. Use horizontal bars when category names are long or there are many categories. Use vertical bars when showing time progression. It aligns naturally with how we read trends and values over time.
Stacked Bar Charts
Great for showing proportions within categories over time or across groups. For example, breaking down revenue by product lines. They highlight how individual components add up to a total and make it easy to compare groups.
Pie Charts
Best for showing parts of a whole For example, percentage of sales by product category or market share by major players. Pie charts are simple and effective for illustrating proportions. If precision is important or the data has many categories, use a bar chart instead.
Scatter Plots
Best for exploring relationships between two variables. For example marketing spend vs. customer acquisition. Scatter plots help identify correlations or outliers in data. Use for more in-depth analysis.
Heatmaps
Best for visualizing intensity or density across categories or time. For example, customer activity by hour and day. Heatmaps use color to represent data values, making it easy to spot patterns or anomalies.
Area Charts
Best for showing trends over time while emphasizing the magnitude of change. They highlight volume, making them useful for comparing multiple data sets over time. For example, growth in monthly active users across different product categories.
Dual-Axis Charts
Best for comparing two data sets with different units. For example, sales revenue vs. number of customers. You can show customer acquisition and average revenue per user (ARPU). This helps analyze their relationship.
Avoid Pitfalls
- Do not overcomplicate with too many chart types. Stick to a few well-chosen visualizations that serve your goals.
- Do not use 3D charts. They distort data and make interpretation harder.
- Do not mess up scales. Ensure consistent y-axis scales to avoid misleading comparisons.
- Do not confuse Correlation with Causation. Just because two things happen together doesn’t mean one causes the other. Ice cream sales and shark attacks both increase during summer. Not because one causes the other, but because both are influenced by warm weather. A clear example of causation is an increase in sign-ups after a marketing campaign. Here, the campaign impacts the sign-up rate, demonstrating a cause-and-effect relationship.
Small Tweaks Can Improve UX
In the example below, we’ll turn a cluttered bar chart into a clean and insightful visualization. By the end, you’ll see how a few small tweaks can make a big difference.
Step 1: Remove Unnecessary Boundaries
Borders and decorative elements, such as large title bars, don’t add value to the chart’s message. Instead, they pull attention away from the data. Let’s remove these elements to simplify the visualization. This will allow the audience to focus on the most important aspect: the data itself.
Step 2: Assess the Legend and Axis Titles
Redundant information increases cognitive load and clutters the chart. For example, the legend, the Y-axis title, and the chart title all convey the same information. Let’s keep the title and remove the rest. The X-axis already displays date values, so we can remove the X-axis title too.
Step 3: Simplify X-Axis Values
The X-axis displays too many date labels, it overwhelms the viewer, making the chart harder to read. Let’s reduce the number of labels. Additionally, this will reduce the number of vertical gridlines. It will improve readability even more. Also, removing tick marks will make the design cleaner while preserving functionality.
Step 4: Simplify the Y-Axis
The Y-axis should provide just enough reference points to guide interpretation. Reducing the number of labels minimizes clutter. Let’s also make gridlines less dominant but still useful for comparison. We’ll remove tick marks here too. Now our chart looks clean and with a well balanced “data ink ratio.” But we can improve it even more.
Step 5: Add Context to Make the Chart More Useful
Adding contextual details helps viewers extract insights beyond raw data. Let’s show how sales increased over a specific period. Context enriches the chart, transforming it from a mere display of numbers into a story. Now it communicates meaningful insights.
Step 6: Add Interactivity for Flexibility
Let’s add options to switch between different time frames or input custom date ranges. This increases its utility and allows us to explore trends at varying levels of detail. Flexibility makes the chart more engaging and adaptable to different analytical scenarios.
Let’s Compare Initial and Improved Charts
The original chart was cluttered and distracting, with unnecessary elements and redundant information. The improved version is easier on the eye, while providing even more insights.
Another big aspect of data visualization is color, and it can significantly shape how your audience perceives your data. A good palette highlights your story. A bad one ruins it.
Picking the “right” colors can be daunting. Many designers obsess over tiny tweaks, hoping to land on the perfect hue.
But here’s a reality check:
most people don’t have top-notch screens. Even if they do, brightness, contrast, and color temperature vary. They might view your dashboards on phones, laptops, or TVs. And everyone sees color differently — even if they’re not color-blind. Some use blue-light filters. So, all those tiny adjustments might go unnoticed.
Instead, focus on two big factors that shape how people see your charts:
- Color Mapping
- Context and Audience
Color Mapping: Choosing a Color Palette
When visualizing data, you can pick from three main color palette types. Each palette serves a specific purpose in telling your data’s story.
1. Qualitative Palettes
Use these to separate categories. In a sales dashboard, you might use blue for Electronics, orange for Furniture, and green for Clothing. The colors don’t imply better or worse — just different colors for different groups.
Dealing with many categories
If you have 20 categories, you don’t need 20 colors. One option is to bundle small groups into broader categories. Another option is to show the top 4–5 categories and move the rest into “Other.”
2. Sequential Palettes
Use sequential palettes when you want to show intensity or an amount. They use varying shades of a single color or smooth gradients.
On a customer satisfaction board, light green might mean “somewhat satisfied” while dark green means “very satisfied.” Or in a retention dashboard, light blue might show low retention rates, while dark blue indicates high retention. The darker or more intense the color, the “more” of something there is.
3. Diverging Palettes
Use these when you have two extremes around a meaningful midpoint. For instance, a finance dashboard might use green for profit and red for loss. This highlights opposite ends of the scale.
Context and Audience
Imagine you want to create a heatmap that shows temperature across a region. Typically, you might use red for high temperatures and blue for low ones. This follows a common visual convention: red means hot, blue means cold.
Now, let’s flip the scenario. What if cold areas are actually dangerous, and hot areas are safe? Would you still use the red and blue scheme? Or would you pick red to highlight dangerous, cold areas and green for safe, hot zones? This kind of context can even make you rethink the whole visual. You might consider adding icons to flag danger zones, or even choosing a different type of chart. There’s no one correct answer. The key takeaway is that context shapes your decisions.
Audience matters too. I once made a pie chart showing the split between boys and girls among our most active players. I used the brand colors — pink and blue. One person loved the consistent colors, while another said it reinforced gender stereotypes. It shows how colors can carry unintended meanings depending on the viewer’s perspective.
Final Thought
Data visualization is more than just charts and graphs; it’s a universal language. Thoughtfully designed dashboards don’t just show data — they tell stories and make complex information accessible and actionable for everyone. When done right, they transform raw numbers into insights that anyone can understand and use.
I’ve spent a decent amount of time exploring this topic, and I’m sharing my insights with the hope that it will help you level up your design skills.
Of course, there’s still plenty of room for exploration, especially in fields like scientific research and technical analysis. But diving into those nuances? That’s a different kind of adventure.