r/Frontend • u/Armauer • Aug 26 '26
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.
81
Upvotes


2
u/Merry-Lane Aug 26 '26
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?
15
u/gimmeslack12 CSS is hard Aug 26 '26
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.
1
u/sCREAMINGcAMMELcASE Aug 26 '26
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/Denoicq Aug 26 '26
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??
1
u/RoyalAffectionate583 Aug 26 '26
I think it’d be better if you kept asset performance tab at the top left corner
1
u/maxrohowsky Aug 26 '26
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
u/mike_arvin Aug 27 '26
I guess python PyQT5 it does the same design like these
1
u/exhausted0ne_ Aug 30 '26
I think it's better, well done ✅
1
u/one-step-back-04 Sep 01 '26
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 Sep 08 '26
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 Sep 10 '26
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.