July 23rd, 2009

Case Study: www.CavendishScott.com

Our finished Cavendish Scott website redesign

Our finished Cavendish Scott website redesign

Cavendish Scott is a Denver-based company that specializes in ISO management system consulting, auditing and training.  They have a large client base and offer a wide range of business services, and needed a correspondingly large website overhaul to match the scope of their business activities.  Their previous website had become very dated both visually and technologically, and years of hodgepodge maintenance by many different people had left it in need of a comprehensive restart.  When we took on this project, the first thing we did was plan out an overhaul of the site’s information architecture, breaking it down into four categories:

  • Our Services
  • Our Company
  • About ISO
  • Contact Us

As we were planning the information architecture, we noticed that most of the current site’s content focused mostly on talking about the company itself, with little written about how they could help the customer.  So we made sure to boost the amount of content in the Our Services section as well, to increase the focus on serving the customers’ needs.  The “Our Services” section was further divided down into three separate categories, based on the company’s three main areas of business: ISO consulting, ISO auditing and ISO Training.

After we had the site’s new information architecture planned out, our redesign process followed our standard web design workflow: Visual design, followed by XHTML/CSS template construction, followed by development and implementation.  We focused heavily on the homepage during the visual design page.  It would be fairly content-heavy: there would be a company introduction, a recent news section, a newsletter signup form, a Featured Services area, and more.  We worked heavily on taking this information and presenting it in a visually effective manner, with a clear hierarchy of information — something that would draw the site visitors in to learn more, rather than overwhelming them and turning them away.  We made an eye-catching introductory paragraph and accompanying graphic at the top of the page, along with a prominent portion of screen real estate dedicated to Cavendish Scott’s current featured services.  We focused heavily on featuring strong calls to action — a large percentage of the page’s prime real estate is dedicated to quick-links to featured areas of the site.

Strong calls to action on the site's homepage

Strong calls to action on the site's homepage

Another key consideration during the visual development phase was the appropriate use of color: we focused on achieving the right balance between using enough color to balance out the site’s text-heavy content, without making it look excessively bright and loud — this was a professional business-to-business site, not the Cartoon Network.

Effective use of color livens up the text-heavy content

Effective use of color livens up the text-heavy content

The site’s development and implementation was similarly involved, with the site needing a good amount of custom functionality.  The homepage’s newsletter signup form was programmed to plug directly into the client’s iContact.com newsletter software API, with built-in form validation and confirmation emails to the client.  The website’s News section is powered by a WordPress engine, with a custom homepage script to pull and display headlines from the several most recent postings.  In addition, we built custom functionality into the training schedule page, so that users could quick-link from every class listed on the training schedule right to either its accompanying class registration form or to an appropriately auto-completed contact form to request more information.  On the training registration form, we used AJAX functionality in order to dynamically update the available course dates as users changed between the different training courses offered.

Quick-links to the appropriate auto-completed signup and contact forms

Quick-links to the appropriate auto-completed signup and contact forms

AJAX-powered dynamically updated input fields

AJAX functionality powers dynamically updated input fields

The finished project was a resounding success and a huge upgrade to the company’s website presence.  We were pleased to be able to work with Cavendish Scott on such a seminal project for their company, and look forward to continuing to work with them in the future.

You can see the finished site here:

www.CavendishScott.com

June 10th, 2009

New Website: NJDistrict.org

My finished redesign of the LCMS New Jersey District website

The new LCMS New Jersey District website

We recently launched a redesign and re-implementation of the website for the New Jersey District of the Lutheran Church—Missouri Synod (LCMS).  They had a district convention coming up in June and they wanted to overhaul their site in preparation for that event.  The project spec had three main objectives:

  • A visual redesign with a more professional look
  • An easy-to-use content management system to allow the district office staff to be able to easily add and update the site content
  • The ability for the district staff to continue using their existing web-based tools on the new website: Picasa photo galleries, Google calendars, Constant Contact e-newsletters, email, etc.
The previouse LCMS New Jersey District website

The original LCMS New Jersey District website

We broke the project down into four phases:

  • Site re-organization and information architecture planning: The original website, after years of organic growth, had inconsistent organization of its content.  Working with the district, we planned out a new top-to-bottom re-organization of all the site pages, divided by category.  For instance, “Missions,” “Stewardship,” “LWML,” and “Conferences & Conventions” were all moved into sub-pages of “Ministries.” We also planned out the major content and interface elements of each page type: Homepage, Menu pages, Body pages, Blog pages, etc.
  • Graphic design, layout, and look-and-feel: We produced several proposed mockups of a redesigned homepage layout and discussed them with the client.  Once we had the homepage visual design finalized, we used it as a basis to design the other site pages.
  • Building XHTML/CSS Templates: With the look-and-feel for all the site pages planned out, we built XHTML/CSS templates for each of the major page types, ready to be implemented into a content management system.
  • Implement the site on a suitable content management system: We researched various content management systems that would be powerful enough to meet the needs of the client, but still simple enough for them to be able to easily pick up and use.  In addition, due to budgetary considerations, we also wanted to use an open source solution.  We ended up selecting SilverStripe, an open-source, PHP/MySQL-based system. Daniel Bergquist handled the development and implementation of the site, converting our XHTML files into SilverStripe templates, and building in all the functionality that the site needed.  We wrote additional CSS as needed to cover all content contingencies, and corresponded with the client during the process.
The design for the site's various menu pages

The design for the site's menu pages

The design for the site's body pages

The design for the site's body pages

The new site launched on June 3, 2009, just in time for the district convention.  It was the biggest site that we’ve worked on yet, both in size and functionality.  It included such things as embedded Picasa photo slideshows, an embedded calendar, a dynamically updated homepage news feed, and multiple blogs with RSS feeds.  You can see the finished website here:

www.njdistrict.org

May 17th, 2009

New Website: PeteStrom.net

www.PeteStrom.net

Peter Strom's official website

We recently launched the official website for Peter Strom, a Denver-area singer and guitarist.  The site’s main purpose is promotional, with a short introduction, Pete’s repertoire, client testimonials, and song samples, with a call to action to a contact form.  As it is a small site, we were able to spend some time making a more complex and visually interesting layout than would be possible for a large, content-heavy website.  In particular, we focused on pushing the CSS code to create higher-end typography usually only seen in print media.  The visual design is based off of the logo and color scheme we designed for Pete a few years back.  We were also able to take the time to build some nice illustrative effects on the navbar buttons as well.  It was a fun project and a good change of pace from some of the larger website projects that we’re currently working on.