Data Visualization and Dashboard Design Case Study

Arto
Bootcamp
Published in
11 min readJan 16, 2025
Dashboard cards. Modern dark UI design. Graph and charts. Designed by Arto Baghdasaryan.

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…

App Dashboard. Modern dark UI design. Vivid graph and charts. Designed by Arto Baghdasaryan.

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.

Man nodding

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:

  1. Sought input on every iteration, asking what worked and what didn’t.
  2. Reduced visual noise and grouped related metrics.
  3. 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.

Example for the “data visualization and dashboard design” case study. Designed by Arto Baghdasaryan.
Streamlined vs. Overloaded Dashboard

2. Clarity over decoration

Follow the “data ink ratio” principle by removing visual noise. Functionality should always take precedence over flashiness.

Example for the “data visualization and dashboard design” case study. Designed by Arto Baghdasaryan.
Minimal vs. Cluttered Chart

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.

Example for the “data visualization and dashboard design” case study. Designed by Arto Baghdasaryan.
Simplified vs. Precise Numbers

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.

Example for the “data visualization and dashboard design” case study. Designed by Arto Baghdasaryan.
Grouped vs. Scattered Information

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.

Example for the “data visualization and dashboard design” case study. Designed by Arto Baghdasaryan.
Consistent vs. Inconsistent Patterns

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.

Example for the “data visualization and dashboard design” case study. Designed by Arto Baghdasaryan.
Hierarchical vs. Uniform Emphasis

7. Provide context

Numbers alone lack meaning. Add benchmarks or comparisons to interpret data with ease.

Example for the “data visualization and dashboard design” case study. Designed by Arto Baghdasaryan.
Contextualized vs. Standalone Data

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.

Example for the “data visualization and dashboard design” case study. Designed by Arto Baghdasaryan.
Clear vs. Ambiguous Labels

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.

Line Charts
source: Highcharts.com

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.

Bar Charts
source: Highcharts.com

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.

Stacked Bar Charts
source: Highcharts.com

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.

Pie Charts
source: Highcharts.com

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.

Scatter Plots
source: Highcharts.com

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.

Heatmaps
source: Highcharts.com

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.

Area Charts
source: Highcharts.com

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.

Dual Axis Charts
source: Highcharts.com

Avoid Pitfalls

  1. Do not overcomplicate with too many chart types. Stick to a few well-chosen visualizations that serve your goals.
  2. Do not use 3D charts. They distort data and make interpretation harder.
  3. Do not mess up scales. Ensure consistent y-axis scales to avoid misleading comparisons.
  4. 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.

Guide on how to improve data visualization and dashboard design. Designed by Arto Baghdasaryan.
Step 1: Remove Unnecessary Boundaries

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.

Guide on how to improve data visualization and dashboard design. Designed by Arto Baghdasaryan.
Step 2: Assess the Legend and Axis Titles

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.

Guide on how to improve data visualization and dashboard design. Designed by Arto Baghdasaryan.
Step 3: Simplify X-Axis Values

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.

Guide on how to improve data visualization and dashboard design. Designed by Arto Baghdasaryan.
Step 4: Simplify the Y-Axis

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.

Guide on how to improve data visualization and dashboard design. Designed by Arto Baghdasaryan.
Step 5: Add Context to Make the Chart More Useful

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.

Guide on how to improve data visualization and dashboard design. Designed by Arto Baghdasaryan.
Step 6: Add Interactivity for Flexibility

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.

Comparison of Initial and Improved Versions

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:

  1. Color Mapping
  2. 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.

Example for the “data visualization and dashboard design” case study. Designed by Arto Baghdasaryan.
Color Mapping: Qualitative Palette

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.”

Example for the “data visualization and dashboard design” case study. Designed by Arto Baghdasaryan.
Color Mapping: Dealing with many categories

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.

Example of the User Retention table. Designed by Arto Baghdasaryan.
Color Mapping: Sequential Palette

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.

Example for the “data visualization and dashboard design” case study. Designed by Arto Baghdasaryan.
Color Mapping: Diverging Palette

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.

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1

Arto
Arto

Written by Arto

Product Designer, Advisor, Mentor. I Help Fellow Designers Understand Business and Startup Culture.

Responses (1)