Log In Issues

Klipfolio Design Brief

Information Overload

The Challenge

In April, 2021, I joined an organization looking to build the next generation of tools. This also means I inherited the Gen-1 tool… an analytics dashboard built in Klipfolio.

Context

Giving Klipfolio a facelift was never a priority. However, the designer in me can’t help but make a few improvements from time to time… all in an attempt to improve usability.

keyboard_arrow_up

Fonts

If everything is important…

then nothing is important. To improve the scannability and hierarchy of the dashboards, I made some styling updates.

My Concerns

  • Everything was bold (and similar in size)
  • The orange text on white
  • Treatment of the Helper Text
The dashboards when I joined the team
The Marketing Tab at the time I started

Pod Updates

Klipfolio’s WYSIWYG editor is somewhat limited… as an example, font-size is a dropdown list from XX-small to XX-large. I used the ‘out-of-the-box’ options for font-weights, sizes and colors to create a visual hierarchy. I also took the opportunity to address the Helper Text… which used to be orange text on navy blue.

The top pods
Using weights, sizes and colors to create heirarchy

Feedback

That’s a million times better.

I think the numbers stick out to me a little bit more, which is good.

The coloring and the text… it’s much easier to read.

Data Tables

My Concerns

  • The small font
  • The orange text as totals
  • The left-right scannability of individual line items

Zebra Striping and Hover Row

The dashboard has many tables for displaying data. The first thing I did was bump the font-size up one size. Next, I opened FireFox’s Inspection Tools and added a few lines of CSS to give the table zebra stripes and a hover row. Finally, I made the totals black and bold instead of orange.

The hero element open
Adding striping and a hover allows users to better track data left to right

Feedback

Much better, yes. I like it. I like it a lot.

I think those are all valid. Making those changes would be beneficial.

Buffer

Another improvement was the addition of the ’Change Threshold‘ percentage dropdown. Instead of always displaying the percentage change in red or green, I proposed a “buffer percentage” that would be displayed as flat (or no change). Some users told me they only cared about large ups or downs… while others told me they wanted to see red or green every time. This solution accommodated both.

A new layout approach
One size does not fit all

Feedback

I guess that is interesting. If you took out a bunch of these where they’re not necessary, you could then instantly highlight the ones that are necessary.

I can immediately look at the colors and my eyes would recognize that there’s more red or green, or it’s about the same.

I like the change arrows. I’m a fan of those because I like rooting for all green.

Outcome

The font and table styles were implemented across the entire dashboard. In November, 2021, I conducted an audit of the dashboards and all of the pods… and created this document, which I named The Poditlaunch.

More Case Studies