Baremetrics Dashboard Redesign

The following is quick redesign for the Baremetrics dashboard UI. 


Optimizing the UI for "the job to be done"

This dashboard is akin to a monitor showing one's vitals.  A user would reach this UI with primarily one goal, "let me quickly see what KPI I should be paying attention to". Therefore, I aproached this redesign with the goal of clarifying the UI for this intention. 


Limitations of the current live design

Since the metrics are in a two column grid a user has to scroll down fairly far to see all the metrics/KPI. Additionally the "Live Stream" feature seemed to be unnecessary when compared to how much screen space it took up. Those two constraints made me hide the Live Stream all together, making it something a user would have to be looking for (as in latest transactions etc).

Alternatively, a live feed ticker bar could retain visual interest without compromising the page. Of course much depends on how much engagement that particular UI creates. 

Core areas of the redesign

  1. Unifying the background color so that the page would have 3 background colors vs. 4. This helps the metric cards pop off the page. 
  2. I focused on the metrics card design, changing the typeface to a thinner more elegant feeling (Google) font. 
  3. Most importantly, I updated the % increase/decrease UI, changing it into more of a badge. This green/red badge redesign helps users quickly identify areas that need attention. It's hard to miss where you're under performing!
  4. Moving the metrics card grid from 2 to 3 across helps the user see more content at once. Since a "birds eye view" is the intention of any dashboard, I felt maximizing this UI made the most sense.
  5. The Live Stream is cool... but it's not as important as the metric cards, so I removed it. I wrote more about this over to the left under "limitations of the current live design".