12Sep2009

Redesigning the Mint.com Bugeting Screen

Not too long ago, Mint, a popular online service for managing your finances, redesigned a great feature which enables you to set a monthly budget and track your progress against it.

My wife, who is the main Mint user in our household has been struggling with it ever since.

One of the main issues is that the redesign of the budgeting page (for some reason they call it 'Planning' which makes no sense to me) is now much longer. Consequently, it now requires much more scrolling up and down the page in order to get an complete picture of your current budget status.

A comment in the support forums echoes this view:

The budget section is nice but takes up too much space - make this smaller so that it is more usable and concise - the old view was much better.

Sample from the Mint budgeting page: before

However, with a few CSS tweaks, I was able to reduce the length of our budget screen by 20%. In the example below, you can see that 6 budget items are now visible in the same space that could previously only fit 5.

Sample from the Mint budgeting page: after

I also took the opportunity to make some of the very light gray text darker in order to make it easier to read. Mint is a great tool for managing your finances, but I do feel that they have a way to go on its usability in certain areas.

Posted on: September 12, 2009 | 13 Comments

13 Comments Posted

I want my old Mint back.

1. Posted by Lucky Mom on September 12, 2009

a simple but effective change. i'd like to say that the gold '$110' bit is slightly harder to read on the grey background than it was on the white background.

2. Posted by Evan Skuthorpe on September 14, 2009

Evan — good point; yellow on anything other than a dark background is a bad idea. If I'd taken more time I would have done that differently.

Given how clear the yellow bar is below it, there probably isn't any need for that text to be in color too.

3. Posted by Christian Watson on September 14, 2009

You have to do something about those bots.. how about an article on captchas! ha

4. Posted by tom on September 19, 2009

Greetings from Greece!

Really interesting post. I didn't even know that websites like Mint.com existed before I read your story.

cheers

5. Posted by Alexandros on September 19, 2009

I feel that the previous design of mint was better.. and even it was easy to use..
i agree with ur point of "redesign of the budgeting page (for some reason they call it 'Planning' which makes no sense to me) is now much longer. Consequently, it now requires much more scrolling up and down the page in order to get an complete picture of your current budget status."

6. Posted by Anshu Verma on September 25, 2009

This is a really helpful blog post , thank you

7. Posted by Web Design Preston on October 07, 2009

I would prefer the previous design of mint too . It looks better with the gradient.

Eddie Cheng
Quape Solutions
Singapore Web Design Company

8. Posted by Singapore web design on October 14, 2009

Thanks for the info. Talking about Mint, they do not service users out of US. I got an account with them. But nevertheless i shouldnt side track here.

9. Posted by Xaby Web Design on October 23, 2009

This blog is helpful and effective. It's a really interesting post.

10. Posted by Web Solutions on November 02, 2009

Thank for the hint, I mean mint.com. Something for my brother to check it out.

11. Posted by spletne strani on November 12, 2009

thanks you for this informative post!

12. Posted by Singapore Web Design on January 04, 2010

excellent post, thanks!

13. Posted by Custom Fishing Rod on January 04, 2010