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:
- Identify the client’s expectations for the new site
- Highlight functionality from the existing website that should be maintained (or not)
- 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