Savings: Show Me The Money

Accounts are the corner stone of banking, with some people going as far to have accounts for each type of expense they have.

When we as users think about our goals when navigating to our accounts what are we looking for? Most people would say "how much money do I have right now", or "what have I been spending my money on", or even "I just need my details because I can never remember them and Adam owes me $50". Given these common cases as designers we want to give the user access to these functions as quickly, cleanly and comfortably as possible.

As users access their accounts there are a few bits of information that are at the top of the hierarchy. Firstly the feedback that they have indeed selected the correct account, this can be done by showing the users account name clear as day. Following along is the accounts available funds and current funds including any pending purchases. Third is access to the users account information and functions such as transfers and payments. Finally is the accounts history including purchases and bills.

Above I have sketched a new layout for an account page making sure to focus on the hierarchy I provided previously "Feedback -> Funds -> Details and functions -> History". By following a clearly defined hierarchy we can focus the most screen space on the highest priority features laid out by the structure.

Referring back to the sketch above the accounts title is clearly the focal point upon entering the screen, providing the user the much needed feedback. Following directly below the user is presented with what is likely the most important information they are seeking their available funds. Now the user has full knowledge of their accounts finances they are ready to access the functional features presented to the right. Lastly if the user requires further information their entire purchase and billing history is available to them below.