• Current website lacked visual presence.  Needed to be more current.
• Current e-commerce system was old and clunky.
• Needed to be able to manage pricing of their product database more efficiently (over 9,000 products).
• Need to be able to manage their vehicle database (over 3,500 vehicles).
• Need a easy search tool for customers to find their products.
• Site needs to be much more user friendly.
• Check out process needs to be more efficient.
• Cart page needs to quote shipping.

We tackled the list of problems above with a new website design, a new e-commerce system, and a custom integrated vehicle module which allows Frozen Rotors to manage their vehicle database.

Before Redesign:

After Redesign:

For more details on technologies and more screen shots, check out the Frozen Rotors Case Study in the Portfolio section!

At this stage of the project, we take all the designs of the previous Design phase and do our web development.  There are 3 sub-steps within this phase:

1. Web Page Production – This involves HTML/CSS, javascript/jQuery development of all the interfaces
2. Browser Compatibility Testing – Here we test the interfaces against all major browsers (namely IE7, IE8, Firefox, and Safari – sorry, IE6 was not tested!)
3. Programming/CMS Integration – Once all interfaces are browser compatible, we do the heavy programming work.  This involves, first integrating the templates into a CMS (WordPress is our choice), and then doing any additional programming work to enhance the back-end, front-end, or both.

You might ask, at what point do you set up your staging area to test the interfaces?  Great question!  Our answer to that is the sooner the better.  In our project, prior to programming/CMS integration we set up our staging area where we were able to do some interface testing.  This gave us a good idea of how links and buttons functioned, and gave us a good idea of how the site would flow.  We simply hard coded the links so we could click around in our interfaces.

I should therefore throw in this step:

• Set up staging area upon completion of HTML/CSS templates.

Once we completed our HTML/CSS, we moved on to the CMS integration.  This is where we kind of got stuck.  We knew what we wanted, and wanted a solution that would take care of our needs.  Here were our main needs:

1. Ability to customize manager to add portfolio area projects.
2. Ability to easily add news items.
3. Ability to easily add featured projects to update home page.

Well, after some research, we finally settled on Drupal (pre-Wordpress) since we felt there was a lot Drupal had to offer such as a large community, functionality, and scalability.  So we went ahead and integrated all our templates into the Drupal framework.  That was a decision we regretted.  As we started adding our content, it was painfully obvious that Drupal was a convoluted, bloated mess.  We stuck with it hoping it would get easier as time went on, but that was far from the truth.  We ended up populating all our initial content, then never touched it again until a couple months ago.  It was at that point that we made the decision to reintegrate our website into WordPress.

Aaaaaahhhh…Wordpress.  What a joy it is to work within such a lightweight, easy-to-operate, simple publishing platform.  Part of the reason we didn’t initially go with WordPress was just that.  It was so simple, we were afraid that it couldn’t go past 30 in a 55.  Boy, were we wrong.  There is a lot of power under the hood.  I would compare WordPress to a Geo Metro body with the engine of a Dodge Hemi.  Very unassuming, but very powerful.

So in summary, we went through 2 CMS platforms and are now very happy with WordPress.  Next, we’ll dive into Phase 4 – Testing.

Wireframing creates a clear understanding of the direction we are going and the elements that will be used in the design. It allows us to change the layout around without a lot of time involved. If we were to jump directly into design, there would be a lot of time spent on the initial design, and if we didn’t nail it, there would be a lot of additional time spent on making any changes. It gives us a good feeling knowing that we can be reactive in making any necessary changes. Check out our wireframe below:

our wireframe

Thankfully, we were able to nail the wireframe on the first go at it since our designers are pretty awesome. Once the wireframes were completed and approved, we moved on to the design phase. The design was based off of the wireframe from the previous step. And this was where we could start to see things coming together. Check out the first design below:

Design V1

At this point we liked the direction, but there were a few things we didn’t like. Here’s a list of our first set of revisions below:

• Update logo
• Use bolder/darker color to match logo
• Change heading colors in Recent News list
• Change heading colors in What We Do list
• Add a hover “bubble” to the Recent Project area

That was about it in terms of our revisions. Check out our version 2 design below after we made our revisions:

Design V2

At this point we were quite happy with the home page design so we were ready to move on to the interior pages.

The first page that we worked on was a general secondary page or our About Us page. This gave us a good place to start and showed what a 2-column layout looked like.

About Us Page Design V1

We liked how that looked so we moved on to our next interior page which was the Our Work section. This section was a little more difficult since we had to figure out what we wanted it to do technically. We knew we wanted some cool jQuery stuff to happen when the user rolled over the image so we kept that in mind as we designed. The design just started off with a simple listing of thumbnails. We didn’t need to over complicate it since we just wanted to get a feel for what it would look like. Here was the first version:

Our Work Page Design V1

This was a good start but we didn’t like the color of the section bars, so we changed that and also added some text next to the title. Here was the final and approved version:

Our Work Page Design Final Version

Our next page was our project landing page. This was the page that would showcase each project in our portfolio along with showing a few screenshots from that project. Here was our first design:

Project Landing Page Design V1

We liked the overall layout, but again, we didn’t like the color of the top orange bar or the blue button, so we made that change, and here is our final and approved version:

Project Landing Page Design Final and Approved

Finally, our last page that we needed to design was our contact page. Here was our first take:

Contact Page Design V1

We didn’t exactly like how that flowed. We decided our door image was a little too big and wanted to make the information flow a bit better. Here was our next and final crack at it:

Contact Page Design Final

There were a couple other page designs, namely the Services section, but I don’t want to get into that since it follows the same process as explained above. So, that concluded our design phase. Let’s move on to the next phase!

• Home
• Our Work
• Services
  • Graphic Design
  • Web Development
  • eCommerce
  • CMS Integrations
  • Email Marketing
• About
  • Our Process
• Contact Us
  • RFQ Form

Then, we generated a detailed site architecture document based on the sitemap as seen below:

Once we had our sitemap and site architecture document in place, we were set to get started on Phase 2: Design.

• Phase 1 :: Define
• Phase 2 :: Design
• Phase 3 :: Develop
• Phase 4 :: Test
• Phase 5 :: Launch
• Time/Cost Analysis

I mean, we’re seasoned web developers and after our initial content population, we got to the point where we simply didn’t want to have to deal with Drupal to add our content.  No offense to those of you using Drupal now and have no problem adding content, more power to you, that was just our experience.

The fact is, both Drupal and WordPress are about the same in terms of features, modules, and community.  Where we believe WordPress really shines is in two areas:

1. Usability – The administration area in WordPress is so easy, it’s not even funny.  Our clients don’t want to have to spend a lot of time adding their content.  They just want to get in and get out.  WordPress gives them that ability.
2. Extension/Customization – The ability to extend WordPress to fit your business requirements was critical for us.  We’re able to easily customize WordPress to meet our clients’ requirements.