Advice/recommendations for improving Design and UX of dashboard
Hi everyone,
I'm working on a subscription manager, not a designer so having trouble making it look appealing. Here's what I have so far.
Functionality wise the dashboard is just to show users their subscriptions, as well as details about the subscription such as price, payment sched, next billing date etc
I don't know if it's too plain, hard to look at etc, and not really sure where to go from here
Any advice would be appreciated!
Trending on Indie Hackers
Hey,
I think your main issues are spacing and colour choice.
Check out the example redesign I quickly made to give you an example.
https://imgur.com/RzQ0Zjp
The main changes Broken down are:
• Using the primary purple as a background makes the logo stand out more and also makes the page look more vibrant.
• Having the user pill badge on the navbar improves the UX and fills the whitespace a bit. Also the darker purple gives it a bit more depth
• The "All subscriptions" text is centred so it aligns with the cards
•The body had a background of #F5F8FB, this allows white cards to stand out more and also makes it easy to add a box shadow.
• Adding the subscription cost is good for UX
• You could maybe add a label on top of the card like I have done with Spotify to signal the subscription is close to renewing
• Overall I've rounded the buttons and the navbar user to give a softer feel.
It's still a bit bare but that's not necessarily a bad thing. You could maybe consider adding "Total subscription costs" and a breakdown between categories like "30% Education, 50% Entertainment, 20% Productive" in a pie chart or something to take up a bit more white space.
Cards box shadow and border-radius is:
box-shadow: 0px 15px 30px rgba(#404B63, 0.1);
border-radius: 25px;
Hope this helps you out, have a good one!
Nice effort, its a major upgrade from the current design. Even the top nav bar alone.
Wow! I really appreciate this, thank you very much! I'm definitely considering the pie chart breaking down the costs as well
My initial thought is maybe a table view would suit the data you have here. The columns would be:
[Icon] [Service name] [Next bill date] [Price] [Manage Button]
If you could then plot this only a monthly graph showing when these bills occur and how it aggregates into a total monthly spend would be really interesting to me too.
I would recommend go to https://refactoringui.com/ It's a very useful resource to learn how to design UI's and what to look at.
Yes, I came here to recommend the same. Search for Adam Watham's videos on Youtube, he "modernizes" some designs, including dashboards.
Maybe try to add even spacing between the app boxes at the side and at the bottom. Also blue outline for purple button does not look good. Try to make outline/box-shadow with same purple color but reduce opacity to maybe 0.5. For the form you should group labels with their inputs. Right now your labels look like they are sticking at the bottom of previous input.