Background image
logologo symbol

6 - Growing complexity

Design UI - Data visualization/Dashboard design

Description

When it comes to visualizing data in our application or website, the most important aspect is UX, which makes our charts readable and the user journey through data seamless and intuitive. A well-designed dashboard does not only present numbers but tells a story, guiding the viewer through the data to insightful conclusions and outcomes. Here are a couple of points to keep in mind which you probably already know:
  • Clarity: Ensure that each chart shows a clear message. Avoid overcomplicating visuals with excessive detail that can overwhelm the user.
  • Consistency: Maintain a consistent design throughout the dashboard with similar color schemes, typography, and visual hierarchy to aid in quick understanding.
  • Context: Provide context for your data. Tooltips, legends, and annotations can help users understand the full picture without having to guess what they're looking at.
  • Comparability: Structure your data visualizations to enable easy comparison between different datasets, allowing users to spot trends and patterns.
  • Accessibility: Design with accessibility in mind to ensure that users with disabilities can also interpret and navigate your dashboard effectively.
  • Responsiveness: Your dashboard should be fully functional and visually coherent on a variety of devices and screen sizes.
There is also Interactivity which Incorporates interactive elements such as filters, sliders, and drill-downs to allow users to explore the data in depth on their terms but that depends on the data as well.
In the example there is a brief from a customer try to play around with the design and create something cool with it, There are also commutinty templates in figma that are available for free but it is recommented to create your own charts. Good Luck!
Four questions and the chart that answers each: which is biggest uses a bar chart, is it going up uses a line chart, what is it made of uses a stacked bar, and are they related uses a scatter plot.

Topics

Data visualization Dashboard design in figma Data Visualization Community Package

Goals

Knowledge

Understand how to visualize data with simple and easy to understand design

Skills

Be able to create charts in figma with simple UI and UX

Idea for return

You can finish this guide by using the data you see below in the tables and changing it into a nice dashboard where the data is displayed in a clean, modern and visually good looking way, make sure that the data fits on mobile and desktop screens, good luck! ;)

Your Challenge

Below is the actual data we'd like you to represent:
MonthRegion ARegion BRegion CTotal
January20,00015,00010,00045,000
February25,00018,00012,00055,000
March30,00022,00015,00067,000
April28,00020,00017,00065,000
PlatformWeekly InteractionsMonthly InteractionsQuarterly Interactions
Facebook2,30010,20030,600
Instagram3,50015,80047,400
Twitter1,2005,00015,000
CategoryQ1Q2Q3Q4
Marketing120,000100,000110,000105,000
Development150,000130,000140,000135,000
Operations90,00095,000100,00092,000
Miscellaneous40,00030,00035,00045,000
PageVisitors (Start)Click-through (%)Drop-off (%)
Homepage50,00040%30%
Product Page20,00050%20%
Checkout10,00070%15%
Project PhaseResources Used (Hours)Duration (Days)
Planning1,20030
Development2,40090
Testing1,00045
Deployment60020