Portfolio

Featured Work: SpringfieldInterchange.com

VDOT - Springfield Interchange

Type: Web
Client: VDOT - Springfield Interchange
Firm: Redmon Group
Date: October 2006
Tools: XHTML, CSS, AJAX, ASP, SQL Server
URL: http://www.springfieldinterchange.com

The Virginia Department of Transportation's (VDOT) Springfield Interchange Improvement Project web site was redesigned to comply with new state web site regulations. The regulations mandated that all state-run web sites have consistent state approved header links, a 50px tall banner for the site logo, breadcrumb navigation, fluid/100% width layout, standardized copyright notices, and be W3C compliant using XHTML and CSS.

The original Springfield Interchange web site was designed for 640x480 (as shown in screen shot #1). The new site design needed to incorporate aspects of the old site, as well as being consistent with VDOT's other web sites. The green and yellow color palette was derived from the old site and the arch in the navigation bar was a familiar feature in VDOT's other sites.

The previous version of the site was very cluttered. The aim of the new version was to present all of the information in a more useful way. Consistent header usage and size, defined content areas, and shaded background content blocks for focus were all used to present the content. Breadcrumb navigation was required, but the site structure was simplified so that the deepest page was only one directory deep. In addition to the breadcrumb navigation, the main navigation in the left menu is changed to the roll-over state while within the section to give the user more visual cues as to their location.

Also worth noting is that the previous version utilized ASP for some of the pages, but not for all. In the new site, all pages have been converted to ASP pages with header, navigation, and footer includes to allow for easy updating.

My responsibilities on the project as Lead Designer/Developer included: Site structure design, wire-framing, site graphic design, XHTML template development, CSS template development, high-level page development, minor ASP editing.

View site screen shots by clicking on the thumbnails in the right column »

Web

CommuterDirect.com
CommuterDirect.com Corporate Services
BicycleTherapy.com
SpringfieldInterchange.com
MarjimShoe.com
DesignRoom - Flash Project

Print/Design

BicycleTherapy.com Launch Ad
Bicycle Therapy Back To The Books Sale
Bicycle Therapy Litespeed Sale

Media

3D Renders
Philadelphians On Their Phones
Marc C. Prison Recordings
Soul Baker Group Recording
Mini Cooper 360° Virtual Tour

3D Renders: Screen Shots

3D rendering of US Navy equipment.3D Rendering of US Navy equipment

Bicycle Therapy Litespeed Sale: Screen Shots

Bicycle Therapy Ad

BicycleTherapy.com Launch Ad: Screen Shots

Bicycle Therapy web site launch ad.

SpringfieldInterchange.com: Screen Shots

BEFORE: The original site was designed for 640x480, and was in desperate need for a redesign.AFTER: Springfield Interchange's new redesigned site.Lane Closures are posted every week to inform motorists of detour routes and construction delays.Commuter Solutions provides tips to beat the traffic.View the project's development over the past 7 years in the Photo Gallery.A two column template was used for most of the inner content pages.

MarjimShoe.com: Screen Shots

Marjim Shoe Company's home pageProduct listingsProduct detail provides all relevant product information, larger image link, and add to order button.Users can search the product database by style name or number. Users often visit the site to look specifically for a style they were told about over the phone.Users can add styles to their order, edit their quantities and size runs, and then place an order.Order confirmation, users can verify information entered is correct before submitting the order.Order Receipt, this receipt shows an updated order with style availability and prices entered by Marjim staff.This screen manages all the product styles available on the web site.Add new products to the system.Trade show listings.The order manager handles incoming orders, orders awaiting approval, as well as confirmed and shipped orders all in one screen to easily track the orders.The client can manage each individual order, view all the customer information, and add notes and product availability all on one screen. Client can also view a copy of the receipt and send an update email to the customer. Customer information on this order has been blurred for privacy.

Bicycle Therapy Back To The Books Sale: Screen Shots

Bicycle Therapy Ad

CommuterDirect.com: Screen Shots

BEFORE: CommuterDirect.com home page before redesign.AFTER: CommuterDirect.com home page after redesignOne-Time Order menu listing all the available transit systemsAJAX is used to load external date ranges and calculate complicated fares within the order forms.Shopping Cart: Allows users to adjust quantity, continue shopping or checkout.The Checkout process allows the user to go back and edit any piece of their information and then continue back to the previous screen they were viewing.My Account: A snapshot of the users account status and settings.My Account - Payment Methods: Users can add, update or delete payment accounts saved to their account.Help & Information System: Available to users from every page on the site to help guide them through any process.

CommuterDirect.com Corporate Services: Screen Shots

Corporate Services My Home: Account snapshot page for corporate customers.Manage Benefits: Employee order filter and reporting tool.Benefit Settings: Customers can setup benefit groups to handle different levels of contributions.Employee Overview: Details about the employee and their associated orders.Employee Order edit screen, users can update quantities, suspend an order for a given time period, or cancel the order.Reporting: Extensive reporting features are available for the account holder to track all aspects of their benefits.Help & Information System: Available to users from every page on the site to help guide them through any process.

BicycleTherapy.com: Screen Shots

Bicycle Therapy home page displays latest news and product releasesBicycle Therapy product listings allow users to browse by brand or category, sort product listings, and search for products.The product detail page gives users a larger image with current MSRP, description, and a link to the manufacturer's web site.Bicycle Therapy's content administration system allows them to manage all the content available on their web site with ease.When editing any of the content on the site, comprehensive editing tools are provided to allow users to format text as well as add images and thumbnails for the section.The image manager gives the client access to their entire catalog of images used within the site. They have the ability to sort, view, or upload new images to the directory.The Click Report gives the client a detailed view of what ads their users are interested in.After the CMS is done processing a request, it takes you back to the parent section and provides the result of your request and publishes the content to the web site.The CMS comes with a Help section that provides detailed instructions to manage any part of the system.A support form is available from the CMS if they need any help with any aspect of the system.

Services

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