WASHINGTON MUTUAL BANK

PROJECT DATES: January 2007 - July 2007

[ www.washingtonmutual.com ]

Washington Mutual is the United States' largest savings and loan association. The company provides retail banking, mortgage and consumer lending, business banking and lending, credit card services, commercial real estate mortgage and consumer investment services to consumers and small businesses through their 2,600 branch locations and newly redesigned web site.

WaMu: Homepage

As Senior Presentation Layer Developer, I was in charge of interfacing with the client and architecting the new presentation layer templates for WaMu's new online transactional banking web site. The assignment included DHTML/AJAX development, client side performance tuning, and accessibility improvements for the user experience.

DHTML Pay Bills and Loans Table

The Pay Bills and Loans template is one of the most central features of WaMu's online banking site, providing users with a view of all loans and payees, amounts, and totals for account holders. I designed the template's structure using tabular data mark-up and used JavaScript to calculate billing amounts, payee row highlighting, and enhanced content tabbing.

» View Extended Data Grid Prototype

For security and performance reasons, we created a custom JavaScript library to address the specific needs of the new site (e.g. getting/setting/checking classes, event management, cookie management, DOM node management, and XHR normalization).

AJAX Messaging Center

For the Message Inbox Center, which provides users with an online e-mail style repository of messages from system administrators and customer service, I built a custom AJAX protocol that relieves the need for page refreshing when accessing messages. Banking customers can read, replay, save, and delete messages without waiting for synchronous server responses.

» View Message Inbox Center Prototype

The AJAX interaction model also provides error handling for both user and server issues. We also chose to use JSON to handle data transfer because of its speed, ease of use, and language independent nature.

Accessibility & Performance

WaMu recently rated highest in web site accessibility and performance, compared to their competitors, so providing accessibility features and performance tuning for WaMu's online banking application was a major requirement from the client. To address this need, we designed and built several accessibility and performance paradigms into the templating structure:

Text Zooming: every page has a text zooming feature that is accessible from the top right corner of the user interface.
CSS Buttons: we designed and built CSS styled submit buttons that follow WaMu's branding requirements, reduce the need for more HTTP image requests, and provide and ASCII based labeling system for the buttons that will be easy to update for the Spanish language version of the site.
Keyboard Navigation: all forms where designed to be accessible using keyboard navigation.
Web Standards Based Semantic Structures: content was tagged using semantic mark-up, while providing clear separation of presentation layer technologies.

WaMu: Sign Up

WaMu: Transaction History