SHRM Chapter Websites: Worldwide Membership, Powered by Drupal

The Society for Human Resource Management (SHRM) is the world’s largest association serving the needs of the HR industry. With more than 240 chapters in over 140 countries worldwide, SHRM represents a total membership that exceeds 250,000 human resource professionals.
Each SHRM chapter oversees its own site which acts as a local hub of SHRM activity, providing news, industry updates, and event and conference announcements, as well as a complete member directory. Site updates are deployed by SHRM headquarters, while administration is handled by local chapter directors, who may or may not have any experience with website management. Here is an example of the new chapter site capabilities: Cumberland Valley SHRM.

Pitfalls of a Proprietary System

The original SHRM chapter site network was run on a proprietary CMS created with IIS and ASP under Windows. Expensive, clunky and difficult for newly-minted SHRM chapter webmasters to use, only a select few were able to successfully navigate the system well enough to add or modify content on their local chapter site. Seeing the need for a unified, accessible, and easily extensible solution, SHRM approached Saforian to revamp the chapter site network.

The Open Source Approach

Our challenge was twofold: not only did each SHRM chapter need a well-architected, branded site that less web-savvy administrators could comfortably maintain, they also needed a way to migrate old data stored in the existing MSSQL database to the new set-up.

We knew out of the gate that new websites would need to be rapidly configured and deployed as new chapters were founded, and we also knew that the chosen CMS would need to dextrously accommodate a significant amount of custom code.

Drupal’s extensible multi-site functionality, ease of customization, open-source ethos and massive module base fit the bill as an ideal platform replacement for the existing system.

Keeping Updates Manageable

It was clear that without a networked approach, performing maintenance and updates on 240 websites would quickly become a logistical nightmare. Leveraging Drupal’s multi-site capabilities, we crafted a site configuration to keep maintenance as undemanding as possible.

Each chapter site uses a single code base, but separate databases and files directories, meaning that while module and Drupal core updates need only be deployed once, each site has the flexibility to manage divergent content, users and settings.

Command-line Fu

The Drupal shell utility Drush was instrumental in keeping maintenance and deployment times down, giving us the power to automate updates or install modules to all sites with a single command. Coupled with the Permissions_API, Drush let us batch set module permissions via the command line.

Merging Old and New

Data migration was at once the most challenging and interesting aspect of this project. The old chapter sites ran on IIS/ASP/MSSQL, and each site was associated with anywhere from dozens to hundreds of members, files and disparate content types. After a several-weeks-long investigation into the best transfer process, a series of tools and procedures were developed to carefully relocate and reorganize the data.

Working with batches of five chapter websites at a time, we first ran custom scripts to move production data and files into a Drupal 6/MySQL system hosted on a migration server. Once any migration errors were fixed, code was placed in open source version control system Subversion, and the chapter site was transferred from a migration server to a staging system. The new site was cleaned up using Drupal, and finally transferred to its home on the production system, where site data underwent a thorough review from front-end and back-end users.

MSSQL and MS Access data was scrubbed and inserted into MySQL using a custom-built Drupal module, which could be run via the Drupal admin panel or the command line. The module imported HTML pages from the previous system and jettisoned superfluous tags, maintained the integrity of user profile data during transfer, and slotted survey results from the old system into a Drupal Webform-readable format.

Snazzy Features

After all was said and done, the completed SHRM chapter sites were intuitive, flexible and packed with useful tools.

SHRM Administration Panel

Drupal made it easy to create a tailor-made administration panel that helps administrators jump straight to the most important tasks while keeping the techie stuff safely out of the way. Through the panel, administrators can add and edit content, activate or disable memberships, tweak the registration process, assign roles and permissions, manage comments, and edit navigation menus.

Easy Site Configuration Panel

Using this fire-and-forget site setup interface, administrators can choose from five different template color schemes, upload logos, set the site title and contact information, set home page block configuration options, and integrate their site with Facebook, Twitter and Linkedin.

Searchable member directory

Provides member search by name and keyword, or by alphabetical browsing. Administrators can also use the directory as a filtering tool to send out mass emails to their member base, or only to certain member categories.

Customizable Member Profiles

While SHRM global requires that certain profile data be gathered on each member, local branches wanted the ability to add their own fields to member profiles. The Drupal Profile module was adapted to give administrators the power to define customized profile fields for their members, while allowing members to choose whether fields are private or publicly viewable in the member directory.

Paypal Integration

Chapter administrators are able to seamlessly accept donations and event registration payments via Paypal.

Meetings & Events Management

Admins were given an easy way to keep their members abreast of SHRM’s busy conference schedule with custom event content types automatically hooked in to collapsible home page blocks.

Forms & Surveys

The forms and surveys feature lets administrators gather, store, sort and download data from members and non-members.

Training Center

A detailed, all-encompassing built-in training center was created and included on each chapter site, with dozens of video tutorials and articles to help new administrators perform common tasks.

Notable Contributed Modules

Backup and Migrate – Simplified the process of migrating databases from development, staging and production environments, particularly useful in that it fully supports Drush integration.
Calendar – This module came in handy in the creation of a custom events calendar for SHRM conferences and chapter meetings.
CKeditor and CKfinder – A powerful WYSIWYG library and interface.
Private – Node access control for members-only content.
Scheduler – Future-dating content publishing and unpublishing.

Infrastructure

Four total servers were used, here are the configurations:

2 Load Balanced Web Servers

• Processors: Two (2) Intel Xeon Quad Core E5410 2.33 GHz w/ 1333 FSB
• Memory: 8 GB DDR2 PC2-5300
• Hard Drives: 2 x 146GB SAS 15K RPM Mirrored in Raid 1 (for redundancy)
• OS: CentOS 5.5 64bit (Redhat Enterprise)
• PHP: 5.2.10

MySQL server (with a second identical one for failover)

• MySQL server (with a second identical one for failover)
• Processors: Two (2) Intel Xeon Quad Core E5410 2.33 GHz w/ 1333 FSB
• Memory: 8 GB DDR2 PC2-5300
• Hard Drives: 2 x 146GB SAS 15K RPM Mirrored in Raid 1 (for OS) Hard Drives: 2 x 146GB SAS 15K RPM
• Mirrored in Raid 1 (for MySQL)
• OS: CentOS 5.5 64bit (Redhat Enterprise)
• MySQL: 5.1.34

Accomplishing the Work

At Saforian we believe in open source software and have promoted it since our inception. Drupal has played a significant role in allowing us to continue to create flexible, web-based user experiences that foster great visual design and efficient, easy-to-use functionality. It has become our go-to CMS system.

This particular project utilized a team of five individuals with the majority of the development effort being handled by a single, senior-level developer. We had several work streams running simultaneously to ensure an on-time release. Strategy and back-end architecture work started the project, with design and production work following and then full development and migration to finalize.

Our information architect and designers worked initially to define the structure, content hierarchies and overall design styling. An interactive prototype was created to support testing and to serve as a vehicle for gathering feedback from stakeholders and chapter members. Once the design was approved, we quickly moved into our development efforts, which included front-end HTML template production work; Drupal theme integration; module development and configuration; and complete migration exercises.

Pagebuild allows non technical users to build websites very quickly and easily. It was built on top of Drupal, with the idea behind it being to provide an editing interface that is so simple, even an adult could use it. This is a explanation of what we did and how we went about doing it (and why).

Motivation

Spoon Media has been building Drupal sites for the last 6 years. We generally do mid to large size projects and pretty quickly we noticed how often we were turning away business from companies with modest budgets. That wasn’t great for them, because most low budget web solutions are pretty ordinary and it also meant we were sending small jobs elsewhere. This was the main motivation for building Pagebuild – we wanted to let small business get a great website at a inexpensive price but still retain a high standard of product.

High Level Architecture

Pagebuild as a product consists of two main systems which we’ve dubbed front-end and back-end.

The front-end is the software that allows customers to edit their Pagebuild site. This consists of a series of custom Drupal modules and a whole lot of JavaScript that provides the easy to use WYSIWYG experience.

The back-end is the software that allows customers to signup, create and manage their websites. Aegir is used to provision and manage sites and custom Drupal modules provide a simple customer interface to the site provisioning and management process, as well as the standard account and billing settings.

Both the front-end and back-end are powered by their own Aegir platforms.

Of course we use a bunch of great Drupal community modules across both systems. More on that follows.

Front-end

In order to provide an incredibly simple site editing interface it was clear from the beginning that the bulk of the work on the front-end would involve using JavaScript to implement the desired UX.

jQuery, jQuery UI and a series of jQuery plugins are used extensively.

I’ll explain the motivations and provide some light implementation details for selected features.

Editing

It was very important for us that the editor was truly WYSIWYG. It wasn’t enough that a heading was a heading and bolded text was bold. We needed headings to be styled exactly the same whether the user is editing a content area or viewing it. As a result we threw out the idea of using IFrame based WYSIWYG editors such as CKEditor or TinyMCE.

Another requirement was that users should be able to freely drag and drop images from our Media Manager into the content area. Doing this with an IFrame based editor was not possible.

After much back and forth we settled on Twoism’s reviser as the base for the WYSIWYG editor. I say base, as significant Pagebuild specific changes were made in order to get it work just so.

The result is that we are able to provide a true WYSIWYG editing experience that is completely tailored to the Pagebuild Way.

One of coolest features of Pagebuild’s editing would have to be the ability to drag images from the Media Manager toolbar and drop them into the content area at a position that makes sense visually. Unlike other drag and drop solutions in web WYSIWYGs, Pagebuild won’t allow you drop an image in the middle of a sentence. With jQuery UI’s sortable plugin we are able to force the image to be moved around the content area and dropped in sensible drop zones.

Blocks and regions

Of course it’s not enough for users to be able to edit the main content area. In order to allow the user to create unique and flexible page layouts we leverage Drupal’s regions and blocks to make this happen.

When editing a page regions can be shown or hidden, and blocks can be added to regions. This all happens via AJAX, and creating/editing/deleting blocks happens on the page itself to prevent interrupting the editing experience. As an added bonus existing blocks can be dragged from one region to another.

Themes

We provide a number of free themes for customers to choose from. All Pagebuild themes are Zen subthemes. On top of being a great base for our themes it was required in order for our JavaScript to work, as we need all DOM classes and IDs to be consistent across themes.

When a user selects a theme from the Switch theme toolbar we simply set that theme to be the default for all users, and make sure the block visibility remains the same.

I’ll talk more about how themes are put together a below.

Back-end

Where the front-end development was largely JavaScript backed up by Drupal modules to make the magic happen, the back-end is true to its name in being largely the work of Aegir and custom Drupal modules.

Provisioning

From a customer’s perspective the Pagebuild adventure begins with sign-up. Here we capture the customer’s details, process the payment and provision the site.

We use Aegir to provision new sites automagically when the customer has finished signing up. Aegir, being as wonderful as it is, makes this incredibly simple. All you need to do is create a node of type site, and it will be added to Aegir’s task queue.

After sign-up the customer is automatically logged in and presented with the Pagebuild Dashboard. Once the site has been provisioned (which usually happens inside of 60 seconds) they can login to it and start editing right away.

In order to implement a Single Sign On the back-end acts as an OpenID provider. Our custom Drupal install profile adds an entry into the authmap table allowing them to login to their site without having to re-enter their login details.

The custom Drupal install profile on the front-end communicates with the back-end database to setup themes, roles, filters, pathauto and imagecache settings, amongst other things.

Once a customer has signed up they can add new sites to their subscription with a simple single page form.

Domain settings

When a customer first signs up they are asked to enter a subdomain for their website. Initially the site is provisioned as example.pagebuild.net.

Once the site is provisioned though, the customer has the option to use any domain of their choosing for their site.

Again Aegir makes this very simple. When the customer submits the form we check that the domain they have specified points to our IP address. This prevents the site from being unreachable if the A record doesn’t match. Once we’ve checked the A record points to the correct IP address we create a migrate task in Aegir, which goes off and renames the site.

Thanks Aegir!

Theme editor

Customers are able to choose from a set of free themes or they can make their own theme.

Using one of our themes as a starting point, the user can alter every aspect of the design from their browser. They can then save their theme with a new name, effectively forking it from the pre built theme we provided. This concept is used in both Drupal Gardens and in the Sweaver module, however both of those implementations allow so much freedom as to be confusing to a non technical user. We have taken the concept and made it harder to do silly things to your theme by restricting what HTML elements you can actually modify. Whilst this limits the power of the theme editor, on the whole it results in a better theme when used by a novice.

Custom themes

While we provide free themes for customers to use on their site, we also provide them with a service whereby they can purchase a customised design. This is not automated and involves the customer talking with a designer to get a result.

In order to greatly simplify the process of creating themes for Pagebuild we implemented a simple templating language that allows designers to write minimal HTML and as much CSS as they require to get the look right. Each theme only requires a single theme template. This is about all it needs to be:

Using the token module we replace the Pagebuild theme tags with the Zen markup required to make sure the theme works with the Pagebuild editor.

Designers upload the template file, a CSS file and whatever images are required and a complete Zen subtheme is automatically generated and copied into sites/all/themes ready for use.

The permissions on individual theme nodes ensures the theme is available only to the customer who purchased it.

Custom themes are currently only available to designers we have an existing relationship with. In the future we plan to open this feature up to more designers. Further down the track we will open the feature to customers themselves.

Subscriptions

Initially we tried using Ubercart, uc_recurring and various payment modules for the checkout and subscription payments. It turned out this added an unnecessary layer of complexity to the system. The Ubercart product wasn’t meshing well with the existing Aegir and Pagebuild CCK types. Eventually we replaced the whole thing with a simpler custom built payment and subscription module.

The uc_hosting module to integrate Aegir and Ubercart looks promising, but we needed to move quickly, and rolling our own system allowed us to do that. Another benefit is that the payment system is tightly integrated with the rest of the Pagebuild system. This allowed us to do exactly what we need to do without working around the assumptions inherent in Ubercart, uc_recurring and the payment modules.

Main challenges

Internet Explorer

The the first half of development we aimed to support IE7+ for page editing. After considerable effort we decided to ditch native IE support, and instead create a simple UX for the customer to install Google Chrome Frame.

We are really pushing the limit of WebKit and Gecko browsers when it comes to building WYSIWYGs, and we decided that a superior experience was preferable to a lowest-common-denominator one.

The UX we provide for customers to install GCF is as simple as possible, and we doubt it will deter customers.

Of course, GCF is only required for customers when editing their site. We support IE6+ as well as the proper browsers when viewing Pagebuild sites.

Content editable

Instead of using an IFrame based WYSIWYG editor we decided to use a feature of some browsers called content editable.

While we believe this provides a superior editing experience, the cost is in the fact that it is not uniformly supported across all browsers. Worse, some implementations are particularly bad. Anecdote alert: In order to fix a bug caused by Firefox’s implementation of document.execCommand we were forced to build a debug binary of Firefox and step through the rendering code in gdb.

Despite the additional effort required in rolling our own WYSIWYG editor, we are very happy with the experience we’ve managed to produce.

Outro

So that is about it. If you want to see it in action you can sign up for a free trial at https://my.pagebuild.net/signup/demo or take a look at some of the live sites built with Pagebuild:

• Intrinsic Interiors
• Learn Microsoft Excel
• Barbara Mordini

We are really interested to hear what people think about it so please leave us a comment and we will reply. We are constantly developing the product (we roll a new release weekly) and so genuine feedback is really helpful and may even end up becoming part of the product.

Brands are increasingly turning to brand ambassadors to market their products. Ambassadors are individuals with credibility in a given area who are hired by a brand to introduce consumers to a given product and educate them about its advantages.

Liquor companies, for example, often hire bartenders as brand ambassadors. The bartenders / brand ambassadors then tell their customers about the company’s brand of gin, and train other bartenders in making signature cocktails with that gin.

Brand ambassadors provide companies and products with valuable credibility. Wouldn’t you trust a liquor recommendation that came from a bartender over one that came from a salesperson?

The downside is logistics. Creating a regional or national team of brand ambassadors requires big investments in recruitment, training and management.

With Drupal however, you can create an online system that helps recruit, manage and monitor brand ambassadors with much less investment.

This project was another collaboration between design and development shop ISL Consulting in San Francisco, and ClearMetrics digital agency in New York.

The Problem

The client, Twinlab, is a major manufacturer of sports nutrition supplements. They wanted to set up a brand ambassador program from scratch, and they had two overriding goals:

1.) Excellent Applicant Screening: The sale and marketing of sports nutrition supplements is extensively regulated at federal and state levels. As a result, Twinlab couldn’t hire just any personal trainer or gym employee to be a brand ambassador. They needed to find and screen candidates with extensive knowledge of supplements and supplement regulations.

2.) Incentives: Twinlab wanted its brand ambassadors to steer people to its online store, Twinlab.com, to buy product. To do that effectively, Twinlab needed to reward the ambassadors each time a consumer they referred to the site made a purchase. In essence, they need to set up an offline affiliate program.

3.) Flexible Support: The brand ambassadors were to be contractors, working independently in their local markets to raise awareness of Twinlab. They wouldn’t have constant, face-to-face contact with Twinlab marketing staff. As a result, the company needed a way to get the ambassadors new product information and sales collateral (like brochures, posters, signage, etc.) quickly.

Costs had to be kept at a minimum in achieving all these goals. Twinlab couldn’t hire a full-time staff to hire and manage its brand ambassadors. All these tasks would have to be centralized and simplified by an online system.

Drupal was chosen because the client was already running Ubercart with the coupon module very successfully. This site was added to a multi-domain installation so that products could be shared from other sites with this site.

The Star Player of the System: Ubercart Discount Coupons Module

The primary task of this online system was to identify brand ambassadors and customers who had been referred to Twinlab.com by brand ambassadors. The simplest way to identify or “tag” an ambassador or customer was to provide them with specific codes that they could enter into the system during key transactions.

The processes behind the codes used in this program are complicated, but they are largely handled by the Ubercart Discount Coupons (UC Coupon) Module. This module provides the ability to input or generate codes that create various types of discounts in purchasing goods. These codes have some powerful options. They can be set to become active and inactive at certain times, and they can be configured to specify who can redeem them, product requirements, and how many times they can be redeemed. Furthermore, the module provides the administrative interface for managing the coupons and providing reports on their usage.

Custom Module
There was a fair amount of custom code needed to accomplish the unique requirements of the Brand Ambassador system. However, Drupal’s architecture and the features provided by existing contributed modules allowed us to create a custom module that allowed us to use existing, tested code from the Community as our foundation, and add “glue” and customization where needed.

Much of the custom module had to do with modifying the functionality of the Ubercart Discount Coupons Module. A coupon, as set up and controlled by this module, was the basis for the Ambassador’s Code. Our custom module contained the code that worked along with, and modified behavior of Ubercart Discount Coupons Module, for example to add the means to link the codes between Ambassadors and their Customers.

We also had to create quite a few custom pages, a significant one being a “dashboard” page for the Brand Ambassador to view current status of orders and commissions relevant to their membership.

Brand Ambassador Recruitment

ClearMetrics developed an offline-online system that would allow Twinlab to recruit and screen candidates without hiring or contracting recruitment positions.

Twinlab already had a large outside sales staff selling sports supplements to stores and sports organizations around the country. When salespeople came across individuals who would make good ambassadors, they told them about the program, and generated a personalized code that allowed the candidates to log-in to a special section of Twinlab.com to undergo an automated screening process.

Screening Tool

This process began on the front page of the site, where a simple custom form collected the special brand ambassador registration coupon code, validated it against the UC Coupon system, and allowed users to register to apply to become brand ambassadors.

This initial form is a case of using Drupal’s excellent Form API to create some unusual functionality. The form’s button is tied to a client-side jquery script that is able to call a server-side function to evaluate the coupon code value entered into the field, and give meaningful feedback to the user into a div defined as an item of the form, before the form executes its action. The form executes dupal_add_js to add the jquery in the right contexts. This was necessary in order to provide direct feedback on the code via an overlay, without moving the user from the page.

As part of the applications, candidates had to pass an online quiz that tested their knowledge of supplement safety and regulations. The Webform Module came through with flying colors, allowing great flexibility in defining various types of questions, and defining appropriate responses and actions based on the candidate’s submission.

Candidates were also required to put in their credit card information (which was subject to $1 verification charge) in order to confirm their identity and address. Ubercart was used to handle the ecommerce portion of the site. The progression of the candidate to the next phase was handled through UC Coupon by having applicants “purchase” a membership package for $1.

Upon checkout, a conditional action, configured entirely in Ubercart, was triggered to send an email message informing the applicant of next steps.

After they completed these tasks, their application was forwarded to Twinlab managers for final approval. Again, conditional actions provided by Ubercart allowed us to set up the notification system, entirely through site administration forms. This system was optimal for Twinlab because it combined the speed of automatic registration and screening with ultimate human control of who was representing the brand.

Code-Based Incentives

To provide a proper incentive for its brand ambassadors to spread the word about Twinlab products, the company wanted to provide them with a portion of every sale they referred to Twinlab.com. The model was similar to an affiliate program for web sites, the only difference being that brand ambassadors do most of their referrals offline, not online.

When the prospective brand ambassador successfully completed the registration and it was approved by the staff, the user was granted the brand ambassador role, which permitted them access to content and tools provided exclusively to brand ambassadors. Thanks to Drupal’s role-based user permission system, this ability was already available.

Using Drupal’s hook_user, when the brand ambassador role is granted to a user, the system generates a new, individualized coupon just for that brand ambassador, to give to his or her customers. This special coupon is linked to the brand ambassador’s system profile, so that all purchases made using that coupon are tracked. Finally, all of this information is emailed to the brand ambassador, through a straightforward call to Drupal’s hook_mail.

The brand ambassador would hand out the codes to customers. When the customers entered the codes while shopping at Twinlab.com, they got a discount. This functionality was entirely handled by the uc_coupon module. Through the uc_order hook, the sale was then attached to the brand ambassador’s profile through the association with the coupon itself, and a portion of it credited to their account.

Realizing that brand ambassadors were also influencing people online and through social media, ISL created badges that the ambassadors could embed on their blogs and profiles. Brand Ambassadors were provided html code that would render their personalized badges, which would link to the Twinlab.com product catalog, with data in the querystring that set the incoming visitor’s session with the value of the brand ambassador’s customer coupon code. This value was used to populate the coupon code entry in the checkout page with the value of the customer’s coupon code. Therefore, by clicking on the badges, users were navigated to Twinlab.com and received a discount on all purchases made in that session. Like the offline codes, these purchases were trackable.

Brand Ambassador Dashboard

When their applications were approved, brand ambassadors were given access to an exclusive dashboard on Twinlab.com. Simple and easy to navigate, the purpose of the dashboard was to give the ambassadors all the materials and information they needed to represent the brand.

The dashboard was a highly customized feature that was added as a series of contextual menu items in the user’s profile as defined by hook_menu. This allowed the user to access these features, along with all of the information and management provided by Drupal and the modules supporting this program, such as the contentprofile module. Drupal’s hook system allowed us to place the elements of brand ambassador-specific information into the appropriate places within existing account and profile information.

From the dashboard, the ambassadors could download pamphlets, sales sheets, product information, tutorials, e-mail templates, and a variety of other brand collateral. Twinlab could upload new collateral and relevant messages to all ambassador dashboards with just one-click: a big improvement over the alternatives, like sending out unwieldy e-mails to mass list.

The dashboard also aggregated code-based sales for the ambassadors, so they could see how much they had earned through consumer purchases. They could also see who was buying, and through what channels, so they could gauge the effectiveness of their efforts and improve their performance.

The biggest advantage of the dashboard was its speed and ease of use. Ambassadors could get collateral and the sales information when they needed it, just by logging in.

The site is hosted at Rackspace on a dedicated server on a multi-domain installation that runs a number of other sites.

Other Contributed Modules
There are many modules used on the Twinlab.com site. The primary contributed modules used by the Brand Ambassador system were uc_coupon, email_registration, cck, content_profile, securepages, stc_taxes, webform, and, of course, views.

Results

The new Drupal-based system has allowed Twinlab to expand its brand ambassador program and boost website sales. Since implementation, the number of Twinlab brand ambassadors has increased and web sales have jumped.

“The ambassador program has done more than just boost sales though,” said Marc Stover, director of marketing at Twinlab. “It’s enhanced our brand. Every day, hundreds of consumers are learning about our products from experts they trust. You can’t buy that sort of connection. And it’s something we wouldn’t have been able to do without this web-based tool.”

ISL Consulting and ClearMetrics

ISL Consulting is a San Francisco-based web development agency founded in 1993 that has built numerous Drupal websites. ClearMetrics is our New-York based partner that focuses on advertising and media campaigns as well as marketing tools that drive users to take action on websites or in the real world. Together, we’ve built a number of e-commerce and social business sites.

The project was run by a client Project Manager, a Business Analyst and Project Manager on our side, a lead developer and architect, a themer and designer with support for set-up, planning and database issues from another senior engineer and database administrator. As is often the case in these kinds of sites, our developers play an important role with the Business Analyst during the planning phases to explain options to clients. This allows us to best bring Drupal functionality and modules to bear on their business objectives.

The IT Dashboard is a management tool for the United States federal government CIOs to use in overseeing their IT spending. To support transparency and open government initiatives, Federal decision makers also chose to make the IT Dashboard available to the general public. In the IT Dashboard, members of the public can view the same data about performance that government officials use.

Background

In June 2009, Federal IT leaders asked two questions about their IT budgets. These questions are common in the commercial world, but have been difficult to answer in the public sector:

• Where are our IT dollars going?
• Are we getting value from our investments?

The answer to these questions is a website that gives insight into the acquisition and management of the federal government’s $75 billion-plus IT portfolio. The result is the IT Dashboard, a site built in collaboration with the government’s most senior IT leaders and nearly every federal agency.

Purpose of the IT Dashboard

The IT Dashboard provides full lifecycle performance information on IT projects’ scope and status. The data allows users to see project status, spot problems and trends, manage performance and quality expectations, and establish accountability. The tool is useful to the public and to government IT leaders who plan and manage IT investments. The home page screen shown above gives an overview of the tool.

IT Dashboard’s value comes from several facets:

• Mashing-up data from multiple data sets (IT project justification, schedule/status, expenditures, contractors.)
• Ensuring that real-time and complete data is available.
• Presenting the data and comparisons in ways that are visual and easy to drill into.
• Providing only high-level data that doesn’t overwhelm the viewer.

Site Design and Functionality

Originally conceived as a PHP application, the IT Dashboard evolved to a Drupal-based application, employing the Drupal API, several modules, and basic theming. While not all functionality is built in a customary Drupal way, we have modified all pages so that they can be accessed using menu hooks. The advantage of using such hooks is that now all those pages can use the Drupal API, and contributed modules, without worrying about whether or not Drupal has been properly bootstrapped.

One of the primary requirements was that REI Systems deploy the IT Dashboard rapidly. Since the source datasets were already available, developers avoided the need for a data migration step by working with the existing data model. With a working data model and Drupal’s easy-to-use components, we went to initial release in under six weeks. Since the launch in 2009 active development has been ongoing.

Another requirement was that the IT Dashboard incorporate captivating and practical data visualizations. To meet these requirements several visualization libraries are used across the site. FusionCharts drives most of the bar, pie and line graphs throughout the site. Google Motion Charts and JuiceKit power the more advanced Tools section of the site.

Initial plan was for agencies to enter monthly updates through data entry screens. However, this approach quickly led to delays and data quality issues. To address these issues, we introduced an XML API, allowing for system-to-system integration between the IT Dashboard and the systems used by more than 26 Federal agencies.

Access authentication for data providers is handled by integrating with an existing security system, included within the OMB’s MAX system — the tool used by federal agencies to enter and report official budgetary data. This integration was accomplished by extending the Drupal Central Authentication Services module (CAS), which controls role-based data access at both the application and database levels. The application makes certain data visible to the user only if they have appropriate permissions; otherwise, the user is limited to viewing only the publicly available data and graphics. User credentials are propagated to the database and are stored in a database session. This information is used by the Database Views module to enforce authentication and authorization rules.

The use of the FusionCharts library, which uses the Adobe Flash plug-in for rendering, meant that many mobile users were not able to easily access the same information as desktop users. To address the growing need for mobile use, a mobile-friendly version of the website was rolled out using the jqTouch library and the javascript visualization library flot.

Apache SOLR powers the search capability. A private SOLR index is used for authenticated users and a public SOLR index with a subset of the data is used for anonymous users.

Infrastructure

To support easy scalability and accessibility, the IT Dashboard resides in the cloud.

The federal government selected a technical environment that is robust; provides Infrastructure as a Service (IaaS); offers high levels of security, scalability, reliability and accessibility; and has a security plan and existing capabilities to protect publicly accessible web sites that disclose government information.

The IT Dashboard leverages a Content Delivery Network (CDN) structure for the public portion of the website to improve overall system performance. Business data is stored in a separate MySQL database; the Drupal database contains only Drupal-specific configuration information, along with static content.

The infrastructure was selected to support a tool open to use by more than 26 government agencies, members of Congress, the IT vendor community, and the general public – whomever may have some interest in the federal government IT investments.

Module Use

Contributed Modules

Major modules that were used were:

• CAS – Integrates with existing OMB CAS implementation named MAX.
• CCK – Used for data entry and file uploads.
• ClamAV – Scan attachments for viruses.
• Context – Used for page layout.
• Skinr – Allows easy application of a pre-built style library to blocks.
• ThemeKey – Eases transition from old theme to new theme on per page basis.
• Views 3 – Allowed us to plug in our own query backend, necessary to access separate application database.

Custom Modules

The following custom modules were developed for the IT Dashboard:

• Data Controller – A Views 3 Datasource plugin that has support for aggregations and efficient query generation.
• PHP Dataset – Describe data sets for views using custom PHP code. We are using this to drive views that require data from the application database.
• Views FusionCharts – Display style plugin to render view output as a FusionChart. This module is compatible with Views 2 and 3.

Challenges and Lessons Learned

We learned one significant lesson through this effort, namely that Drupal APIs were more versatile than we had originally believed. Our work on the IT Dashboard started initially with a PHP application, not using any Drupal APIs. We found several problems with this approach, each of which make system maintenance more complex and error-prone:

• The logic in SQL queries tended not to be re-used.
• Security items need to be addressed separately for each page viewed.
• There was not clear separation between logic and presentation.

Upon observing these problems, and gaining confidence in Drupal APIs, we revised several pages to use the Views module, which allowed us to:

• Centralize the logic of most queries in View Default.
• Establish a clean separation between View logic and View display.
• Most SQL-injection and XSS issues are already addressed in the code of the contributed modules.

As with any complex development effort, we met several challenges, and learned lessons that may benefit others in the community. The most significant challenges included:

• Reconciling preferences of different stakeholders for different visualization and layouts in order to take advantage of Drupal’s strength in a consistent presentation style.

  Drupal offers many ways to utilize templates and generic modules to implement a consistent look and feel across many screens. However the quick turnaround and occasionally conflicting preferences from different stakeholders made it difficult to develop an overall design that leveraged this Drupal strength. We have made a number of revisions since launch to improve consistency and we plan to address this challenge by spending more time up-front on mock-ups, and facilitating agreement across stakeholders on the end-state vision.

• Legacy system includes a data model that isn’t suited to new uses.

  The IT Dashboard has a separate application database that originated from a previous system. We addressed the challenge of accessing this database by using a custom query plugin for the Views 3 module.

• Facilitating expansion/collapse of table data detail to suit user preferences (an example of custom display functionality).

  Many IT Dashboard screens have custom functionality, which could not be satisfied by the Views module at a basic level. For example, some screens offer a table view of data. However, the desire not to overwhelm all users with the full set of data led to a decision that some rows should offer an “expand” button to allow drill-down capability at the user’s option. Implementing this customized functionality required custom coding.

Project Team

The site is currently operated by a nine member team, composed of the following roles:

• 4 Drupal developers
• 1 database developer
• 1 QA engineer
• 2 business analyst
• 1 project manager

Additional Information

REI Systems is a leading provider of web-enabled, database-driven knowledge management and performance support solutions for federal agencies, state and local governments, and the commercial and industrial sector. For more information, please visit us at http://drupal.reisys.com.

Symantec Connect is an enterprise class, community-driven, social business support and information portal for Symantec products, offering users of Symantec’s deep catalog of applications and services a platform to interact with one another and Symantec employees through rich web-based tools. Connect enables the rapid publishing of information about the day-to-day use of Symantec products through key community-centric features which facilitate the customer’s ability to:

• Ask the community for help with issues and flag solutions when they are posted for easy discovery in the forums
• Suggest and vote on product enhancements
• Publish helper applications and scripts as community downloads
• Publish user-submitted screencast videos for enhanced knowledge sharing
• Build online/offline product centric user groups with events, private content publishing and messaging in the groups
• Keep up with content on a variety of topics within the IT and security-related fields through articles and blog entries
• Enjoy a highly qualified community experience enabled by a suite of Symantec employee moderation, organization, and publishing controls.

All of these features also empower Symantec employees to quickly publish official versions of forum discussions, blog entries, articles, events, downloads, and videos while moderating and vetting content, helping steer the community in the right direction.

A Brief History

Symantec, founded in 1982, is one of the world’s largest software companies with more than 17,500 employees in more than 40 countries. The company provides both security and storage and systems management solutions. Their customer base includes consumers, small businesses, and some of the world’s largest global organizations. The company’s phenomenal growth can be attributed to a combination of market acceptance and strategic acquisitions. 

In early 2008, Symantec’s Customer Experience team began crafting a roadmap designed to consolidate several existing support and discussion sites into a consistent, best-of-breed community offering. The goals of this consolidation were to:

• Give Symantec customers a single point of contact where they could engage with the company’s support, marketing, and product management teams, 
• Draw on other customers experience and expertise, 
• Reduce the support and licensing costs of maintaining a collection of disparate community offerings.

Why Drupal?

After considering the landscape of both proprietary and open-source solutions, Symantec decided to use Drupal as a foundation for their community initiative. Symantec recognized Drupal to be offering: 

• a wealth of out of the box CMS and social media features and functionality
• the ability to scale for high usage sites
• the theme and development flexibility to customize the user experience quickly without the typical lag they had experienced requesting new features from proprietary vendors
• a recognized developer community from which to draw quality development talent

Symantec’s internal UX team even installed and configured rough prototypes in Drupal leveraging the vast library of existing contrib modules to experiment with various use cases for the upcoming project. This ability to rapidly create functional prototypes further cemented the choice of Drupal as the platform for development.

The Team

The project was structured to allow Symantec Customer Experience team to provide input on the design and planning of the site while collaborating with a group of  Drupal experts. Symantec’s internal team is augmented with Drupal expertise in the key areas needed for successful Drupal development.

• WebWise Solutions Inc. leads Connect’s project development and is the principle contact on the project providing long-standing expertise in Drupal-centric project management and user community development.  WebWise handles all day-to-day operations and oversight of everything from server deployment to administering the rewards system and offering a first line of customer support for the site’s users, all of which enables Symantec to focus on utilizing Connect to serve their customers instead of having to worry about maintaining the platform.
• Tabs & Spaces Inc. brings the heavy lifting of custom module development creating upwards of 50 custom modules to augment and extend Drupal to meet the unique needs of building a customer support community around a deep catalog of products and services.
• Jeffrey Dalton Design Inc. adds the “hot sauce” of user experience centered design and theme work leveraging Drupal’s powerful theme system to tailor the interface to the specific needs of the community. After the initial launch the redesign process allowed Jeffrey Dalton Design to fully invest in re-visioning the theme and leveraging user feedback collected throughout the initial months of Connects operation. During this process the Symantec Corporation even went through a brand change of their own which was easily rolled into the new theme.
• Tag1 Consulting delivers the performance and scalability tuning that is essential for Drupal sites with millions of users. With multiple layers of content caching in multi-server configurations, world class scalability expertise allows Symantec Connect to continue it’s rapid growth in a high demand environment.

This augmented team approach allows for rapid expansion of area-specific development expertise when new features and functionality are requested while minimizing Symantec’s development overhead.

Initial Launch

The initial effort (which took place over 6 months) involved merging the content and users from three disparate Symantec communities including:

• 110,000 members from the “Symantec Technical Network” (STN) running on the Lithium platform
• 10,000 members from the “Altiris Support Forums” running on FuseTalk
• 20,000 members of the Altiris “Juice” community already running on Drupal in a separate Drupal 5 site 
• Hundreds of thousands of existing nodes and comments from these three systems. 

As of this writing Symantec Connect has matured to become the community destination for Symantec products with stats boasting:

• 3,000,000+ unique page views each month 
• more than 206,000+ registered users
• content base with 600,000+ combined nodes and comments (and counting)

The Redesign

After the successful launch of Connect in March of 2009, the Connect team spent a portion of the next 18 months gathering user feedback and iterating through ways to improve the site experience. In the beginning of October 2010 Connect launched a totally redesigned theme. The redesign brought with it the freedom to use a more flexible iterative design processes in shaping the new interface. The team was able to focus more on the user experience side of the application and bring out new features aimed at improving the usability of Connect. The overarching goal being: make Connect easier and more intuitive to use and the community will grow both in the quality content and overall responsiveness.

Site Navigation

One area of detailed focus was the site navigation. All site content, both official and user-generated, is created around a combination of content type and taxonomy terms categorizing nodes into “Communities” (ex. Backup and Archiving) and “Utilities” (ex. blogs, articles, downloads, videos, etc). A new site navigation system was needed that would make it easier to move between these communities and utilities and would clearly explain the relationship between them. Moving away from the original tabbed interface, a combination of an interactive two level drop down menus with the breadcrumb model of a site depth path was used to illustrate both the relationship of community to utility, and show a visual representation of where content lives in the hierarchy of the site. The selection of a community and its corresponding utility became possible with a single mouse gesture and click greatly simplifying the navigation tasks. The menu dropping down and then expanding on a per community basis also allowed for the interface to list all utilities available for the current community, while keeping the interface clean and uncluttered.

After some initial user testing a secondary utility only drop down was added, which becomes available in the second level of the breadcrumb once a user is within a given community, making it possible to quickly switch utilities within the same community.

The breadcrumb model then extends beyond the community > utility selection and, when in context, offers further details as links to forum name, blog name, etc. and a single dynamic RSS feed element that remains contextually aware as the site is traversed.

Subtle JQuery animations further enhance the user experience of the menu with quick yet smooth state transitions. All animations were carefully refined to enhance usability without adding unneeded cruft solely for the sake of eye candy.

Below the global navigation an authenticated user menu was added with:

• a user “Account” menu for quick access to account features
• a “Create content” menu with easily identifiable iconography and short text descriptions making a direct one click route to add content
• a custom “Share” menu to better visually integrate the share widgets into the site
• an expandable video screencast help system to allow for in-page video help and user training

Context-Aware Search

The main site search bar was enhanced making it contextually aware as the user browses into each community/utility. The search box sets community name and utility type as initial facets automatically aiding in search relevance by assisting the user to search within the community/utility category of the content they are currently browsing. An additional tab is offered to easily select “Entire Site” and run a global site search. The context also changes when viewing user related pages to make searching a user name quickly accessible. All of these facets and more are also interactive on the Solr search results page so searches can be further refined.

The Drupal Solr search results interface was enhanced by introducing facet state icons and subtle colors to cleanly and clearly layout the relationship of search facet blocks and the effect they will have when clicked. Of particular interest on a site where so many visitors are seeking answers to their questions is the “solved” facet, which returns all of the forum discussions that have been marked as having a recognized solution attached to them. This aids the user to quickly find possible solutions to the subject they are searching.

Visual Design

The overall visual design of Connect was retooled towards simplifying and modernizing the look and feel of the site to better represent a set of content focused around technology and technical users. The theme was aimed at a more open and spacious feel using grey tones to set the theme elements and UI into the background when not needed and allow the content to carry the focus of the page. A restrained use of JQuery elements throughout the site were added to reduce page clutter and reveal content through simple clicks of tabbed and carousel interfaces. This allows community moderators to feature content through node queues without overwhelming the lists and community pages with volume.

Features of Note

Screencast Help

Though still in it’s infancy, the video screencast help system has the potential to be a powerful help feature for site users. The Screencast Help system is an inline JQuery element that expands revealing a set of How-To screencasts created to get users up to speed on step-by-step ways to use Connect and participate in the community. The videos are loaded directly into the expanded element so the user never loses the page they are trying to get help with. The initial implementation is a static set of cached videos, but by leveraging the existing taxonomy system, this feature will be easily enhanced in a future iteration to become contextually aware and show relevant video help as the user browses the site.

Forums

The discussion forums are the centerpiece of the Connect community. The forum feature set allows users to post product and support-related questions to the huge community of Symantec customers world-wide. In a recent study, Symantec noted that 90% of questions posted to Connect are answered by other users on Connect.

One of the custom features built into the Connect forums is the ability for a forum poster to mark a particular answer to his/her question as the “solution”. Marking solutions in this manner make it much easier for subsequent users to quickly find answers to commonly-asked questions. Symantec terms these answered questions as “deflections” that save the company money because they don’t have to be answered by a paid support employee.

This approach to “solved” posts also allows Symantec Community managers to select posts that need to be solved and push those into featured blocks challenging the user community to find solutions.

Ideas

Following the lead of other sites like Dell’s Ideastorm and Ubuntu’s Brainstorm, the Ideas area on Connect allows users to suggest and vote on product improvements. Market researchers know that some of the best new features and product enhancements come from the minds of users who actually deploy and use the product. The Ideas area on Connect allows product users to suggest a new feature or function while giving other community members the power to validate an idea by voting it up or down. Popular feature requests — as voted by the community — get the undivided attention of marketing and development teams. With Drupal’s improved voting api modules we were able to easily skin the voting widgets for various uses both as thumbs up/down widgets and the Ideas up/down widgets.

Known Issues

A much requested feature from site users, Known Issues allows Symantec Support staff to create official notices of product bugs with various status/severity tags and links to technotes in other Symantec web tools, which can then be used to collect votes from users who are experiencing the issue. Support staff can then interact through node comments to dialogue about Symantec’s plans for fixes and bug handling. It is worth noting Known Issues is an excellent example of a user generated site feature. A user submitted an “Idea” asking for the basic outline of functionality and over 245 other users voted that Idea to the top of the board. This brought the Idea to the attention of Symantec’s community managers who requested the feature be developed into “Known Issues”. Many times the best ideas come from dedicated product users expressing potential solutions to problems they face and companies can benefit from creating channels to listen to those Ideas.

Groups

Groups are areas within the community where users with similar interests can gather to share ideas, plan meet ups, and self organize to support each other. Symantec uses Groups, powered by Organic Groups Module, to give their more than 100 regional user groups a place to schedule meetings, communicate with their members, and post agendas and presentations — all from within their Group space on Connect. Private groups give the company’s beta testers, advisory board members, and early adopters a quiet, confidential place to exchange messages, information and files.

Videos

Some users would rather upload videos that discuss their tips and tricks in writing. Symantec Connect makes this possible. In this “YouTube” generation, almost anyone can create a screencast, and in many cases, these visual communication tools do a better job of communicating a user’s ideas than an article or blog post on the same topic. Connect was designed to make submitting these information assets as quick and easy as possible while also empowering Symantec staff to publish their own official videos and screencasts for the community.

Articles

Technical users can submit in-depth articles to Connect so other users of the community can learn from their experience and expertise. Connect articles have been submitted by users around the world. Teachers, trainers, systems administrators, and end users have all shared their tips, tricks, and detailed solutions to technical challenges via articles posted to Connect.

Blogs

Community members are welcome to post blog entries to Connect that describe their experiences with Symantec software. Symantec also leverages the blog platform to spread information from company and industry experts. One example of this is in the extremely popular Security Response Blog.

Downloads

IT departments around the world are constantly writing code snippets and utilities that make working with their enterprise infrastructure easier. Symantec Connect gives them a place to share those tools and utilities with the community. Users are encouraged to submit scripts and utilities they’ve written to solve their own IT problems. The idea being that others who have run into similar obstacles can use some of these user-contributed tools to solve the same problems in their local environments.

Rewards

Quality content and genuine community participation are foundational elements to Connect’s success. Symantec recognized this by taking the more traditional user rewards of account status and badges a step further and offering an innovative points and rewards program. Users earn points by making quality contributions to the community through posting new content, solving outstanding threads, and aiding in the general growth of the site. Points can be tracked and redeemed from within Connect for gift certifications to Amazon.com and other online retailers around the world. The rewards program is a good example of a large company valuing customer feedback and rewarding the efforts their customers make to help each other succeed.

Multi Language Support

Like all global companies, Symantec addresses a worldwide audience of partners and customers, many of whom prefer to communicate in their native languages. Concurrent with the site’s redesign, the Webwise team integrated Symantec’s existing in-house localization workflows to provide localization of Connect into German, French and Spanish, with other languages scheduled to follow. The flexibility of Drupal’s localization modules allowed Symantec to leverage their existing resources to cost-effectively translate the Connect interface into its destination languages.

Conclusion

As Symantec Connect’s content and audience continues to grow so does Symantec’s confidence in the power of Drupal as an enterprise-class application framework. The flexibility of Drupal as a platform, combined with solid design and development resources, creates the possibility for rich user experiences and large-scale web solutions. Symantec Connect stands as solid proof that fortune 500 companies can combine the robust flexibility of the Drupal platform, with the world class skills of dedicated designers and developers from the Drupal community, to build rich content work flows and social networking features into a powerful web tool sets to serve and support massive customer bases globally while eliminating licensing and residual costs from competing proprietary solutions.

Headquartered in Atlanta, the Gospel Music Channel (gmc) is a channel that features uplifting music and entertainment, including specials, movies and series that the whole family can enjoy. gmc is the only TV network with every program certified as family safe by the Parents Television Council. DIRECTV, Verizon FiOS, and local cable systems bring gmc into roughly 50 million homes across the country. The brand boasts such popular shows as Dr. Quinn Medicine Woman, Highway to Heaven, Promised Land, Sister Sister, Early Edition and Amen. The website receives about 750,000 monthly page views from 250,000 unique visitors.

The channel recently launched a full site redesign in conjunction with an upgrade from Drupal 5 to Drupal 6. The project team from Mediacurrent would like to share some of what they’ve learned from the design and build of the site with the Drupal community.

Goals

The old gmc site was in need of an aesthetic and architecture facelift. In 2009, the company added uplifting movies and series to its program offerings to better service viewers looking for faith and family-friendly entertainment. The old site had a limited social media strategy and the design’s navigation prevented it from optimally interacting and engaging visitors. During the discovery and strategic planning phases of the project there were several objectives that were established. The goals included:

1. Upgrading the current Drupal 5 site to Drupal 6: The idea of jumping to Drupal 7 was discussed, but was determined to be too risky given many of the unknowns related to key contributed modules.
2. Branding makeover: The gmc executive team wanted a more modern, contemporary website redesign that reinforced the brand’s expansion to beyond music. gmc’s content has been expanding into originally produced movies and plays.
3. Create a more immersive customer experience: The new site needed to integrate more social media and networking calls to action in order to bump registered users on the site. Thus, usability was at top of mind when planning functionality for the new site.
4. Effectively integrating third-party tools: There were a number of applications being piecemealed on the old site that needed to be unified with Drupal-based solutions.
5. Content import: There were large amounts of new assets (3100+ files, 2700+ nodes, and 2200+ taxonomy terms) that needed to be migrated over. During the rebuild, leveraging the core taxonomy system to build rich associations for relevant content was a major desire.

Graphic Design

Upending preconceived notions about gmc’s previous brand was at top of mind during the site redesign. We collaborated extensively with gmc’s internal team to make sure new features would allow gmc’s content shift to continue without the need for constant feature maintenance updates. This was definitely a challenge. Careful planning was needed to create extremely flexible features that could meet the expected growth and ongoing changes, while still being easily managed. To deliver the new site, Mediacurrent utilized a team-based approach, dividing tasks between back-end engineering and front-end theming.

The Graphic Design aspects took into account the following:

Strategy: The design strategy was predicated around three words – uplifting, inspirational, and simplicity. Mediacurrent helped gmc organize their vision into a comprehensive blend of gmc’s branded warm reds with touches of complementary cool grays, blues, purples and aqua blues. Transparent circles with thin white strokes overplayed on top of converging spiral circular gradients were used to achieve the celestial-inspirational feel. The overall design is built around “gmc red”, which was used for link and background navigation colors. Cool grays were used to pull the entire design together and create subtle areas of interest and focus. The gmc team did not want anything too loud or “bullish” in nature.

Menu Design: We had to create a menu system that would visually divide each section of the site while still allowing additional categories to be added underneath corresponding sections. This challenge was met by using the classic tabbed menu system (Nice Menus Module) coupled with waterfall pull down menu interactivity. Of particular note is that when a user has selected a section the tab stays active throughout all section subpages. The active waterfall menu is visually offset or totally contrasted from non-active waterfall navigation. This was achieved with the help of extra classes inserted by jQuery.

Network Bar: gmc wanted to give more prominence to their advertising offerings, social media callouts, and company profile. One other major point of emphasis was the “Get The Channel” feature. We suggested creating a network bar at the very top of the page to pull this important content away from the main content areas in the body and footer. The concept was to streamline the user’s access to this major feature.

Homepage Rotator: The team at gmc wanted to update the user interface and experience to accommodate more content above the fold without disrupting the visual flow of the surrounding content. We designed a rotator that would allow for a larger lead photo, longer titles and more space for story lead text. The rotator allows for a user to pause and move between slides easily.

Challenges

Content import can represent a risk to a Drupal project plan, even when the content is being imported from a previous Drupal version. One method to mitigate the risk of a complex content import is to analyze the input format being used for published content and be on alert for a disproportionate volume of content published to a general content type such as “page.” If the site has an overwhelming amount of content published as a “page” with “PHP” set as the input format, it could be a warning sign for struggles ahead.

gmc editors wanted to be able to build dynamic content associations between entertainers and associated content, but in a way to make the references optional. This was accomplished by augmenting the core taxonomy module with a custom module that creates node associations based on matching terms between content types, such as an actor to a film. This is unique compared to a traditional node reference setup, as actor nodes do not have to exist and can be added later for the association to be automatically created when the appropriately tagged node becomes available.

Creating a custom weekly programming schedule import feature also required extra effort. The available data lacked the necessary structure in order to run a normal import process. Instead, a custom module had to be created that would parse the weekly schedule file and create the appropriate nodes and content associations.

Modules

The back-end management of the gmc site was facilitated through a series of custom publishing solutions and third-party tools, none of which played particularly well together. It was obvious that there was a need to devise a better way to leverage all the moving parts. Enter version 6 of Drupal. The gmc site uses over 50 contributed modules, including staples like CCK and Views.

Here is a breakdown of the modules used:

Module List

admin, authcache, backup_migrate, better_formats, boost, captcha, CCK, content_copy, content_taxonomy, custom_breadcrumbs, date_api, dblog, fb_social, filefield_paths, filefield_sources, forum, globalredirect, googleanalytics, hierarchical_select, hs_content_taxonomy, image_captcha, image_resize_filter, imageapi, imagecache, imagefield, imagefield_assist, imagefield_tokens, imce, imce_wysiwyg, jcarousel, jquery_ui, lightbox2, menu_attributes, menutrails, modr8, nice_menus, nodequeue, noderef_image_helper, nodereference, nodewords, page_title, pathauto, scheduler, search404, seochecklist, share, sharethis, site_map, statistics, taxonomy, taxonomy_manager, views, views_bulk_operations, views_customfield, views_or, views_slideshow, viewscarousel, webform, wysiwyg

Custom Modules

We also needed to extend or customize a number of modules to meet the requirements we were after. Those modules included:

Schedule: gmc wanted to automate their scheduling process and improve the online schedules usability as part of the redesign. The schedule spreadsheets are done by hand with no unique keys for programs This was cumbersome, but we came up with a solution to efficiently manage the process of importing a CSV file to populate the program schedule as well as creating episodes for their shows and the references between them.

Galleria + Node Reference Image Helper: This extended the Galleria module so that we could use the noderef_image_helper module which greatly improves its flexibility and administrative usability.

Relevant Content + Views: The Relevant Content module was extended to use Views which provides all the advantages of a custom view with relevant_content providing the term arguments.

Unicorn Video: gmc is using Unicorn Media as their video CDN, so we created a custom module to work with their API for the sites video features.

Conditional Node Terms: One of the workflow obstacles we encountered was the client’s desire to dynamically link content to terms if a node with matching criteria was found, and for it to act as a normal term if not. A combination of custom term, theming and argument handling functions are combined into a module for this functionality.

During the development of this site, Mediacurrent gained approval from the client to contribute code back to the Drupal community. Team member Chris Hales submitted patches for the Galleria, Relevant Content and Nodewords modules.

Drupal Theming

To reiterate, there was a heavy emphasis to create a highly professional re-brand of the site, while allowing visitors to dive into loads of data without clutter or confusion. In short, theming a custom site like gmc always has obstacles that require creative problem-solving. Here are some we wanted to highlight:

Gradients and Rounded Corners: The detailed design elements required many types of nested content areas with rounded corners and background gradients. However, the design had to appear consistent regardless of browser type and Internet Explorer (IE) does not recognize the border radius style in CSS. In order to theme the nested rounded corners in a way that would appear consistent in IE, background images and additional div classes were added to customize the node output.

Drupal’s Views Pager: The design required particular classes needed for custom theming that were not available from the pager’s output from Drupal core. A theme override function was created and added to template.php that reformats Drupal’s pager output to add the needed classes and remove un-required elements for custom theming.

Video Playlist: The design for the video playlist required that all items in the playlist view display horizontally. The video module outputs the video feed items into a table and so the items could easily be aligned by floating the table rows left. However IE7 does not recognize floats when applied to table rows. In order to accommodate the CSS limitation with IE7, an alternate display was agreed upon with the client to save time in which a horizontal v. vertical alignment is used for IE7 only.

Drupal’s Views Filters and Custom Alpha Pager: The functional requirements for the view pages needed an Alpha Pager which is not available in Drupal 6 views by default. Also, the design for the search fields and submit buttons required custom theming beyond what is readily available from default Drupal output. Custom functionality using PHP, View Arguments, and custom div classes needed for theming, were created and added into the header for each view that needed an Alpha Pager. To theme Drupal’s views search filters to meet the design requirements, CSS is used to position fields and buttons accordingly while also replacing default browser submit buttons with a custom graphic that is consistent in all browsers.

Drop Down Menu Theming: The design required different visual treatment for non-active drop down menus v. active drop down menus. Non-active drop down states are required to have pink and purple backgrounds while the active dropdown would have a white background. Neither Drupal nor the Nice Menus module output unique classes to identify active v. non-active parent items which are needed to target with CSS for independent theming. Nice Menus module had to be patched to add the first, last, odd and even classes needed for CSS targeting to apply some of the custom theming. In order to add the needed “active” and “non-active” classes to menu’s child elements, custom jQuery functionality was created to apply the needed classes dynamically.

Final Thoughts

Every Drupal project should be viewed as a learning experience. Overall, we were able to accomplish key goals and build a powerful, versatile Drupal website that took into account the way gmc was rebranding themselves. The collaborative effort between Mediacurrent and gmc has resulted in a more sophisticated, flexible and professional site.

For project management and ticket tracking, Mediacurrent uses Development Seed’s convenient Drupal distribution, Open Atrium, along with several custom additions including time tracking features. We have been through several PM tools and have been extremely satisfied with Open Atrium. The feature set is akin to what you would find in a more expensive proprietary system, but the flexible Drupal-based system allows us the opportunity to make continued improvements and refinements to the system and how it supports our processes. For example, during the course of this project we customized some of the casetracker-related views to better organize our work around milestones in the project plan.

As with any sizable Drupal implementation, we cannot underscore enough the importance of well-defined site architecture documentation during the planning phase. While most Drupal shops now employ some form of an Agile based methodology, having a roadmap is imperative. In our functional specification document, we incorporated gmc requirements including planned content types, taxonomy, roles, permissions and modules.

Last but not least, the redesign was challenging, yet fun to build. The client’s editors have enjoyed the improved administration features while working with their content. Drupal’s flexibility will allow for continuous and ongoing improvements.

Technology Environment

• Stack: RHEL 5.5 LAMP (Linux, Apache, MySQL, PHP)
• Hosting: Rackspace
• CDN: Unicorn Media
• jQuery: Replaced all Flash widgets in jQuery

About Mediacurrent

Mediacurrent is an Atlanta, GA, based interactive firm that has developed a specialization and consulting vertical within the free, open-source content management system called Drupal. For more information regarding Mediacurrent’s services and portfolio please visit http://www.mediacurrent.com.

Project Team

• Mediacurrent
• Dante Taylor – design
• Chris Hales – development, lead architect
• Trent Wyman – theming
• Jeff Diecks – project management

Iheartadoption.org is a website developed by the Independent Adoption Center (IAC) that addresses the issues birth parents face when considering open adoption for their child. The site provides a social network for birth mothers, on-line counseling support, parent profiles, as well as stories, photos, and videos contributed by IAC birth parents. The site was developed in house using Drupal 6, and was made possible by a grant from the Albert & Elaine Borchard Foundation.

Social Support Network

The social networking features of the site give women considering adoption a place to find support and advice from other women who have or are also considering placing their baby in an open adoption. Users can create a profile, make status updates, create blog posts and photo albums, chat with other users, and make new friends. Because this section of the site is accessible only to birth parents, our users can talk openly about their experiences with each other. Using Drupal social communication tools, our counselors are able to engage with their clients in real-time in a non-intrusive way.

Adoptive Parent Profiles

Families working with the IAC can also create profiles on I heart adoption. With these profiles adoptive families can describe themselves in detail, upload photos and letters to birth parents, and link to their website or social networking profiles. Traffic on their profile can be tracked thanks to the Google Analytics module.

Women considering adoption can search and browse these profiles based on their preferences. Searches can be refined by location, family type, religious beliefs, spoken languages, and more. They can exchange private messages with their favorite families, and flag their favorites for future reference.

This part of the website has proven invaluable for our adoptive families. Getting a website on-line was one of the most difficult steps for many families seeking adoption, and by utilizing the power of Drupal we are now able to offer a quick and simple way to create a web presence.

Other Features

• On-line chat support: Users can chat with our licensed social workers to get answers to all their adoption questions, all without leaving their browser.
• Facebook integration: Adoptive families can encourage their friends and families to spread the word by liking their profile.
• Due date calculator: Pregnant women can get an estimate of their due date using our calculator widget.
• Counselor workflow: Our social workers can monitor the progress of their clients from account creation to publishing their profile, providing feedback along the way.

Why Drupal?

Once we had developed a plan for all the site features, we began to explore ways to implement it. After contacting a few professional web development shops for quotes and comparing it to our total budget for web and TV advertising, we decided to look at options for developing the site in-house. Doing so would allow us to build the site and have plenty left over for an associated advertising campaign.

Some research on how to build such a site quickly led us to CMSes like Drupal, Plone, DotNetNuke as well as some SAAS options like Ning. It was soon decided that having complete control over the software and the server would be a better long term option for our agency, and so we narrowed the list down to the “big three” of Drupal, WordPress, and Joomla!

With the help of many blog posts and some poking around on http://cmsmatrix.org/, Drupal soon emerged as the best option. WordPress was too limited in its abilites, and Joomla! was considered not as SEO friendly. Drupal was given the highest marks by almost every writer we encountered. Ultimately we chose Drupal because it provides:

• A free, open source platform
• A secure and highly extensible framework
• A large and friendly community for support and guidance
• Existing modules for almost every feature we wanted

Starting from Scratch

When we began this project, none of the team had any experience with Drupal (and the developer had only just learned php), so we relied heavily on the extremely helpful Drupal community. The forums were an invaluable resource throughout development, without which this project would not have been possible. Because its a volunteer community we made sure to give back help whenever we could. The Post-installation forum is a great place a beginner can help out other beginners, and there is no greater way to learn than to try and teach.

Armed with a copy of Front End Drupal, we started development with the theme layer. This turned out to be a great place to begin climbing the Drupal learning-curve. In focusing on the theme, Drupalisms like node, module, and theme hooks began to make more sense. When we were done theming we had a heavily customized user-profile.tpl.php (for parent profiles), and a decent working knowledge of how all the parts of a Drupal site come together. If we could go back, we would use the Content Profile module instead of core profile. On a site focused on profiles like ours, the work would have been greatly simplified if profiles were nodes.

Once the parent profiles were ready, the next big challenge was creating a way for users to search through them. Again, with lots of forum support and a copy of Pro Drupal Development, we dove right in. Our search is accomplished by using Drupals Form and Database API’s to run queries on user profile fields. In hindsight using Views exposed filters would have worked great here, but our experience with this powerful module was limited, and so we built a custom module to suit our purposes. Several more custom modules were created during this time as well (see list below for details).

By the time we got to the social networking features we felt like pro’s. By using the resources in the Drupal community available for little to no cost, we were able to complete this project in-house at a fraction of the cost we were quoted by development shops. It took some extra time and hard work, but for a project with the scope of I Heart Adoption, we felt it was a small sacrifice for a wonderful end product.

Modules

I Heart Adoption uses plenty of contributed modules and a few custom ones:

• User Relationships: Allows birth parents to add families as favorites, and to add each other as friends on the social network.
• Facebook-style Statuses & Facebook-style Statuses Comment: This fantastic module powers the social network wall together with Views
• Privatemsg: Lets users send each other messages on the site without disclosing e-mail addresses
• Chatroom: Creates a chatroom node type for real-time chatting on the social network
• IMCE: A file manager for users, allows our adoptive families to manage their photo albums
• Heartbeat: Provides a recent activity block, used on our social network
• Flag: With flag users can “Heart” status updates, blog posts, and photos
• Node Gallery: Creates gallery and photo content types to allow photo albums on the social network. Because each photo is a node, it can have comments and Heart flags.
• Imagecache: Create presets for different image sizes and cache them. An invaluable module for image handling.
• Token: Insert data dynamically into content. Mostly works behind the scenes to provide functionality to other modules.
• Rules: An evolved version of the built-in triggers/actions. Lets you define rules to automate site functions, like heartbeat activity messages.
• Google Analytics: Integration with Google’s tracking technology, indispensable for SEO.
• Views: Handles display of statuses, should have been used for search feature (see below).
• Admin Menu: Keeps site maintainers sane by organizing admin links into a compact drop-down menu.
• Node words: Adds meta tag fields to node edit forms, used here for SEO.
• Auto Assign Role: Gives new accounts a default role, for when you want the default authenticated user to have permissions that other authenticated roles don’t have.
• Form Block, Remember Me, Compact Forms: Makes our user registration and login forms prettier.
• Lightbox2: Presents content in a lightbox, used for photo presentation.
• Menu Per Role: Allows customizing menu items based on role.
• Profile Checkboxes: Can turn select lists into checkboxes, very useful for our data intensive profiles.
• String Overrides: Easy way to change module output without hacking module code or writing theme functions.
• Unique Avatar: Fixes the common caching problem for user pictures (your sites support staff will thank you).
• User comment: Provides more fine-grained permissions for comments, allows our birthparents to delete comments on their blogs and photos.

Custom modules were created for:

• Searching based on family data. In hindsight Views’ exposed filters would have been ideal for our search, but at the time we were unaware of the power of Views. See my tracker for details on this long, hard road.
• The due date calculator. This module adds a block that depends on JavaScript code for its functionality. We already had this script from a previous site, so we decided to use that rather than start with a calendar module from the contributed modules.
• A featured family rotation on the front page. This module sets a variable on each cron run with the uid of the profile to be featured (based on various internal metrics). The theme then uses this variable to show the featured profile data.
• A module to add captions to photos parents upload in IMCE. It creates a database table to store photo file names, image weight, and caption, and uses the Menu and Form API’s so users can edit their photo albums. If we had used nodes for parent profiles and galleries instead of the profile module, there almost certainly would have been a contributed module to accomplish this. In Drupal 7 this is much improved with nodes and users both being entities.
• The counselor workflow: Gives counselors advanced search fields, and an interface to review and approve profiles. Queries on profile fields and a call to drupal_mail() make up most of this module. It was built just after our general family search, and writing this module to suit our counseling departments specific procedures proved to be a faster solution than working to integrate a contributed module.
• And a general module for site customizations (like form alters and page callbacks).

Credit

The site was created in-house by the IAC marketing team: Sarah Bryson was project manager, Erin Grimm designed it, and Ryan Schwab (rschwab) developed it.

The Independent Adoption Center is US-based nonprofit, domestic infant adoption agency. We provide lifetime counseling to our birthparents, and adoption services without discrimination based on age, sexual orientation, marital status, religion, ethnic background, or race.

Iheartadoption.org is a website developed by the Independent Adoption Center (IAC) that addresses the issues birth parents face when considering open adoption for their child. The site provides a social network for birth mothers, on-line counseling support, parent profiles, as well as stories, photos, and videos contributed by IAC birth parents. The site was developed in house using Drupal 6, and was made possible by a grant from the Albert & Elaine Borchard Foundation.

Social Support Network

The social networking features of the site give women considering adoption a place to find support and advice from other women who have or are also considering placing their baby in an open adoption. Users can create a profile, make status updates, create blog posts and photo albums, chat with other users, and make new friends. Because this section of the site is accessible only to birth parents, our users can talk openly about their experiences with each other. Using Drupal social communication tools, our counselors are able to engage with their clients in real-time in a non-intrusive way.

Adoptive Parent Profiles

Families working with the IAC can also create profiles on I heart adoption. With these profiles adoptive families can describe themselves in detail, upload photos and letters to birth parents, and link to their website or social networking profiles. Traffic on their profile can be tracked thanks to the Google Analytics module.

Women considering adoption can search and browse these profiles based on their preferences. Searches can be refined by location, family type, religious beliefs, spoken languages, and more. They can exchange private messages with their favorite families, and flag their favorites for future reference.

This part of the website has proven invaluable for our adoptive families. Getting a website on-line was one of the most difficult steps for many families seeking adoption, and by utilizing the power of Drupal we are now able to offer a quick and simple way to create a web presence.

Other Features

• On-line chat support: Users can chat with our licensed social workers to get answers to all their adoption questions, all without leaving their browser.
• Facebook integration: Adoptive families can encourage their friends and families to spread the word by liking their profile.
• Due date calculator: Pregnant women can get an estimate of their due date using our calculator widget.
• Counselor workflow: Our social workers can monitor the progress of their clients from account creation to publishing their profile, providing feedback along the way.

Why Drupal?

Once we had developed a plan for all the site features, we began to explore ways to implement it. After contacting a few professional web development shops for quotes and comparing it to our total budget for web and TV advertising, we decided to look at options for developing the site in-house. Doing so would allow us to build the site and have plenty left over for an associated advertising campaign.

Some research on how to build such a site quickly led us to CMSes like Drupal, Plone, DotNetNuke as well as some SAAS options like Ning. It was soon decided that having complete control over the software and the server would be a better long term option for our agency, and so we narrowed the list down to the “big three” of Drupal, WordPress, and Joomla!

With the help of many blog posts and some poking around on http://cmsmatrix.org/, Drupal soon emerged as the best option. WordPress was too limited in its abilites, and Joomla! was considered not as SEO friendly. Drupal was given the highest marks by almost every writer we encountered. Ultimately we chose Drupal because it provides:

• A free, open source platform
• A secure and highly extensible framework
• A large and friendly community for support and guidance
• Existing modules for almost every feature we wanted

Starting from Scratch

When we began this project, none of the team had any experience with Drupal (and the developer had only just learned php), so we relied heavily on the extremely helpful Drupal community. The forums were an invaluable resource throughout development, without which this project would not have been possible. Because its a volunteer community we made sure to give back help whenever we could. The Post-installation forum is a great place a beginner can help out other beginners, and there is no greater way to learn than to try and teach.

Armed with a copy of Front End Drupal, we started development with the theme layer. This turned out to be a great place to begin climbing the Drupal learning-curve. In focusing on the theme, Drupalisms like node, module, and theme hooks began to make more sense. When we were done theming we had a heavily customized user-profile.tpl.php (for parent profiles), and a decent working knowledge of how all the parts of a Drupal site come together. If we could go back, we would use the Content Profile module instead of core profile. On a site focused on profiles like ours, the work would have been greatly simplified if profiles were nodes.

Once the parent profiles were ready, the next big challenge was creating a way for users to search through them. Again, with lots of forum support and a copy of Pro Drupal Development, we dove right in. Our search is accomplished by using Drupals Form and Database API’s to run queries on user profile fields. In hindsight using Views exposed filters would have worked great here, but our experience with this powerful module was limited, and so we built a custom module to suit our purposes. Several more custom modules were created during this time as well (see list below for details).

By the time we got to the social networking features we felt like pro’s. By using the resources in the Drupal community available for little to no cost, we were able to complete this project in-house at a fraction of the cost we were quoted by development shops. It took some extra time and hard work, but for a project with the scope of I Heart Adoption, we felt it was a small sacrifice for a wonderful end product.

Modules

I Heart Adoption uses plenty of contributed modules and a few custom ones:

• User Relationships: Allows birth parents to add families as favorites, and to add each other as friends on the social network.
• Facebook-style Statuses & Facebook-style Statuses Comment: This fantastic module powers the social network wall together with Views
• Privatemsg: Lets users send each other messages on the site without disclosing e-mail addresses
• Chatroom: Creates a chatroom node type for real-time chatting on the social network
• IMCE: A file manager for users, allows our adoptive families to manage their photo albums
• Heartbeat: Provides a recent activity block, used on our social network
• Flag: With flag users can “Heart” status updates, blog posts, and photos
• Node Gallery: Creates gallery and photo content types to allow photo albums on the social network. Because each photo is a node, it can have comments and Heart flags.
• Imagecache: Create presets for different image sizes and cache them. An invaluable module for image handling.
• Token: Insert data dynamically into content. Mostly works behind the scenes to provide functionality to other modules.
• Rules: An evolved version of the built-in triggers/actions. Lets you define rules to automate site functions, like heartbeat activity messages.
• Google Analytics: Integration with Google’s tracking technology, indispensable for SEO.
• Views: Handles display of statuses, should have been used for search feature (see below).
• Admin Menu: Keeps site maintainers sane by organizing admin links into a compact drop-down menu.
• Node words: Adds meta tag fields to node edit forms, used here for SEO.
• Auto Assign Role: Gives new accounts a default role, for when you want the default authenticated user to have permissions that other authenticated roles don’t have.
• Form Block, Remember Me, Compact Forms: Makes our user registration and login forms prettier.
• Lightbox2: Presents content in a lightbox, used for photo presentation.
• Menu Per Role: Allows customizing menu items based on role.
• Profile Checkboxes: Can turn select lists into checkboxes, very useful for our data intensive profiles.
• String Overrides: Easy way to change module output without hacking module code or writing theme functions.
• Unique Avatar: Fixes the common caching problem for user pictures (your sites support staff will thank you).
• User comment: Provides more fine-grained permissions for comments, allows our birthparents to delete comments on their blogs and photos.

Custom modules were created for:

• Searching based on family data. In hindsight Views’ exposed filters would have been ideal for our search, but at the time we were unaware of the power of Views. See my tracker for details on this long, hard road.
• The due date calculator. This module adds a block that depends on JavaScript code for its functionality. We already had this script from a previous site, so we decided to use that rather than start with a calendar module from the contributed modules.
• A featured family rotation on the front page. This module sets a variable on each cron run with the uid of the profile to be featured (based on various internal metrics). The theme then uses this variable to show the featured profile data.
• A module to add captions to photos parents upload in IMCE. It creates a database table to store photo file names, image weight, and caption, and uses the Menu and Form API’s so users can edit their photo albums. If we had used nodes for parent profiles and galleries instead of the profile module, there almost certainly would have been a contributed module to accomplish this. In Drupal 7 this is much improved with nodes and users both being entities.
• The counselor workflow: Gives counselors advanced search fields, and an interface to review and approve profiles. Queries on profile fields and a call to drupal_mail() make up most of this module. It was built just after our general family search, and writing this module to suit our counseling departments specific procedures proved to be a faster solution than working to integrate a contributed module.
• And a general module for site customizations (like form alters and page callbacks).

Credit

The site was created in-house by the IAC marketing team: Sarah Bryson was project manager, Erin Grimm designed it, and Ryan Schwab (rschwab) developed it.

The Independent Adoption Center is US-based nonprofit, domestic infant adoption agency. We provide lifetime counseling to our birthparents, and adoption services without discrimination based on age, sexual orientation, marital status, religion, ethnic background, or race.

Fire Core LLC designs powerful media center software aimed at complementing a number of popular Apple hardware products. Fire Core has been routinely featured in a number of major publications such as: Macworld, Popular Science, Gizmodo, Engadget and many more.

The previous site was utilizing 3 different software packages.

• osCommerce
  The e-commerce part of their previous site was run with osCommerce.
• WordPress
  The site blog was run on WordPress
• phpBB
  Their support forum was driven by phpBB. Many of the users were also customers in their osCommerce store database, having separate accounts on both systems.

We (Rehab Creative) were approached by Fire Core about creating a new site, ideally merging the three systems into one. This project was a perfect fit for Drupal and Ubercart, and after a few brief discussions, Fire Core agreed that Drupal sounded like a great platform to work with. The slick visual design was provided by Jack Herbert and the PSDs were handed off to us to cut out to a Drupal theme.

osCommerce vs. Ubercart

One of the main advantages of Ubercart over osCommerce is Drupal itself. A Drupal based commerce solution provides content management, commerce capability, forum, blog and user management all in one proven package with a deep base of contributing users and modules. Using osCommerce as their e-commerce engine, Fire Core needed to utilize two other software packages (Word Press and phpBB) to achieve all requisite functionality.

Additionally, Fire Core expressed that many of the osCommerce contributions the site depended on (”contributions” are the closest thing osCommerce has to modules) required adjustments to the osCommerce core and often specific contributions would require core changes that would conflict with other contributions. This presented problems with both implementing relevant contributions and with keeping the osCommerce core up to date.

Challenges

The migration from osCommerce to Ubercart alone was a unique challenge due to the nature of the file-downloads and variable expirations sold on the site. The two carts handle purchased file downloads fundamentally differently, and reconciling those differences was more involved than a traditional physical-goods store migration would have been.

On top of that, many customers also had accounts on the phpBB based forum and even on the WordPress blog for commenting on blog posts. This meant that we had to reconcile users from the three user systems into the single Drupal user table, while maintaining proper associations of user->order, user->forum posts, etc.

Approach

The initial migration was done largely via the following modules:

• Table Wizard
• Migrate
• Ubercart+Migrate by willieseabrook
• phpBB2Drupal

While the modules above greatly helped expedite the import of many of the larger content items, the user consolidation and proper linking had to be handled largely via some custom PHP/MySQL logic outside of Drupal.

The migrations and consolidation of orders, users, phpBB forum posts, etc were numerous and complex, so much so that it would be unreasonable to go into great detail on each front. However, purchased file downloads, and a user migration/consolidation issue presented two of the more interesting migration challenges, so an extended summary of those follow.

Migrating File Downloads

One of the more difficult challenges revolved around the way Ubercart handles purchased file downloads. Under Ubercart, file downloads are granted to users upon purchase, but without association to an order ID. The file download table in Ubercart has a list of all the file downloads granted to users (along with expiration dates, etc), but there’s no link back to an order. Additionally, the order table doesn’t maintain any association with a file download granted to a user. With osCommerce, the file download is associated with an order just like any standard product on an order.

Fire Core software is available for purchase with varying expiration levels. Customers can purchase software updates for 1, 2, 3 years and a lifetime option. Each of these choices represents a “Product Feature” under Ubercart. When a user purchases a file with one of those time periods, they’re purchasing an Ubercart product with a product feature that dictates what file they get access to, how long the download is good for, how many downloads they are allowed and the name of that product feature.

With Ubercart, the product feature component is rather complex and stores these product attributes in a product feature table. The file downloads table then has a field for a product feature so every file download purchased by a user knows whether it was purchased for 1 year, 2 years, etc. This means that the product features had to be created in the Ubercart database before the file downloads table could be populated with users’ purchased files. While the expiration field is an explicit field in the file downloads table, the description of the file download (”1 year of updates”) is stored as part of the product feature, not in the file download table itself.

Under osCommerce, these purchased files are stored with the expiration date of the download, but without any notion of a “Product Feature”, so the only way to know if the download was purchased with “2 years of updates” was to look at the expiration and manually map those expirations to the proper Ubercart Product Features.

The initial migration using the modules outlined above handled the migration of the orders table just fine, but did nothing to bring the users’ file downloads across. At this point, we wrote up some PHP/MySQL to grab the files from the osCommerce database and properly add them to the Ubercart database. This script needed to assign the proper UID as well as the aforementioned mapping to assign the appropriate product feature for the file download.

Consolidating store and forum users

The phpBB2Drupal module worked flawlessly for importing user posts and forum users — even properly handling users that already existed in the Drupal database from the store migration. Many osCommerce customers also had accounts in the phpBB forums, using the same email address. We used the osCommerce migration as our ‘master’ for the users, then performed the phpBB2Drupal migration after.

This created new users where necessary and utilized the existing users when the email address was already in the system. The only problem here was that, for users with accounts on both legacy systems, the “Joined”, or “Member Since” dates were being decided by their osCommerce user account, since that account was the master as far as our Drupal site is concerned. To remedy that, we had to manually loop through the legacy phpBB database and properly overlay the legacy Join dates on top of the user accounts in the new Drupal database. After that, all the Drupal forum user accounts had the right Join dates, helping ensure a more seamless transition for existing forum users when they began using the new site.

Checkout customization

Fire Core had very specific requests for the layout of the checkout page. The legacy osCommerce site utilized a similar checkout page which provided a simplified 3-step flow: 1. Check your Cart 2. Enter Contact Details 3. Select Payment Method

Ubercart natively wants to group the checkout page by some default “panes”, and those didn’t line up with the desired flow. The checkout page needed to be significantly altered both in grouping and order of presentation. Fortunately, Ubercart provides hooks for this very manipulation. Using some standard hook_form_alter action Ubercart’s hook_checkout_pane, we were able to precisely achieve the desired layout. The hook_checkout_pane methods we used essentially boil down to what you can see on Stella’s website, only expanded significantly over what is shown on her site.

Forums

Using the Advanced Forum module and some custom templates we created a forum with a look and feel more in-line with the structure existing users had become used to on the phpBB forum the past site utilized.

Additionally, we added highlighting of moderator posts to help ‘official’ replies have visual separation from those of general users.

Additional Functionality

In addition to the primary functions of the site outlined above, we also seamlessly integrated with Zendesk (Zendesk Remote Authentication Module), securely served purchased file downloads from CloudFront, using the Ubercart Cloudfront Module (with some of our own tweaks), and implemented a number of custom modules to improve the checkout flow and product presentations in general.

Expanding File Downloads

Fire Core needed a way to manually adjust the expirations of purchased files for various reasons, so we wrote a module to give the site admin the ability to search for user downloads by username or email, then manually edit, delete and add file downloads to the user’s account.

Ubercart natively allows admins to add a file download to a user account, but it doesn’t take into consideration the various product features you’ve defined in your store. You can manually grant a user access to a file, and you can set an expiration date on that download, but you can’t assign it the product feature “2 years of updates”. The only practical problem presented by omitting the product feature is that the user won’t see “2 years of updates” presented on their file downloads page. Instead, they’ll only see the file name, and the expiration date. In our case, “2 years of updates” is actually an important part of the purchased product name, so we added the ability for the site admin to properly manually add a file download to a user account with any predefined product features.

File downloads and past orders are presented to users very simply via their account page. Upgrade offers and expiration notices are also conditionally displayed to the user on this page depending on the product features and expirations on their existing purchased downloads.

The site is now serving more pageviews than ever before, and the three unified systems (store, blog, forum) are working together flawlessly.

Ultralingua, Inc. is a software company that makes products for people who love languages. Their website is a place for people to access a free online dictionary, download product trials, and purchase software for personal use. It is also a hub of information for business partners and offers a technical support section for customers.

Ultralingua competes in the market for software-based language tools such as dictionaries, spellers and grammar checkers. Their customers include teachers, students, translators, and multi-lingual professionals from a host of industries. They also sell to many organizations including HarperCollins, the Government of Canada, Hachette Multimedia, netTrekker, and Texthelp who purchase site licenses and embed OEM, APIs, and web versions of their products.

Ultralingua began work to transition to Drupal in 2009, and launched their new Drupal-based site in early 2010.

Goals

By mid-2009, Ultralingua had been using a series of static pages as its website for several years, and they were ready for a change. Their company and product lines were growing quickly, and the system they were using at the time couldn’t keep up. With a team of developers on staff already, the company had the internal expertise to take on the development of the new site themselves.

"We had done traditional web development before, but Drupal was completely new to us," explained Bret Jackson, Ultralingua’s web developer for the project. "We chose Drupal because such a large community supports it, and we could see quickly that the documentation and help forums would be an asset during the initial phase. We picked up the new terminology and structure quickly, but the early development stages came with some interesting challenges nonetheless."

Ultralingua’s website is the primary channel through which they market and sell their products, so they had to build in the tools they would need to communicate with customers and process sales effectively. Because they were new to Drupal, they ended up creating custom solutions to some of the challenges they faced rather than manipulating existing themes to get the results they were looking for.

Another goal the team had was to make it possible for individuals with limited technical expertise to edit content on the website. This was something their old solution did not allow, and it was hindering the company from creating content quickly enough to keep up with product releases. They also set goals to better integrate analytics and reporting into the structure of the site.

A website would also help Ultralingua communicate to their customers what sets them apart: their model for creating premier language software by bringing language and software experts together to create the best product possible. Language is constantly evolving and their software developers work directly with linguists and researchers to create language tools of the highest quality.

Major Challenges

Navigation

Ultralingua wanted to implement a custom mega dropdown to allow site visitors to navigate directly to pages that contained information about specific products.

Drupal’s menu system wasn’t able to generate the results they were aiming for, so Jackson went to Drupal’s support forums to track down an answer. Many other developers had a similar problem, and there weren’t many good solutions available. The team took a look at their options and decided to use blocks instead.

Overall, the Ultralingua website team is happy with the results they got using blocks for navigation. However, the choice had some interesting implications for their ongoing maintenance flow. Blocks aren’t part of the revision system, so any changes that need to be made to the navigation need to happen separately on the dev version of the site. Ultralingua’s website team had to create an internal process that allowed the marketing staff to make changes while coordinating their release with those the web developer had to make. Although this complicates things a bit, they are satisfied with the results as a whole.

Localization

Translating their content into multiple languages was a priority for Ultralingua, as marketing generalist Ashleigh Lincoln explains:

It’s important to us to communicate with our customers in the languages they speak, and about half of our users are native speakers of languages other than English. We have large groups French, Spanish, and Portuguese users in particular, so localizing our content into those languages was something we wanted to do straight away.

When they added new localization to their site, they saw an increase in traffic as well as in sales.

Their original solution for localization was a basic translation module. Using this system, Ultralingua had their content translated outside the Drupal system entirely and then had someone on the website team enter all the translated content into Drupal manually. Localizing more than 30,000 words of content this took months, but it was the only option they thought was available at such an early stage. When they discovered the Translation Management module, things changed.

Ultralingua enjoys using the Translation Management module with translation from ICanLocalize for a variety of reasons:

• It is easy to find and review professional translators to work with.
• Assigning nodes for translation and communicating with translators while work is in progress is simple and straightforward.
• The review and proofreading options are helpful.
• Quality of translation is extremely important to Ultralingua, and the translators they find through ICanLocalize consistently impress them.
• Contents are automatically entered into Drupal once translators complete each page sent for translation, so it becomes ready for their team to review quickly

One of the biggest hurdles involved their Workflow module, because at that time the Translation Management module wasn’t compatible with it. Ultralingua and ICanLocalize worked together to create and test a solution with their system, which now makes it possible to easily send newly translated content to editors for review.

A Site that Can Keep Up

Moving to Drupal brought a lot of benefits to Ultralingua’s content management team. Drupal’s workflow and revisioning systems make it possible for various individuals at the small company to work on the site.

Integrated translation management means that all new contents are available in all languages, without spending time coordinating changes with translators.

Ashleigh concludes:

We come out with new products all the time, so we like working with Drupal because it is easy for us to use the tools to get content out quickly. The set-up we have now really puts us in control.

Major Modules

• Workflow
• Revisioning
• Content Construction Kit (with Money field, Filefield, Content Permissions)
• Currency
• i18n
• Translation Management
• Nodequeue
• Google Website Optimizer
• Google Analytics