I was approached in August of 2009 by Creative Catalyst Productions (CCP), a world renowned art instruction video production company, to take on an extended contract to completely redesign and rebuild their websites. These sites, one for their video production company and the other for their video streaming / delivery company, are the backbone of their business and reach nearly ten thousand customers per week. This case study will focus on the primary CCP website.

The existing CCP site has served them well over the years, but is nearing 6 years old at this time. So, not only is the design dated, but so is the e-commerce software used to operate it. The client requested several things:

1. Create an interface that is inspiring and creative
2. Update the look and feel of the current site to be better organized and more user friendly
3. Locate a more robust and updated e-commerce platform
4. Transfer and update all existing content into the new site

Perhaps the biggest challenge of this list was the fact that they wanted an artistic, creative and inspiring interface that is also user friendly. Many interfaces found on / around the web today are at one end, or the other within this spectrum. It is rare to find a site that manages to capture both ends.

When faced with this challenge, I had two options: Go for the creative design and try to shoehorn in the necessary elements, or design the interface to include all necessary elements and then try to make it artistic. I opted to design the interface based on the items that I knew were available. I did this for a few reasons:

• Clients are often more responsible / able to give better feedback when they are faced with something tangible
• I had realized by this point that the CCP team was as stumped as I was in terms of the “artistic” requirement and I wanted to ensure that forward progress would be made
• The interface absolutely had to include certain elements (in terms of e-commerce, content, and navigation) and no matter what creative solution was decided upon, we would need these elements

Initial designs were conducted as wireframes. Elements were included from various web 2.0 conventions, in an easy to navigate layout. I realized, looking at this initial design, that we could quickly run into at least one of the same problems with the new design that we have with the current one. Despite the dropdown / expandable navigation, if we wanted to feature content, we just didn’t have enough space / places to easily do it. So, I did a second mockup that fit within the same general concept, but with some additional navigation on the left side of the main content space.

The CCP staff liked the direction of these designs, but were having trouble visualizing what the interface might look like when transposed from such a low fidelity wire frame into a higher fidelity prototype. To aide in their visualization, I worked with the CCP graphics designer to created some low fidelity, Photoshop mockups using components from our and other website(s).

With the approval of the CCP team, I began working with my own graphic designer to create an artistically creative and inspiring, higher fidelity version of the prototype. This is what we came up with:

The final version of the site is being developed and is slated for release in June, 2010.

Case Study Quick Facts
My Role: Designer, Drupal Developer, Project Manager
Staff Managed: Graphics Designer, PHP / Drupal Developer, CCP Staff
Team Involved: CCP Staff
Site Released: Planned for June 2010

Case Study

Late in 2009, I was hired by Oregon State University’s (OSU) Conference Services Department. The job: create two new interfaces for websites that would replace the existing Conference Services and LaSells Stewart Center sites. This case study will take you through the design process from wireframe to product release.

OSU Conference Services is responsible for booking and managing all of the events that take place at the Corvallis Hilton, CH2M Hill Alumni Center, OSU LaSells Stewart Center. I was brought in because of my expertise with the content management system Drupal, and was chosen over several other developers.

As with all of my design projects, I spent time early on working with the client to establish the parameters for the new websites. The purpose of this process includes several aspects:

1. Identify the client’s expectations for the new site
2. Highlight functionality from the existing website that should be maintained (or not)
3. Work through other websites and interfaces that the client particularly liked, or disliked.

The two websites were to be similar, but not identical. Both of them should be user friendly, crisp, clean, and modern looking. The Conference Services site should be professional, but not coldly so. The LaSells Stewart Center site should be artistic feeling, but as the LaSells Stewart Center hosts not only fine art events, but meetings and conferences, not so artistic that it appears to exclude these other events. Finally, both of the sites should meet the strict branding requirements of Oregon State University, which include certain layout, color scheme, and functionality limitations. The Conference Services site will be the focus of the remainder of this case study.

Early designs for the sites can be seen in this wireframe. You may click on the image for a larger version.

The client was shown this wireframe and given an explanation, similar to what follows:

The top navigation and logo section of the site will conform to OSU branding requirements. This will include the OSU logo, and standard top navigation. Below this, would be a dropdown navigation section that would work with Drupal’s internal menu system. The “slider” is a JavaScript or Flash based image rotater, that the client will be able to update, that will display ongoing / upcoming / past event photos. The 3 nav items on the right will be links that will be featured content, such as the venues within the department. The nav items below the slider will be used for other featured content.

The client approved of this initial prototype, and from here I passed along all of my information to my graphics designer. He was instructed to skin the design, and provide a high fidelity, layered, Photoshop prototype for final approval from the client.

With the skinned prototype in front of me, some revisions were made. By this time, I had been informed that the planned dropdown navigation implementation had stalled, due to the modules I had planned to use not being on OSU’s approved list. A new primary navigation item had to be designed. As the client reviewed the site, they found that more and more they were unhappy with OSU branding requirements, and wanted variant color schemes.

Ultimately, we opted for a blending of the original and final, white, designs.

From here, it was my responsibility to create a fully functional and compliant Drupal template, based on this design. All necessary HTML, CSS, and PHP coding were handled by me personally. I also handled the relevant Drupal settings and configuration. Content was mostly placed by the client.

The final product has been released, and can be seen online at Oregon State University’s website.

Case Study Quick Facts
My Role: Designer, Drupal Developer, Project Manager
Staff Managed: Graphics Designer
Team Involved: OSU Conference Services Staff and Central Web Services Department
Site Released: April 2010