Designing Dashboards

Before and After Dashboard Example: Fixing Common Design Issues

By Natan Cohen
Share on LinkedIn Tweet about this on Twitter Share on Facebook

Dashboard design matters. If the analytics capabilities in your application look outdated, your users may abandon your product or start searching for alternatives.

Even if your embedded dashboards feel a little ‘off,’ it can impact users’ feelings toward your application as a whole, notes analyst firm Gartner. “The look and feel of the embedded analytics solution can directly impact the impression of the overall enterprise application and customer experience,” they write in their report, 5 Best Practices for Choosing an Embedded Analytics Platform Provider.

Fortunately, by applying even a few pieces of dashboard design advice, you can transform simple charts into stunning data visualizations and reports that will keep users coming back. Take a look at this dramatic before-and-after dashboard example. We start with a dashboard that has some common design mistakes, then make a few small changes to take it from gross to gorgeous.

Dashboard Example: BEFORE

Dashboard example with poor color choices and 3D charts
This dashboard shows information in four simple charts. The colors may be a little jarring, but other than that it seems easy enough for users to find the information they need. So what exactly makes this dashboard design gross?

  • First, of course the color palette feels off. It looks like it was never really thought out, using standard rainbow colors with no real rhyme or reason.
  • Three-dimensional charts like these may have looked good 10 years ago, but now they look dated.
  • The 3D elements also make these charts harder to read than they need to be. The line graph in particular makes it hard to tell exactly what number it’s referencing, and it almost looks like a reversed Nike symbol.

Dashboard Example: AFTER

Dashboard example with coherent color palette and grid layout

We’ve simplified a lot of the design elements here, but our “After” dashboard example isn’t necessarily complex. It’s just an attractive dashboard that lays information out in a clear, cohesive way.

  • The color choices are more thought-out with professional, branded colors. Overall, it’s more subdued and easier on the eyes. It also feels more cohesive.
  • The metrics are laid out in a grid formation, with a clear visual hierarchy.
  • Icons and fonts are consistent and pop where necessary. For example, the first row of the dashboard uses colorful fonts and icons to highlight high-level information that’s clearly important.
  • We still see some bar charts, but we also have a map element and a D3 visualization (very different than the 3D visualizations we had earlier!). Different types of data visualizations are conveying different types of information, which is clear in our visualization choices here.

Embedded dashboards and reports should add to your overall application experience—not detract from it. After all, you’ve spent countless hours designing your application’s UI/UX, making it core to your intellectual property. Why throw all that work away when it comes to designing your embedded analytics?

Discover more dashboard design best practices in The Definitive Guide to Dashboard Design >


Originally published January 22, 2019

About the Author

Natan Cohen is the Director of Solutions Delivery at Logi Analytics. He's been with Logi for over 13 years and has helped create some of our customers' most successful analytic applications.