Apple Ipad Pro  12.9_ - Horizontalmockupfinal.png
 
 

TIAA Mobile Banking

Using TIAA Bank’s current visual identity, I created a conceptual banking interface that expresses the unique personality of TIAA while simultaneously catering to the needs and financial goals of their clients.

Brief

Translate TIAA visual branding into a mobile UI format.

I chose to design a client account dashboard and tools therein for users to track their personal spending and overall investment growth.

 
 

Project Goals

My primary goal was to create a UI system, inspired by that of the TIAA website, that would be compatible for iPad and iPhone. The current TIAA branding features blocks of saturated color, lively type pairings, and chunky black and white calls-to-action.

Main focuses when trying to meet these goals were adherence to brand guidelines, prioritization of informational hierarchy, and maintaining the familiar structure and necessities of modern banking interfaces.

 
TIAA_Login_Overlap.png
TIAA Mobile Dashboardmockupfinal.png
Mobile Spending Overviewmockupfinal.png
 

Approach

Research

Throughout this process I used TIAA’s 2005 visual guidelines, but also found information through other sources. I inspected the TIAA website and social media for more detailed design specifications and used iOS material design to construct the overall layout.

Hierarchy

After researching and assessing the needs of a TIAA client, the necessary information was purposefully organized within the UI. The information reads left to right and top to bottom in order of its importance.

Layout

The design of each screen is structured in such a way that its content and personality can be recognized and comprehended at both up-close and far away. In both the iPad and iPhone layouts, information is giving ample breathing room, but balanced out with the large block of highly saturated color.

 

Color

The colors from the TIAA branding guidelines were used in this layout as a means of highlighting and separating sections of information. Warm tones were used minimally, in contrast to the desktop website design, in hopes of keeping the smaller, higher-density screens more comfortable and familiar for users.

Previous
Previous

Barcode

Next
Next

Commonwealth