Ticket To Ride Homepage

The Ticket To Ride site was the first major project that I took on as part of InGrid Design. The major component of the previous site was a utility to filter through area vanpools. This was something that the TTR staff wanted to further develop, as well as bring the rest of the site forward insofar as design and functionality. The version that is live as of July 1st, 2010 is Phase 1 of this process. Phase 2 will be coming during 2012 as part of an ongoing 2-year contract that I helped InGrid Design win.

The first stage was of course design, headed up by our Creative Director Katie Walker. I had some input, but the majority of the initial design was handled by her. Down the line, I re-laid out the homepage as well as handled the layout of interior pages based on her original designs.

The tougher part of the development cycle involved the new version of the vanpool finder. As the project was unfolding, TTR was gaining new vans and new routes. By the time the site launched, they were in charge of 60+ vans with at least 20 more on order. This meant a need to increase the ease of use by both the staff to keep up with all the routes as well as making it easier for potential riders to find vanpools.

The first version that I cooked up had Google Maps (using the MX Google Maps module) integrated into the header area where you see the van/cars above the main content. Each page focused on one vanpool and the aforementioned banner had plotted map locations of the pickup and the dropoff point locations. The body area had a description of the vanpool as well as

However, this early version ended up being a bit much to keep on top of. Especially when trying to plot out the pickup/dropoff points and be as accurate as possible, we were running into problems were it was just too much data to keep on top of. The routes shift all the time to account for different riders and changes in drivers, and keeping up with the map locations and other data could have been almost a full time job in and of itself. So we scaled back a bit and went back to basics. What resulted was what you see now on the site – simple selection boxes filtering the origin point and the destination point. When finding the locations that you desire, a table pops up with average pricing, relevant times, and contact information.

To do both ways, some custom php had to be written and some custom database calls. Luckily, an Expression Engine staffer had done something similar for an earlier version of EE, so there was at least a starting point. His code didn’t work for this at all, but at least gave some great insight into what needed to be done. He even took the time to update his scripts for EE2, but we still had to create our own due to our specific needs. In several cases – notably the Louisville and Ft. Knox vanpools, we needed a secondary selection box that wasn’t needed/available  for the other options. This necessitated another level of work which looking back wasn’t that big of a deal. And.. what you see now is what you get.

Technology Used: HTML/CSS/Expression Engine/PHP/MySQL/Photoshop CS5/Coda/Flash CS5

EE info: Expression Engine 2, Solspace Freeform, EE Forums, MailChimp Subscribe,

Baptist Milestone.com

I haven’t been in the habit of updating this blog… ever. But I wanted to mark the launch of the new Baptist East Milestone Wellness Center site.

I recently helped Jay Lane Media finish up this project, which had seen several iterations and developers. Due to a heap of varying circumstances, the previous developers were unable to complete the site to the needs of the client. So I stepped in to help wrap everything up and finally launch this site which had been in progress for over a year.

While a considerable amount of code was in place, including versions of the now-live class scheduler, there was still a lot of work to be done. Among which was:

• Speed optimizations
• Transition of many elements such as the homepage from static images to readable, accessible, editable text
• Outline of a upgrade path as well as definition of which CMS utilites would be left accessible to the end client and which would only be accessible to the admin
• Security upgrades
• Rebuild several forms to match updated functionality requirements
• Cross-browser testing
• Provide a client-updatable system for controlling their personal trainer listings and other staff
• Rewrite parts of the class scheduler to allow interface options such as a weekly listing of classes

Some features of the site:

• Event Scheduler – filterable via AJAX, added Weekly tab, updated design to match client’s needs
• Membership Form – input data, receive customized printable trial membership card
• Section-specific collapsed navigation – you don’t need to see all 500 subpages of other child or grandchild pages in the same category. Doesn’t sound like much, but WordPress can make this a little bit of a pain at times.
• Customized backend – thanks to manipulation of theme’s functions.php file
• Security and speed optimizations via minification and .htaccess manipulation

Tech used: Photoshop CS5, Espresso, CSS3, HTML5, Javascript/JQuery/AJAX, MySQL, WordPress, PHP

TL;DR: Redid a bunch of existing work and added increased functionality, working both from designer’s PDFs and my own design elements, for both content pages and dynamic forms and content areas.

Close The Deal

One of my first projects with InGrid Design was to develop a site for a new grant program being built by GLI (Greater Louisville Inc.). We were tasked to come up with an identity, overall design theme for the program, several print pieces, web design, and completion of the site in about 3 1/2 weeks. We met our goal, and were proud to show the results.

The Close The Deal program was put in place to help those high school students that are the first in their family to head towards college. Providing documents and support for those who may not know what to expect or may be overwhelmed by all that needs to be done for the college admissions process.

I have to say, I spent years dissuading clients and bosses from using .NetNuke. Most of that was based on ignorance of ASP/.NET as well as experience with PHPNuke. But this project went very smoothly, was relatively easy to train the client to use, and everyone ended up happy.

Site Features:

• .NetNuke CMS
• Message Forums
• User Group/Permissions Management for Councellor only areas
• Rotating Flash images
• Scrolling javascript plugins

Tech used: HTML, CSS, ASP

Stepping Stone Software

I just found out that a quickie site that I designed back in October/November 2008 just launched… at the end of February 2010. It is a site for Stepping Stone Software, a product by Bluegrass.net. Stepping Stone is a web-based management system for Foster Care centers. It allows them to manage those under their care, adoption procedures, medical considerations, and much more. Good luck to BGN in launching this product!

Maverick Wine Gifts.com

I recently worked on a new site design (as well as some branding for new wines) for Maverick Wine Group’s new http://www.maverickwinegifts.com/. The site design was completed by myself, and I also coded the homepage. The store pages were coded by and are provided by Nexternal.com.

Heimerdinger Cutlery.com Screen Shot

In Mid 2008, Heimerdinger Cutlery got together with Louisville Web Group to not only bring about a change to their existing webstore, but to overhaul their entire business. Breaking everything out into several stages, the culmination of the project(s) has come to bear fruit for the world to see. HeimerdingerCutlery.com is now live, and racking up more and more sales every day!

Step 1

A new POS (point of sale) system – When LWebG came into the picture, Heimerdinger Cutlery was doing business much as they had done for the past 50 years of their over 150 year existence. Everything, regardless of an internet order, phone order, or a walk-in was written down onto a specially printed notepad and placed in-line in a box for processing. It was almost impossible to keep track of inventory, and factors such as ROI and sales trends were a pain to compute.

The old Heimerdinger webstore

The first thing we did was to gather information on what they had and what they needed. The POS system that was in place wasn’t even in development anymore, didn’t interface with their existing webstore, did hardly any reports, didn’t have any peripherals (cash drawer, scanner, card reader), and most of all did not interface with the Quickbooks Financial software that was running in the office. After doing a bit of research about what their needs were, we came down with a solution of purchasing Quickbooks POS Pro and suggested several peripheral packages from local-based POS supply companies. Heimerdinger ended up with a great deal on some of the software and hardware and were well on their way to a more contemporary workflow.

Step 2

Phone orders and preparing to sync everything together.

Step two of the process (besides training) was to get the framework for connecting the forthcoming new website with the new POS. At the same time, we needed to find a way for Heimerdinger’s employees to take phone orders at the same time that customers were checking out in the brick-and-mortar store. After some more research, we decided to suggest using Atandra’s T-Hub software. Certified as a Gold Intuit Developer, Atandra had numerous message board reviews that were positive. I installed the software on 4 of the in-store computers and commenced syncing the POS’s database with the T-Hub software. Within a short amount of time, Heimerdinger went from writing everything by hand to having the ability to make multiple real-time sales tied in with their inventory levels.

Step 3

Heimerdinger Cutlery sample product page

The Webstore. The biggest part of the project. The then-current/original webstore was built on a Cold Fusion foundation and hosted by Rick at Intent.net. This arrangement was working, but not necessarily the best setup at the time. The site had gone done for as much as a week in recent memory, and stability and ease of use was a definite desire. The root of the site was managed partially by Heimerdinger Cutlery (via Frontpage) and partially by Intent.net.

When we were in the process of making our plan during Step 1, we had narrowed down the webstore choices to OsCommerce and Magento. Ultimately, we chose OsCom to be the backbone of the new webstore. This is because Magento is pretty bulky (and at times very slow) unless you have a pure dedicated server environment. While we offered (at the time) various levels of shared hosting, we did not offer a dedicated server nor was that really in the budget. OsCom became the framework of choice.

Over several months of review and testing, the site went live on June 4th, 2009 – several days after the projected launch date. I wish I could say that it was due to the enormity of the project, but everything was pushed back due to a very, very unhelpful payment processor. After a late switch to Authorize.net, the store was ready for action.

Century Beauty Webstore

The Century Beauty Webstore project was primarily a redesign which incorporated javascript and installation of a blog on the site. It started off as a heavily customized OsCommerce installation that wasn’t working quite right (and looked pretty gaudy). Customers could purchase items, but ancillary parts of the system were out of wack. Besides the redesign to remove the 5 tints/shades of mauve, we were tasked with bringing the inventory system up to spec and integrating the other parts mentioned above.

The site is currently running just fine over at Bluegrass.net. Century’s internal server updates/receives updates on product information and quantity, the warehouse receives an automated printout of all sales orders straight from the store software, and customers are purchasing at a greater rate than before. While the store is limited to Salon professionals, there is now an expanded area of the site where non-professionals can get beauty tips, product updates, etc. via the blog. I’ve even integrated Century Beauty’s MailChimp newsletters into the site so members can review past promotions and non-members can catch a glimpse of what they’re missing.

MCTA screen shot

Web redesign and updates for the Montgomery County Tennis Association. Their previous site was about 5 years old and was pretty clunky. The old site was done with tables inside of tables inside of tables… which were inside of tables. I reworked their site hierarchy (it was larger than it currently is) and helped narrow down the pages that their membership would actually need. The site was built on top of a custom-built CMS system built about 5 years ago by Bluegrass.net

XHTML/CSS recoding for the CMS system, Javascript sliding on homepage, XHTML/CSS recoding for webstore (SunShop), collaboration on webform for New Players page (XHTML/MySQL – input/output to Excel)

OVCE Mockup

Ohio Valley Creative Energy is a Southern Indiana/Louisville based effort to build a sustainable arts facility using recycled materials and waste from the Floyd Co. (IN) landfill. They are currently in an early phase and busy raising capital.

This site was originally designed when I was in the Indiana University Southeast Design Center Internship and hand coded to XHTML 1.0/CSS 2.0 spec around April/May 2008. In December 2008, I brought the site over to the WordPress blogging system to give OVCE a much greater range of freedom with their site. It currently uses WordPress as well as E-blast plugins.

http://ohiovalleycreativenergy.org/