Designing Dashboards

Before and After Dashboard Example:
How to Modernize UI Components

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

Dashboard design can be the difference between customers embracing your application or abandoning it. After all, what’s the point of embedding analytics if end users can’t easily view their data and gain insights?

In many cases, dashboard design is left up to developers who may not feel confident overhauling their application’s embedded analytics. But dashboard makeovers don’t always have to be drastic. Updating even the smallest UI components—including buttons, fonts, and dashboard colors—can make a big difference in how users perceive your application.

In this before-and-after example, let’s look at how you can give your dashboard UI components a quick facelift.

Dashboard Example: BEFORE

The UI components here are technically fine: They get the job done. But they feel under-designed. Here’s why:

  • The style is disjointed: The top section with the currency input doesn’t look connected to the bottom section for content.
  • Fonts are tiny.
  • Some borders are rounded (in the second section), but the other edges are squared off.
  • The lack of color gives an overall dull, flat impression.
  • One particular example is the modal dialog box at the bottom. It looks fine, but there is a lot of unnecessary white space. The buttons are technically visible, but they’re easy to miss on the left side. And the fonts are very small.

Now, see how we can improve this design with just a few changes.

Dashboard Example: AFTER

To update UI components like these, we recommend using Bootstrap, an open-source web application framework with prebuilt UI components such as typography, buttons, icons, images, tables, forms, and more.

If you’re using the Logi Analytics platform, you can use our tool LambdaEx, which features a combination of Boostrap and Logi. This update took just seconds to create using Bootstrap.

  • We corrected the amount of white space throughout: Added a bit to the first and second sections, and reduced the space in the modal dialog on the bottom.
  • Fonts are more legible, with bigger and bolder styles.
  • Rounded corners and drop shadows make everything look more attractive and cohesive.
  • The buttons make the calls to action clearer. For example, in the currency input box at the top, it’s now very clear what button to push after you enter the currency. And the buttons in the modal dialog are right aligned, which is where users naturally look for controls.

Embedded dashboards and reports—and the UI components within—should add to your overall application experience, not detract from it. Fortunately, you can improve your dashboards by making just a few small changes. As you can see in our before-and-after example, these subtle adjustments can add up to a more modern analytics experience.

Discover more dashboard design best practices by reading UI for BI: Designing High-Impact Dashboards >


Originally published February 15, 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.