Handling my finances is a huge emotional drain for me. I have a lot of student loans and I'm still learning how to budget well, something I didn't learn how to do when I was younger. 

 

Mint.com is a great tool that I dislike using. I dread logging onto Mint.com. When I talked about this experience with someone close to me, I mentioned that the core visual elements I remember were the "big red bars" that represented by debt. It's absolutely soul-crushing.

 

As a user, I cannot hide the Trends section, nor do I want to — this is important information that should be seen at a glance. However, I personally find the red used for the debt bars really harsh, especially when the gap between that and cash flow is so disparate. It's tough to digest.

 

Looking at the source code, the bars are created very cleverly with styled unordered lists (see below):

This is really cool, but it makes me wonder how text-to-speech renders all graphs when they're lists. Need to look into that.

 

Anyway, after an exchange with the Head of UX at Mint.com via Twitter, I decided to think about how I would approach the Trends section from a UX perspective, given my frustration with the content Mint.com delivers.

I took away the graphs and decided to keep the section text heavy. This makes the section more accessible from a disability perspective. I softened the red considerably. The darker pink evokes a sense of caution, but it's not in your face. I changed the color for Net to a neutral orange. The (-) sign at the beginning, for me, is enough to indicate that this is value is BAD. In the original Trends layout, if your net worth is also negative, you see more red.

 

The most important aspect of this panel is the Progress subheader. The overall tone is more positive, yet the information maintains the urgency behind the debt with the darker pink. I considered that maybe a user could have a choice in how they want to monitor their progress: by how much debt is reduced or by how much income is increased. I figure both could be displayed or even toggled in some way.

 

The subheader "Progress" is in the teal-green color that's directly taken from the Mint.com leaf logo. It's another neutral color, but because it's a cooler green, it evokes a stronger sense of calm. This is emphasized with the word "Progress." It's a very positive reinforcement of the word. Using the same color schemes from the Mint leaf, I created a simple button that allows a user to launch another area where they could see graphs. I do appreciate the visuals behind the bars, I just hate seeing all the red.

 

This was a simple project that took about maybe an hour to complete. My objective was to pinpoint what I strongly disliked about the current layout of the Trends panel. I think this is an adequate start to a solution.