Blog.
October 22, 2014
—Codi Lechasseur

Case Study: Doctors of BC

A Drupal 7 transformation.

Summary

Doctors of BC was founded in 1900 as the British Columbia Medical Association, and has a long history of working for members, improving patient care, and influencing health care policy. As part of a rebranding process started in late 2012, Doctors of BC (formerly the British Columbia Medical Association), engaged Fuse to build a new Drupal based website in spring of 2014. The Doctors of BC had been running on Drupal 6 for years and the site served successfully as a key communications and transactional resource for Doctors of BC staff & members. However, with a new brand, a desire to better support mobile users and a need to replace an aging codebase it was time for a rebuild.

This was no ordinary corporate website project. The new Drupal 7 system was replacing not only an aging Drupal 6 site, but a legacy custom eCommerce system with sophisticated business logic, a complex permissions matrix and a host of integration points with internal systems. Oh… and it all needed to be responsive.

We worked alongside Cossette Communications on the project (UX & Design) and were given a tight four month timeframe to build out the project.

Why Drupal?

Drupal was already implemented on the existing site which made the choice easier as the content management team at Dcotors of BC was fairly familiar with the administration interface of Drupal (albeit Drupal 6) and the systems team was familiar with performing things like security updates and digging through code and the community if necessary.

In addition, the amazing effort that’s been going into Commerce helped us remove a ton of custom “cart” code and leverage a great foundation for both the store and back end administration of the site.

The Project

Key Features

Members Section
Doctors of BC’s membership system is an in-house custom developed application which manages all aspects of membership and billing information for the organization. The old site contained quite a few custom modules that needed to be upgraded to Drupal 7 while being made more robust and easier to maintain. Even though the public side of the site is quite large and complex it doesn’t come close to the amount of work that went into the members only section of the site. With roughly 18000 member accounts migrated over and a complicated third party database integration, the members section took the lions share of budgeted time to complete. Invoices, dues, and society memberships all brought into a nice and easy to use interface.

Ecommerce
Ecommerce was a large portion of the members only section allowing members to pay their membership dues, outstanding invoices, and even purchase discounted items such as: sporting tickets, movie and ski passes. Using the Commerce suite of modules as the foundation for the site gave us a leg up in the cart department and allowed us to put our development time into some of the more unique features of the cart; timed expiration of cart contents and the limiting of products per category to name a few. With Commerce’s pre-built administration views and cart workflow our client had everything they needed to manage all commerce transactions on the site and reduce the amount of time dealing with the headaches of a custom built cart.

Responsive
Not only does the layout adjust for screen dimensions, it also adapts to environment interaction. Mouse clicks don’t always smoothly translate to taps, so we made sure to respect the native input methods.

Tag Subscriptions and Favourites
A requirement from the Doctors of BC was a way to pin or bookmark both single pages as well as tagged collections of content within the site. The flag module got us most of the way there with the 2.0 branch allowing flagging of any entity which let us create a group of tags that a member could subscribe to. Using views we displayed a dynamic list of content to the members based on tags they had flagged. The second flag problem we encountered was the ability to flag non-content pages. Landing pages built with views and any custom pages created for the members section weren’t entities so flagging them was not possible with just the Flag module. After a few patches to Flag Pages though, members were free to bookmark any page on the site.

Content Administration
Using Panels and Panelizer allowed us to create a simple drag and drop interface for the content administrators to place content anywhere and whenever they want. Not only did it simplify content management for the Doctors of BC team, but also reduced the training time and support calls for something that should be pretty straightforward for a content management system. We also spent a lot of time creating a streamlined content editing interface so our client could add media and blocks inline, stage draft content and even preview content within the sites theme before publishing.

Project Management

For this site, project management was a partnered effort with Cossette, who was responsible for the Doctors of BC rebranding, site design and requirements analysis. We faced a tight timeline from the start, but knowing we had the experience and organizational tools to handle the demand we were excited to take this project on.

Doctors of BC, Cossette, and Fuse management had weekly meetings to review the project’s progress and discuss any outstanding items for that time. Fuse and Cossette’s project managers also had ongoing calls daily to discuss specific components of the site.

For all of our projects at Fuse Interactive we use a project management tool called Active Collab. It gives us one central location for all client and internal communication as well as timelines, milestones, issue tracking, and task assignments.

Active Collab was readily accepted and used by both Cossette and Doctors of BC management for task assignment and online discussions. When we reached the QA phase we reported all functionality bugs and change requests in a shared Google Docs Spreadsheet due to the high number of people reporting during this phase. It helped to eliminate any duplicate items and further refine any nonspecific requests. Once approved, all requests were quickly moved over to Active Collab for task assignment.

Key Modules

Commerce Kickstart: Due to the large shopping cart component of the site we started the whole project off with the commerce kickstart distribution. This definitely helped get the project going and let us focus on the unique parts of the shopping cart experience.

Panels and Panelizer: We’ve always been eager to give as much control over the sites content as we can and this time we took it a step further by giving the client control over the layout and presentation. Using panelizer we were able to provide a simple drag and drop interface for blocks including the main content area. If the clients wants a block on a particular page they can do it. If they don’t want a banner image at the top of a particular page, they can remove it.

Media: The media module was a tough one to commit to since the 1.0 branch didn’t do everything we wanted nor did it do it in the way we wanted it to. The 2.0 branch had the things we needed, but has been a moving target for a while requiring dependencies that are also in active development. We settled on 2.0 and spent a while going through the issue queue applying patches and re-mediating where necessary.

Features: We used Features extensively for content migration and a place to put custom code that related to the exported configuration. We’re still undecided at Fuse on whether features based on content types or specific functionality or whether an MVC style approach is best, but due to the number of content types and how easily they fit into sections on the site we settled on roughly one feature per content type which worked out fairly well.

Feeds: Feeds was needed extensively to bring in content from a third party database managed internally by the Doctors of BC team. Some feeds were mapped to actual content types in Drupal while others handled populating custom entities.

Menu Minipanels: With Panelizer in place to allow the client to manage the content within the content region, it didn’t seem right to not allow editing of the menu’s content as well. We converted the mega menu to a mini panel and allowed the placement of static or pre-made dynamic blocks within a region alongside the sites menus.

CKEditor: We’re big fans of CKEditor and with the inclusion of CKEditor in Drupal 8 it makes sense to get new and old clients alike used to it. With the addition of a few additional plugins: CKEditor Tabber and CKEditor Blocks we we’re able to give even more control of the content area to the client. With CKEditor Tabber they were able to make static tabbed content appear in both horizontal or vertical tabsets. With CKEditor Blocks they were able to place static or dyanmic blocks inline with page content.

Bean: Blocks as entities is awesome! We were able to create different block “types” that could each have their own fields. This made creating many similarly structured, but different, blocks easy for the client. With Panelizer, the “beans” can be placed anywhere on the site whenever they want.

Breakpoints and Picture: Usual suspects for us on responsive sites. We setup a couple of breakpoints and a couple of image styles and the Picture module does the rest.

Manual Crop: Asking a client to load up Photoshop or another image editor to carefully crop and resize images works sometime, but it’s awesome that they don’t have to now. Just upload the photo and you’re presented with a pretty nice fullscreen crop interface. Select the crop size and hit save. Even better, it supports multiple crop styles per image which worked really well with the Picture module and responsive images.

Menu Node Views: For a large chunk of the publicly accessible portion of the site the content is organized into sections. Each section pertaining to a topic that is further broken down by sub-sections and sub-pages

Migrate and Drupal-to-Drupal data migration: The previously mentioned user migration wouldn’t have been a walk in the park without the Migrate module and the D2D module on top. Not only did it migrate the user data, but also upgraded the passwords from MD5 to the more secure SHA-512.

Flag and Flag Page: Not only did the members want to flag nodes, but they wanted to be able to flag any page on the site. Flag Pages to the rescue. Landing pages built with views. Custom pages from custom modules. The homepage even. We also created a tag subscription interface using the newest version of flag which allows flagging any entity type. We tagged content with taxonomy terms and let the members flag a tag. Then content tagged with that tag showed up in their member area.

Omega 4: Our goto theme for all projects here at Fuse. It’s responsive and supports SCSS out of the box.

Community Contributions

During the development process we made it a point, as we always do, to contribute back as much as possible to the Drupal community.

Contributed Patches

Sandbox Modules Created

We also reviewed and tested dozens of patches across 17 additional modules making sure to note our outcomes for the module maintainers.

Key Team Members

Fuse Interactive

Doctors of BC

  • Kate Senkow
  • Ivan Doumenc
  • Sean Leslie
  • Tanya Hallgren
Codi Lechasseur — Technical Lead
Born and raised in East Vancouver, Codi’s jaded sense of irony developed earlier than most. His penchant for black coffee and obscure music allowed him to seamlessly blend into the unwashed basement dwelling art-commune that is most of the eastside.