Breaking Down the New Detailed Image – Part 3 of 3

Now that I’ve outlined the majority of the improvements on Part 1 and Part 2, I want to take a step back and quickly talk about why I think this was a successful project.

The Process & The Time Frame

We didn’t really plan it this way, but from the time we launched the previous cart in 2007 we were planning for this one.  We kept track of every potential feature that we’d want, both on the front end and the back end, we collected data in any instances where we weren’t sure about something, and we kept tabs of the e-commerce industry in general and noted any features that really enhanced shopping for the customer.

I think a great example of this is how when you add an item to your cart, you remain on the current category or item page to continue shopping.  As I outlined in Part 1, instead of taking the customer away to a cart page and then back to continue shopping, we simply show a drop down in the upper-right hand corner of the page.  This feature came from our own shopping experiences on Altrec and Old Navy.

Because we didn’t have any money to spend on this project, because we gave ourselves a limited time frame of less than six months, and because the project essentially involved one programmer (myself) and one designer (Mike), we had to think very hard about what was important and what could be left out.  Having those restrictions is almost always a blessing in disguise.  It essentially prevented “feature creep” and allowed us to focus on only the most important aspects of the shopping experience.

Design / User Interface

In my opinion, Mike did an A+ job with the design and user interface.  The design is tighter, simpler, and more modern than the previous site, however when you land on the site it still “feels” like an e-commerce site.  The products are on the familiar left nav, and the search box is across the top.  Only when you start browsing and see the AJAX drill through, or start searching and see the autosuggest, do you start to realize that the site is a little different than the average e-commerce site.  We tried not to over-use AJAX, to only use it in the instances when a page refresh would slow the shopping experience or when immediate feedback would improve it.

Programming Framework

This stressed me out a lot.  I thought long and hard about developing on a framework like CakePHP, something that countless programmers recommend.  If we truly were starting from scratch and I had more time, we probably would have.  But a lot of the pre-existing code was well written and stable, so the goal here was really to just make it more organized, secure, and scalable…as fast as possible.  For the forseeable future I’m going to be the one managing our sites, so after much back and forth I made the decision to essentially build my own framework.

My style is, well, my style, and I thought that for the most part I’d do a better job if I knew everything about every single line of code.  All of the common functions and classes are stored on our server in a location that they can be accessed by all of our sites, which will prevent me from rewriting code on future projects.

We did use the fantastic effects framework and also Lightbox 2 for images, both of which saved me a lot of javascript work so I want to make sure I give credit where credit is due.  But all of the server side PHP I wrote from scratch myself, specifically for this projects and for future projects of ours.  Starting a new e-commerce site could probably be done in less than a day if there weren’t any fancy features being added.  We want a platform that can evolve into many shopping sites while still being easily maintained.

SEO / W3C Compliance

We pretty much nailed the on-site SEO for DI:

  • Every page that isn’t behind a login is W3C compliant. With all of the complexities of a site like this, it wasn’t easy.  But the payoff is huge – our site will be easier to index, easier for browsers to display correctly, and easier for screen readers to decipher for the disabled.  It also helped us from making sloppy coding mistakes, such as using the same element id in two spots on the same page or forgetting to close a tag.
  • Every page has a relevant Title Tag and META Description.
  • All pages use proper HTML for headings, paragraphs, lists, etc. We also took it a step further and became one of the first sites of this scale to use CSS tables in our design (explained in my post about IE8 from back in March).
  • Every size of every product has it’s own re-written URL.  This was actually pretty tricky because on each item page you can switch sizes using AJAX.  We considered only having one URL per product and then always defaulting to the small size (as we did on the old site).  Ultimately though, we needed to be able to link to a specific size, both on-site on our browsing pages and also to send to customers.   So if a product has multiple sizes, there’s an extra directory for the size, such as
  • 301 Redirects for every old page, including pages dating way back to the original Miva and osCommerce carts.  Many links from back then still get clicked and indexed.  I spent a lot of time developing an intelligent 301 redirect system to keep everything search engine friendly without losing the links we’ve already built.
  • More Pages. Each manufacturer has it’s own page with information and the products we sell, the detailing guide has pages for each step in the process, and each product has it’s own review page in addition to the product page.   The review pages all use the title tag “{PRODUCT NAME} Product Reviews”, which hopefully will pull in some search traffic.
  • Sitemap, XML Sitemap, and auto-generated/auto-uploaded Google Base file.

The Back End

Much like the previous system, our back-end allows us to process orders in a matter of minutes.  If someone places two orders, they’re merged together to save us (and them) on shipping.  When we click to process each morning, a massive PDF is generated with all of the invoices for the day.  A text file is also generated to import into FedEx Ship Manager.  We print the invoices, import the text file to print the shipping labels, and export the tracking numbers back into our system.  The tracking numbers are now in the My Account section for the customer.  At 7 PM that night – after the packages have been picked up and are in FedEx’s system – the customer is emailed a link to their tracking information.  The invoices and shipping labels are printed in the same order so they match perfectly for whomever is pulling the order.  FedEx gave us a free printer for their labels so we are able to print both concurrently.

So while many companies manually do those steps, we have it automated down to a science.  Which is why just the four of us have been able to process all these orders in just a few short hours each day.

The Immediate Results

Business is a very bottom line type of thing.  Stuff either works and makes you money, or it doesn’t.  So far, this site has worked.  The feedback has been fantastic, much better than any project I’ve ever done before.  Conversion rate for the month of May (through the 26th) is up 0.5% over the rest of 2009.  And we reached our largest month to date in revenue by about the 23rd.  So bottom line, this launch of this project was a success in my book.

Time to take a step back and celebrate.  Then time to get back to work.  We’ve got a lot more awesome stuff in the works.