Commerce Bank Project Overview

Commerce Bank Home Page

Commerce Bank Home Page

  1. Ads system

    Researched and developed an XML and ASP ad serving system for the entire site, minimizing the amount of content needed to be stored in the ads system. All necesssary styling and formatting automatically applied through XSL templates, eliminating the need to manually code each ad and improving visual standards across the site.

  2. SWFObject

    Incorporated SWFObject Flash embedding system to allow for seamless, standards-compliant flash insertion with reliable image-based fallbacks. Used within ads system to automatically generate embedding code based on minimal parameters, reducing security risks.

  3. Custom Modal Windows

    Developed flexible modal window system based on jQuery "simplemodal" plugin. Created look and feel, CSS, animations, and script modifications to increase flexibility. Ultimately used on almost every page on the site, for account access, disclosures, and anything else that previously relied on popup windows. Does not interfere with normal link function if JavaScript is disabled or a user chooses to open the link in a new browser window or tab.

Commerce Bank Personal Banking Page

Commerce Bank Personal Section

  1. Site Navigation System

    Developed, refined, and intensely tested a full back-end navigation system based on modular ASP includes using XSL processing from a single navigation file. Page titles, navigation, and breadcrumbs are all generated with clean, minimal HTML. Independently developed 100% of the code for these modules, including XML, XSL, ASP, and CSS. All styling is added through cascading selectors that hook to the navigation <div> ID, minimizing the amount of code the server must generate.

  2. Content Migration

    Responsible for porting the entire Personal Banking section over from the old site design. Worked intensely with Web Marketing to develop new layouts and design elements as needed. Nearly 100% of the code in this section is mine; from the ASP used to generate page structure to the CSS used to format it. All jQuery modules and functionality were written by me as well.

Commerce Bank Credit Card FAQs Page

Commerce Bank Credit Card FAQs

  1. Custom FAQ System

    Developed a clean and flexible expanding FAQ plugin used in all FAQ pages on the site. Insertion of link highlighting, collapsing content, "expand all" buttons, and any additional dynamic formatting is handled by the plugin, ensuring that users without JavaScript will still get all the content on the page. Simple addition of the CSS class "faq" to each list is all that is required to add this functionality to a page.

  2. Offsite Link System

    Designed and developed a secure offsite link system to display appropriate warning messages to users when clicking links that navigate away from the site. Utilizes server-side XML processing to identify the link, and delivers either a default or customized disclaimer to an AJAX modal window. Eliminated the need to create custom exit pages for all offsite links.

Commerce Bank Credit Card FAQs Page

Commerce Bank Auto & Motorcycle Loans

  1. Disclosure System

    Independently developed a flexible disclosure system used on every page in the site, consolidating hundreds of scattered and inconsistent legal disclosures into a simple structure. Completely eliminated the need to perform time-intensive manaul updates of page disclosures when offers or regulations changed.

  2. Emphasis on Text

    Spearheaded a site-wide effort to reduce dependence on graphical headings and buttons, drastically reducing page load times and increasing search optimization. Used advanced CSS techniques to allow for maximum flexibility and reusability of design elements without sacrificing beauty.

Commerce Bank Credit Card FAQs Page

Commerce Credit Protection

  1. Accessible Tabs

    Designed and developed a flexible and accessible jQuery-based tabs system used throughout the site. All content for each tab is pulled from within the page, rather than relying on outside AJAX files, to improve search results, accessibility, and printability of pages. The tabs system fails gracefully if a user has Javascript disabled.

  2. Accessible Tooltips

    Developed a fast, efficient, and accessible tooltip system to provide quick user feedback and definitions for terms. All content is pulled from an element's title attribute, ensuring that default browser tooltips will provide the necessary information for disabled users and those without JavaScript.

Commerce Bank Home Page

Commerce Bank Branch Locator

  1. Branch Locator Redesign

    Completely redeveloped the locator landing page to increase usability and user search options. Created all content and design elements for the locator, refined through usability studies, competitive analysis, and input from Web Marketing.

Commerce Bank Home Page

Commerce Bank Locator Results

  1. Database Restructuring

    Thoroughly analyzed and restructured the MapQuest database and redeveloped server-side XSL processing to deliver cleaner, more discreet information. Consulted with multiple business units and stakeholders to maximize flexibility, information accuracy, and ease of maintenance.

  2. Location Results Redesign

    Utilized accessible collapsing tabs and stacking feature icons to compact search results listings while increasing map thumbnail size. A vertical space savings of more than 50% compared to the original Locator design delivers more results on screen at a time, while clearly presenting more information about each branch than before.