How to Present Simple Stats

How to design a simple stat without fancy graph visualization?

Context
In this post, I am going to walk you through what are the design improvements we can make for the current Payments dashboard, and why the current design is bad at presenting statistics at the moment.

Design Process
1. Start with content, not layout
What’s the most important to present in this case? The numbers. Because users care about it. Make the font size bigger than the regular paragraph font, and bold it.

2. Sub-content comes nextUse colors (Darkest VS Light shade of black), font weight variation (Regular VS Bold), size, spacing to present the main and sub-content. Notice how “Total Balance” is on the same line without breaking to the next line for easier reading. And even though the text is using the same font size 32px with “SGD”, there’s still clear distinction due to the different colors and Uppercase/lowercase.

3. Add in the remaining detailsIt’s still quite hard to read black text against  a grey background. So time to add a white background to increase the legibility of the text. Add a subtle drop shadow too so it doesn’t make the box look too flat.

Press L to show some love. Your comments and feedback are welcomed and appreciated! :)

Follow me for more upcoming work!
Portfolio | Twitter | Instagram | LinkedIn