Portfolio

Featured Work: CommuterDirect.com

The CommuterDirect.com e-commerce system, which grosses over $6 million in annual sales, sells transit tokens, tickets, and passes to commuters in the metropolitan Washington D.C. area. The site is one of the CommuterPage.com family of sites, which is run by Arlington County Commuter Services (ACCS). ACCS's mission is to enhance the quality of life for travelers, as well as the economic vitality of Arlington, by reducing traffic congestion, alleviating the problem of parking, and improving air quality.

CommuterDirect.com is a complex e-commerce system because each of the many transit systems offers a wide range of individual products. The system provides two purchasing options for customers: One-Time orders and Renewable orders. The latter option is great for regular commuters that buy the same monthly pass for their train fare to work and this type of sale accounts for the majority of orders in the system.

Design and Development Process:
In order to simplify the purchasing process for the customer, the system needed to be redesigned to handle each transit system separately. In the previous version (see screen shot #1), multiple transit systems and products were listed on the same order form. Each transit system was separated out and the products were then associated with their transit systems (see screen shots #3 and #4). The new order forms needed to carry the information in a uniform fashion from the order form to the shopping cart (see screen shot #5), and then to the checkout process (see screen shot #6). AJAX and Javascript were used to handle different order form requirements and validations. Once the user adds a product to their cart, another series of ColdFusion validations check the product and product options to ensure that the selection is correct. After a product is added to a users cart, the order forms then have to trigger into another mode of validations to ensure that users cannot add products that conflict with the product already contained in their cart. Users also have the option of ordering a product as a Renewable order. However, the customer must go back to the order form if they would like to purchase multiple products as Renewable orders.

The shopping cart was expanded to handle all of the different product types and their associated product options; therefore, when viewing the shopping cart all relevant product option information is available for the user before checking out.

The checkout process was redesigned to allow the user to navigate this feature both quickly and efficiently. The user is able to access saved account information, including their payment method and shipping address. During the process the user is also given the option to pay by alternative payment media, or transit vouchers called Metrocheks. This allows a customer to enter the value of their Metrochek or transit voucher, agree to the terms and conditions, and continue with the checkout process. Once the user is finished selecting their shipping and payment options they are directed to the order confirmation page (see screen shot #6). The order confirmation page gives the user a chance to verify his or her selections and to edit or select an alternate selection. This process was key. If a user selects to change any selected shipping or payment option, they are taken to the edit screen and upon completion of editing or selecting an alternative option they are brought straight back to the order confirmation screen to re-verify their order before submission. This function is one of the site's strongest features, since checkout processes in other sites are often confusing, especially if the user needs to change something.

My Account: The old system contained a lot of user information yet never offered an extensive account management section for users to administer their own data. The My Account section was developed to allow users to update all aspects of their account like view their order history, manage their renewable orders and check the status of their current orders (See screen shots #7 and #8 for My Account details).

The CommuterDirect.com Help and Information system (see screen shot #9) is an XML-based system that is parsed by ColdFusion. The navigation structure is contained in one XML file, while each individual help file is contained in its own XML file. The help system is used throughout the entire CommuterDirect.com e-commerce system. For instance, if the user clicks on the help link from the Corporate Services section, only Corporate Services specific help topics will be displayed.

My responsibilities on the project as Lead Designer/Developer included: site structure design, application and information architecture, graphic design, HTML/CFML template development, CSS development, ColdFusion programming, SQL Server database updates and query development.

• Standards-Based Web Design & Development
• Section 508 Compliancy
• Content Management Systems
• Database Design and Development
• Print, Advertisement, Identity Design
• Audio/Video Editing and Recording