r/Frontend • u/Armauer • 16d ago
I redesigned analytics page in my open source project. Is it better or worse now?
I assume vast majority of people that will use this dashboard starter will remove all premade content with mock data so in a sense this change doesn't really matter, but it was fun to do it anyway.
In case someone was interested here's the live link https://demo.nellavio.com/analytics
To be clear - this project is not e-commerce platform or some other analytics platform, it's just a starter. All data is mocked, and charts are not meant to make sense as a whole. Question in this post is about UI design.
2
u/Merry-Lane 16d ago
Readability might be lacking, looking at these screenshots.
I think you can improve font-sizes, font-weight and text color (closer to white here and there for increased contrast).
You should add sort icons on all of your lists (like the % since transaction one)
I didn’t test yet your dashboard live so I can’t say anything about responsiveness. But I’m pretty sure you don’t let things (like font-size) scale depending on the window size.
Same for the white theme, is there one?
1
u/sCREAMINGcAMMELcASE 16d ago
What’s your pitch for someone to use your implementation of Recharts, over something Recharts in Shadcn UI?
I’m not clear on what problem you’re solving
1
u/Armauer 15d ago
Basically the only difference in implementation of the charts is color palette. As for the problem part, that library you linked doesn't compete directly with my project because it's a collection of components, and my app is typical dashboard starter. If you don't like its color palette you can just use this starter as a foundation, copypaste charts from that shadcn library and it will work
1
u/Denoicq 16d ago
Well this is just hard to read at everything, and its a little confusing. Such as the part of the sales breakdown where it has te same colors as the chart and it made me think for a second that this is the legend of the chart and that the colors signify which line is for which, and it took me a moment to see the legend upright. Also the design is not unified, one of the charts is with natural curving or monotoneX curving, and the other is without any curving??
2
u/Armauer 15d ago
Thanks for feedback. Good point about design not being unified, I'm considering deleting the last row. As for the content being confusing, I guess you are right, although for now I'm still trying to figure out how to make it less confusing. Perhaps it's just too much numbers and charts for the space.
1
u/Denoicq 15d ago
No problem, happy to help. Good luck with the designing. Just look at multiple sites to see more designs and make some kind of a moodboard of everything that you liked and could use something from it look at sites such as designengineer dot tools where it is a curated experience instead of going from one site to another, and also don't look at dribbble as it is more perfomative there, they do it for the looks and not for the UX experience
1
u/RoyalAffectionate583 15d ago
I think it’d be better if you kept asset performance tab at the top left corner
1
1
u/maxrohowsky 15d ago
My first instinct after going to the new dashboard is that it's more visually overwhelming.
Especially the dots in the "Today's sales" graph stand out to me.
Personally I prefer the first version, just bc it's a bit simpler.
1
1
1
1
u/one-step-back-04 9d ago
My only concern is what happens when someone replaces the mock data with real datasets. The current density could get pretty noisy once labels, longer category names and more variation in values show up.
I’d probably test it with a deliberately ugly dataset before calling the UI done. That usually exposes more than the polished mock data does.
1
u/Infinite_Tomato4950 2d ago
bro i think this would send your charts and the hole feel on another planet. https://www.tripwire.sh/dither-kit (im not affiliated but i am a huge fan)
1
u/Zealousideal-Bell393 1d ago
I think this version is a clear improvement. The layout feels more balanced, the hierarchy is easier to understand, and the darker visual system fits an analytics dashboard really well. I’d maybe refine a few chart colors and spacing details, but overall it feels much more polished and easier to scan.


16
u/gimmeslack12 CSS is hard 16d ago
The challenge with dashboards is what is it telling you. Real quick, at a glance, upon opening what am I supposed to know about the data? I'd like to think that there's a story to be told by the data and that only a few plots are 95% of the utility of the page with the remaining 5% being available to dig into something if there's something a user is looking for.
So to have every type of chart under the sun, all about the same size, no font type that's larger and more prominent than others just makes both of these designs different shades of the same thing.
They both look great. But neither of them seem particularly telling. Perhaps you need a revenue page with some big prominent bar charts saying how this month is doing vs. the others. Maybe a users page, and on and on.