seanalan

Project Status

Status: Live
Launched: Oct. 22^nd, 2007
Web Site: Rustic Elegance Doors

Project History

This was a really fun project that Commotion Studios asked me to do for one of their clients. Andy did a great job with the overall design, Flash elements and fundamental Cold Fusion. My role was to build the database, order forms, login and user level access as well as the admin management console. It was a lot of fun due mainly to the significant challenges I set out to accomplish and felt like the site functionality was up to date with current web trends and best practices.

Goals & Objectives

Rustic wanted to provide a way for sales people to log in to the site so they could then submit and manage orders, along with other customer relations tasks such as requesting collaterals. In addition, tools were needed to allow Rustic to view recent orders, manage dealers and associated sales personnel and track top performers. One of my main goals was to keep the site standards compliant while also relying heavily on Ajax to drive the admin mashup and make the forms easier to use.

How It Was Built

With any database driven work it’s pretty common to start with…well, the database. It also makes sense in terms of the MVC programming pattern. The model can be equated with the data tier that runs any software application and is essentially the information the application is going to work upon. For web applications the model is typically a database (Access, SQL, mySQL) or XML. For this site, SQL Server was the weapon of choice.

Once all the tables were created and some of the relationships defined, development could begin. Ideally every aspect of the application is planned, mapped and perhaps most importantly, agreed to by your client! However, almost all projects require changes and updates along the way for any number of reasons. I have found what works best for me is to have definitive goals while being flexible along the way. Whatever you do, don’t be afraid to tell your client when ongoing rounds of changes have exhausted the budget or better yet, have a contract that states how many designs are included in your estimate!

Anyway, with the database ready to go, I started by using a pseudo Fusebox model which allowed me to isolate all the functionality for each feature of the application. So for example, all the code to add, edit, delete and display the sales people is contained in one folder. An index page has the different ‘fuse actions’ that determine which files to include.

Coding, coding, coding. Cold Fusion was used for the middleware client to pull the relevant stuff out of the database and display it. Of course, Javascript runs the UI, makes the Ajax function calls and validates forms. I started with the dealers and their sales teams, listing each dealer name with an expandable area to show more detailed information such as their address and phone number. Below the dealer information a list of the sales associates and their phone numbers were also listed. Clicking the edit or add links brings up the appropriate form without refreshing the page. All the functionality to manage resellers and sales people is contained in one place so the admin does not have to constantly go back and forth between pages to perform simple tasks.

You may have noticed all my test data is still being displayed. When a sales person submits the order form an email is sent to them as a receipt as well as to Rustic along with being added to the database as a quote. Rustic can review the quote and if there are any issues with the configuration and door options get in touch with the rep. Once the quote has been changed into an order by the sales associate, Rustic gets another email with the go ahead. The client did not want to be able to create orders or change pending quotes into orders for liability reasons. They do however have the ability to remove pending items from the queue. User level access was built into the site so a sales person sees a different navigation bar at the top than an admin. Once logged in, sales people can see a list of their recent quotes, the number of days until expiration, and have the ability to update a quote to an order. Rustic guarantees their quotes for one month after they are given although pending quotes remain on the admin list for six. They also has the power to renew a quote through the admin if the price is still valid.

Ajax - A Whole New Kind of Clean!

Ok so maybe Ajax isn’t all that new per se but I tend to not jump on Internet technology bandwagons too quickly. With so many out there, unless adoption is widespread, there is always a chance of it going to the wayside. Since the term was coined by Jesse James Garrett in 2005, the use of Ajax has literally exploded and in most cases have made Internet applications a lot better. So, I figured it was safe to put the time and effort into learning it. Ajax goes a long way for creating user centered web applications that are more intuitive to how the person using it thinks instead of the user having to ‘decode’ the system. Beyond that, Ajax also allows the programmer to build web apps that conform more closely to traditional desktop applications.

For Rustic Elegance, the other major use of Ajax was on the Quote/Order Form. Since the form is somewhat long and fairly complex my intention with the design was to group related fields and controls so the user could better focus on one section at a time. Titles also give the controls in that group a bit of context. Almost all of the fields at the top are pre-filled based on the user login saving a lot of frustration from task repetition. When the page first loads, options that are dependent on others are disabled until the user selects a collection from the first drop down. As choices are made the options below become available based on possible configurations with what has been selected. When changes are made to the core options in the Door Design & Construction section, the options below are again disabled until the required options have been selected again. Once the door size has been chosen the pricing can be determined and running totals of both cost and retail pricing are continuously updated as the sales person changes options. Not all options effect pricing but there are a number of them to track!

Little features also give users visual cues or further information on the fly. An image appears next to the door shape drop down to show the basic arch shape, a note appears below the glass if the option will cost more along with several others.

Overall, I was very pleased with how the site came together. The admin is functional with Javascript disabled and because the site was built using CSS and XHTML, is based on current standards while fully functional in all modern browsers including IE 6. It was a challenging project that helped me conceive of web based applications in a whole new way and take my skill level up several notches.

Technologies Used

Credits

I collaborated with Commotion Studios on this project and they did the front end design, flash movies and Cold Fusion programming for the public areas.