Redesigning the "Budgets" page

I use Mint on a weekly basis (desktop + iPhone), and I think it's great! I do however have trouble navigating the "Budgets" page.  It's not as intuitive as I'd like to be.

I took the liberty of mocking up a new design for this page, borrowing design from the "Overview" page and the Mint iPhone app. I hope Mint's design team takes a look and gives it consideration.

Here's what I updated:

  • Bring the major section headings (Income, Budgets, Other Spending) inline with the graphics, as opposed to the left sidebar. It was difficult to navigate back and forth to understand that each section meant to tell me.
  • Rename "Spending" to "Budgets". Spending is a foreign term rarely mentioned elsewhere on the site. You're in the "Budgets" page so naturally you should see this term specifically called out. I want to at a glance know how money I have left available in the current month.
  • Rename "Everything else" to "Other Spending" and by default toggle the transactions.
  • For each budget, show me how much I'm over / I have left. This is what I always draw my attention towards on the iPhone app when deciding to make a purchase.
  • Indicate how much I've spent in a particular budget with text inside the bar chart (same as the iPhone app). If the bar label text does not fit in the bar, simply hide the text and show on hover.

This is a quick mockup but more work needs to be done. Especially the left sidebar is now off-balanced. Perhaps in a future v2.

P.S. Some of the numbers are faked for personal privacy reasons.

Original Mint Budgets Page

Redesigned Mint Budgets page