How to design the boring stuff and make it look pretty

Every once in a while, you get challenged with designing the boring and dull stuff. Usually, this is something like a table. Or anything else that is used to present the user with lots of data. You know, the boring stuff. How to make this more attractive (because we believe that’s important, right?) is often a hurdle. Asking ourselves how to make it visually more appealing is often not the solution, asking ourselves how to improve the user experience, usually is.

To demonstrate my point, I picked a random table design from Dribbble, remade it in Figma, and started wondering how to improve it.

The image below is how I found it on Dribbble. Nothing special: some tiny data displayed from left to right.

It looks quite okay on its own, but when stacked together, the boring looks start to appear.

What’s most important? What is the main message?

My first question is: what does this table try to tell the user? In this specific case, it was providing an overview of sports activities. Sorted by how many places there are left in each event. I could draw two conclusions here:

Are the activities with no spots left essential to show? I probably cannot do anything with them anyway.
Are the activities all equally important? Or do I want to emphasize that some events are nearing it’s happening date or are nearly full? Which could possibly amplify the popularity, and make sure I don’t miss out on anything.

This led me to the following design, putting more emphasis on the rows that deserve some extra attention. Besides that, the call-to-action stands out a little more, and the indicator of how many people already signed up (the critical part) is moved to the front with some extra visual care.

I felt the difference was not big enough, so quickly arrived at the following design.

In a complete table, it looks like this. Dividing the table into several sections. Making it easier to scan.

Do we need boring stuff? Can we get rid of the tables?

It’s always worth asking: do we need to use this format (referring to a table in this case) to display the data. For our situation, we could also use cards to showcase sports events.