leanne bathurst

MCG Website Carousel

Background
As the manager for MCG's corporate website, www.mcg.com, I was responsible for keeping the website content fresh. The home page of the site included a rotating carousel, offering prime real estate for eye-catching content. My goal was to refresh the hero stories regularly, but because the site was built on Drupal 7, the carousel posed some design constraints.

Process
Each carousel story needed to be sized to 1674px x 500px, however, the primary content needed to be contained within the center 950px to accommodate smaller monitors. In addition, the right half of the carousel was set-up to display text, generated by the Drupal CMS, in a fixed position. Thus, the background image had to be cleaner and lighter on the right side to increase readability. My approach to desiging the carousel stories began with thorough research for appropriate stock imagery, followed by creative editing in Photoshop. Through trial and error, repeated testing and adjustments, I was able to create a background hero image that worked for each carousel story.

Solution
The carousel hero images were all created in Photoshop, and then uploaded to the Drupal CMS. The carousel was powered by a Node Queue module, and each carousel story was created as a node containing text and links. The eye-catching hero stories resulted in higher traffic for specific pages of the website, and they increased registrations for MCG's webinars and events.