During a competitive assessment, some users expressed frustration with the reliance of pie and donut charts as the only significant graphic component of most finance apps. One user said, “A pie chart show proportion. It doesn’t show me how much I’ve spent or how much is left”.
How might we visualize a user’s money in a way that helps them understand where they stand financially?
Exploration: Stacks Interface
2 of 5
I wanted a strong visual anchor that didn’t look like something produced in Powerpoint. I liked the dollar stack from the original Concierge Prototype, so I experimented with different configurations and got discouraged by how many stacks (and how much resulting scrolling) might be required to show sub-categories of Savings/Goals and Bills.
Exploration: Card Interface
3 of 5
I loved Apple’s Passbook interface, where a multiple cards stack upon each other then elegantly separate so you can view one card on its own. From the explorations of a possible stack-based interface, I realized I needed room for more sub-categories, so I appropriated the Passbook interface while I played around with making the category colors more distinct. It worked but I didn't love it.
Lesson Learned: Five Stacks Disguised as Two is Confusing
4 of 5
My Design Advisor, Marcos Weskamp, cautioned me that I should make my own mark with an original interface that relied on the strength and originality of the stack graphic. I conceded he was right, and was determined to make the stacks work.
My solution—which I now regard as a mistake—was to bisect two of the stacks into sub-stacks. When tapped, the blue “Savings” stack split into “Short-Term Savings” and “Long-Term Savings” and the red “Bills” stack split into “Monthly Bills” and “Card Charges”.
One of the issues with this was a lack on consistency. One tap transformed the green Spending stack into a Spending view, while it took two taps to get to the other views. Even worse was demonstrating it—it was silly to explain the home screen as three stacks when it was actually five stacks I would walk a user through.
5 of 5
I heard from users that they were confused about how we handled credit cards. The Credit Card view only considered displayed recent purchases and not longstanding debt. In fact, debt wasn't even part of the interface yet, I had hoped to add that later. It was also confusing to have a stack called “Savings” when all the money displayed was in the user’s checking account. I redesigned the interface so that the red Bills stack contained only Monthly Fixed Bills. I then added Credit Card Debt as a series of goals in the the blue Savings stack which I renamed, appropriately, Goals.