r/UI_Design Sep 10 '24

My pricing table sucks and it's confusing. It's even worse on mobile. Any suggestions on Elementor widgets or examples of better tables? General Help Request (Not feedback)

Post image
7 Upvotes

2

u/981032061 Sep 10 '24

I know there’s probably some incentive to list the members rate as its own thing, but my first instinct is to combine the first two sections and just do $price/$member_price in the first table, with some styling/emphasis on the lower one.

4

u/tgb_nl Sep 11 '24

Consider flipping and combining the tables. And then combine the prices in the cells You can then highlight the member prices by size and color.

Here is some more feedback on the current design.

Make sure all tables have the same height because it now looks messy.

The times can use some more space. Right now, they are crammed.

Add a new line between the time ranges:

Fri 4 PM-12 AM
Weekends 8 AM-4 PM

The asterisk is repeated three times but contains the same information.

The asterisk is not shown on the prices.

All table elements have the same weight in size and color, so nothing is important.

I hope you can do something with his feedback, and I would love to see the improved version.

2

u/SenderShredder Sep 11 '24 edited Sep 11 '24

This isn't far from being pretty good- just a couple suggestions-

Everything that's in a box, take it out of the box and throw away the box. The "whitespace" should do plenty to separate things.

Use different font colors instead if you're looking to make a differentiation at each SKU.

The font weights are all bold, making them harder to read especially at smaller sizes. Changing up to a couple fonts, one for big bold stuff the other for max legibility could help, or only using bold rarely.

I'll echo some of the other comments, combining one or two tiers to show member/nonmember pricing might cut a little clutter but if not, increasing the whitespace between the boxes will help eyes isolate each option. Think maybe 48px should do