Migrating a Complex Museum Website from a Commercial CMS to Drupal


Jane Alexander, USA, Niki Krause, USA

Abstract

In 2010 The Cleveland Museum of Art rolled out a brand new website, winning online acclaim and garnering numerous design awards based on a high-concept idea: while the museum’s galleries are closed during its $350 million building expansion, make its collections available online. Allow online visitors to explore virtually, getting lost in the world-class art. But although visually distinctive, the website was far from perfect: it couldn’t support the technology or communications goals of the museum going forward, because of its underlying, heavily customized CMS and its shallow information architecture..

To regain financial and developmental control of the museum website, Information Management and Technology Services (IMTS) managed the migration of the website from its heavily-customized legacy content management system (Sitecore CMS) to a flexible, open-source CMS (Drupal) that could be maintained and expanded in-house.

This paper explores the managerial and technical processes required to replace the website with a new one that looked the same, but delivered a better user experience.

Keywords: public websites, content management systems, open source, digital asset management, integration, project management

1. Background

In late 2008, the Cleveland Museum of Art envisioned a new public website that would present the museum’s entire collection virtually and encourage online visitors to immerse themselves in exploration even while the physical galleries were closed during the museum’s $350-million building expansion project, The initial plan proposed by the internationally-acclaimed design firm Pentagram was to weave artwork through every part of the website, to keep a renowned collection “out there” in the public eye while the physical works were in temporary storage or travelling to other museums.

Pentagram proposed that the website be intentionally shallow, using a visually-pleasing mix of images—of art, people, events, and the museum itself—and text blocks laid out as a deck of cards for navigation and enticement. Longer textual content describing art, exhibitions, upcoming events and programs, etc., would float above the visual array in simple black pop-ups.

A New Website with Cracks and Holes, and a New IMTS Director

The new director of Information Management and Technology Services (IMTS) started three weeks before the planned launch of the new website. The Director of Marketing and Communications at the time had outsourced development of the new website to a Microsoft Sitecore-certified implementer. There was no IMTS representative on the project team, and no needs assessment or scope of work (SOW) document. The implementer was essentially working from the Pentagram design sketches, and building backwards. And, ironically for a website that was focused on art, the implementation of an extensive and complex online collection was an afterthought.

Collection Online an afterthought

On December 31, 2010, just three months before the proposed launch, CMA contracted with Piction the vendor partner who provides the museum’s internal digital asset management (DAM) for object images to create the mini-repository and online collection. When the new IMTS director began on March 1, it was apparent that this was an impossible feat. Again, neither a needs assessment of the back end and its relation to the new website, nor a statement of work (SOW), had been completed. The IMTS director reported that this would need two more months in order to deliver a minimally-functional Collection Online integrated with the Sitecore display layer.

Critical shortcomings. The resulting website, launched in May 2010, was visually stunning. Unfortunately, the navigation, design (front end and back end) and structure were poorly-suited to serve the needs of actual online visitors. Moreover, the site failed to meet the requirements of the Communications and Advancement departments or to further the overall goals of the museum in regards to scholarship, artistic excellence, and community engagement.

The Sitecore CMS was heavily customized by the original implementer with perplexing code, rendering it prohibitively expensive to adapt to future needs. Search Engine Optimization (SEO) and Google image indexing were impossible (there were no paths for pages); social-media sharing functionality had not been developed; and the plug-ins—including the Calendar and Mailing Lists—behaved idiosyncratically. The Sitecore user interface was complex and unintuitive (especially for content developers); and while the content development was deemed complete, and functional in Internet Explorer, the public website offered limited support for Firefox, Chrome, and Safari. In addition, there was no plan or accommodation for access by any mobile device.

Despite proven public interest, the site’s homepage failed to incorporate any museum related events. Users were unable to access any information pertaining to the museum’s wide catalog of lectures, films, performance events, art classes, antiques road shows, and book clubs. Even basic, general information—like hours of operation, admission (free!), and driving directions—was sparse, difficult to find, and often out of date.

Financially, Sitecore license fees were high, and a separate license was required to maintain both a staging environment and a production environment. Because Sitecore required that development be performed by a certified developer, the museum needed to maintain a long-term relationship with a third-part implementer, or pay for the training and certification of one or more staff members.

Stakeholders and ownership disconnect. Museum staff uniformly perceived that the Sitecore website was ‘owned’ by the old Marketing & Communications department, and that key areas central to the overall mission of scholarship, artistic excellence, and community engagement, had no visibility or voice in the museum’s online presence.

The Web Editors—Marketing & Communications and Design staff who all had responsibilities in addition to website work—were overwhelmed creating content related to major exhibitions and high-profile institutional announcements, even before they reviewed, edited, re-wrote, re-voiced, and finally posted submissions from ‘secondary’ program areas. Staff members who knew both the details of these secondary program offerings and their target audiences intimately had no direct access to the Sitecore admin interface to add or edit content. There was no interdepartmental arena for discussing and setting priorities, for either online content or website. There was no defined channel for internal communications regarding the museum’s single most important tool for communicating with the public.

Pressing Projects and Challenging Environment

With the building project well underway, the new IMTS director had to focus on the design and implementation of the technology infrastructure. Choices regarding amount and locations for connectivity/wifi had to be made within an inflexible budget determined years before. Meanwhile, three “top priority” application projects were assigned to IMTS, all inter-dependent and with firm implementation deadlines:

A) Choosing a Collection Cataloging and Management System (CCMS)

For three years, the museum had been considering commercial replacements for its 15-year-old, custom-built Apelles collection management system. The selection taskforce was at a complete stalemate, with half advocating for a strong library-oriented cataloging system, and the other half advocating a workflow/request-centric solution with minimal support for cataloging. No cross-department needs assessment had been conducted, and no formal request for proposals (RFP) process conducted; this project would require extensive, cooperative work to determine and implement a solution.

The museum ultimately found that no single commercial solution could address all of its needs, so they elected a design-to-build, proprietary collection cataloging and management system (CCMS), based on the Microsoft Sharepoint platform. The CCMS is scheduled for launch in July 2013.

B) Life-long Learning Center (LLC, now known as Gallery One)

In early 2010, this family-oriented “learning zone” project was being managed by a small group in the Education department. Upon reviewing the proposals of the interactive design firm they’d retained, IMTS reported to the Director that the project as outlined was too costly, not dynamic, and incorporated dated technologies. The physical space of the life-long learning center (LLC)  was at the lobby entrance to the museum; the opening date of 12-12-12 was not flexible: the project had to be done right, and on time.

The museum assembled a new project team, including IMTS, Education & Interpretation, and Design & Architecture. Vendor partners included a new interactive design team, an AV integrator, and digital asset management (DAM) specialist that could provide a CMS solution that linked to the museum’s existing DAMs and feed the art-related data to the project’s interactive elements. The end result was Gallery One.

C) A Collection-focused Mobile Platform for Tours (ArtLens app)

The need for a mobile app for touring the permanent collection was a priority. IMTS decided to work with Piction (the vendor partner who provides the museum’s internal DAM for object images) to test a mobile tour that could run from the current website. It was clear from the results that a museum-wide app needed to be created as a second step. The team suggested incorporating the project into Gallery One so that the back end would be designed to handle our data for all interactives. Linking the iPad app to the galleries also strengthened Gallery One’s concept and goal to move visitors into the galleries with a better tool set to understand art.

Museum IMTS staff was working large application projects, without a dedicated applications team. The department was restructured: technical services were made more efficient, media services focused on content and AV. The department ultimately hired an application services manager and pulled together programmers and data analysts from IT and other departmental silos.

IMTS Proposes a Way Forward

After careful assessment of the whole technology landscape, the IMTS director met with division directors and proposed the following website initiatives:

  • Bring hosting and development in house to control costs and direction.
  • Identify and implement the right back end CMS for the website, to address current accessibility issues and build a flexible platform for additional development.
  • Give the museum departments a larger role in guiding and maintaining the website, to increase buy-in and improve content quality and currency.
  • Upgrade Collection Online usability, then expand it to be a true, world-class research tool.
  • Develop the website as the central support for future art and technology museum efforts.

2. Stabilize and Plan (Phase 1)

Project Leadership

In March 2011, after the IMTS department finished restructuring and just nine months after website launch, director David Franklin shifted complete management of the website from the old Marketing and Communications department to IMTS to ensure that it aligned with both strategy and internal systems infrastructure. IMTS was primed to identify and address technical and organizational problems, and prepare the website for upcoming challenges:

  • Promoting many more events and exhibitions as new sections of the museum open to the public through an enhanced calendar and robust ticketing system.
  • Shifting the focus to online giving and establishing a strong online presence to engage tech-savvy young professionals as active members, requiring outreach to a new demographic and a transaction portal.
  • Emphasizing scholarship and lay-research, a personal priority of the Director to enhance the collection online and provide better visibility and access to research efforts through the museum.
  • Supporting the museum’s planned interpretation-meets-technology initiative and iPad app for collection exploration – Gallery One and the ArtLens app.

CMA charged the IMTS with the task of managing the technical development, functionality, support, and strategic planning of CMA’s website.

Steering Committee

A new Web Steering Committee (WSC) was established with key deputy director-level staff, to meet monthly and provide oversight for the public face of the museum. Members included the Director of Collections Management, Director of Communications, Director of Design and Architecture, Director of Library and Archives, Director of Membership and Visitor Experience, and a deputy director from the Development department. The steering committee was led by the IMTS director, and project managed by the application services manager.

Subcommittee   Includes staff from   Focuses on   Furthering goal
Collection Research & Presentation   Curatorial, Collection Management, Conservation, Exhibitions, and the Ingalls Library and Museum Archives   Collection Online, plus content related to research, caretaking, and presentation of art in the permanent collection and special exhibitions   scholarship, artistic excellence
Educational and Entertainment Programming    Education & Interpretation; Performing Arts, Music & Film; Community Arts; Marketing & Communications; and Media Services   event-related content   scholarship, artistic excellence, community engagement
Transactions    Membership, Development, Ticketing, the Museum Store, Human Resources, IMTS   online giving, e-commerce, recruitment, constituent history and retention   community engagement
Branding    Marketing & Communications and Design   promotional strategy,   artistic excellence, community engagement
     homepage, look & feel, and institutional voice/tone  
User Functionality    Design, IMTS, plus select web-savvy staff from throughout the museum   user interface design, information architecture   scholarship, artistic excellence, community engagement

Table 1: Web Steering Committee: Subcommittee Makeup and Focus

Each subcommittee was chaired by one of the WSC members, and one or more IMTS representatives participate, depending on their specialty (e.g., the business systems analyst attends Transactions subcommittee meetings). The subcommittees meet mid-month (or more frequently when required, e.g., during the conceptual redesign of an entire ‘learn’ section), then relay their meeting minutes, action items, and recommendations through their chair to the WSC for consideration.

This committee/subcommittee structure maximizes stakeholder exposure, while minimizing the time commitments for any individual staff member, and allows multiple projects in content development or needs analysis to run in parallel. For example, redesigns for the main menu structure and Collection Online were tackled simultaneously by the User Functionality and Collection Research and Presentation subcommittees, respectively, while Transactions worked with an outside vendor on portal development.

The Marketing and Design subcommittee would continue to maintain brand consistency and institutional voice/message throughout the website, and for the time being, all content changes would continue to go through the Web Editors group established for the previous Sitecore implementation.

Assessment of CMS Options

The WSC considered working through the problems and staying the course with Sitecore or moving to an open-source solution. Various strategies were discussed for both CMS solutions:

Stay with Sitecore. The existing Sitecore implementation was poorly implemented, involving heavy customization using C#, the integration of buggy plug-ins, and reliance on Sitecore’s barely-accessible data structure. With those underlying shortcomings and the high cost of continued development, coupled with the lack of internal control, a decision had to be made. The IMTS director saw two options for continuing with Sitecore as the website back end:

  1. Move to another implementer, with the hopes that a new developer with a fresh perspective/different skill set could resolve the most critical issues and make the best of the Sitecore tool. The museum would gain development resources, while requiring no capital investment for additional Sitecore/Visual Studio licenses, as development/staging would be done on the implementer’s system. On the downside, two vendor partners would still be present in the website project; and there would be some lead time in hiring a new vendor/developer with Sitecore certification (or paying to have a vendor partner with other CMS development experience certified in Sitecore), then allowing that new vendor/developer the time to unravel and understand the existing highly-customized code base. As a final consideration, a new implementer would have other clients; museum development priorities would be subject to schedule availability.
  2. Hire an in-house sitecore web developer and to set up an in-house test/staging environment. The benefit of this approach would be that it would allow the site to be completely self-sufficient, and able to address museum development priorities on the museum’s preferred schedule. However, the museum would be plagued with a high capital expenditure (additional server hardware, plus Sitecore/Visual Studio software and annual license fees), and require a longer lead time to set up, hire a developer, and obtain proper training/certification of Sitecore and the custom code base.
  3. Migrate to Drupal. The option IMTS proposed, which was ultimately adopted by the WSC, was moving to open-source Drupal CMS software. There were many positives for this approach: the core Drupal code base was being actively developed and well-managed in the development community, and many plug-in modules were readily available. Additionally, many open-source developers were available for hire in the field, and already working with similar institutions on similar projects. Drupal is used commonly among libraries, museums of all types, archives, and educational institutions (e.g., peers in all CMA functions) and the platform was scalable for our institution.

The negatives to such a move were the unknowns: the risk of using a new platform, the lack of knowledge regarding the migration path from Sitecore to Drupal, and the lack of information regarding the timeline for conversion. The multi-channel, multi-phase migration plan was roughed out:

  1. Hire an in-house web developer.
  2. Assess the real needs of the museum in terms of web content/delivery.
  3. Improve the user experience on the existing website / Collection Online as much as possible, as inexpensively as possible, then keep Sitecore running in maintenance mode.
  4. Build a robust new back end for the website in Drupal 7.x, which meets all the core needs of the museum’s various departments.
  5. Expand the new Drupal platform to fully support the museum’s goals of artistic excellence, community engagement, and scholarship; tackle the “wish list” for content delivery, functionality, and user experience.

In-house Web Developer

Over the summer of 2011, the museum opened its search for an in-house web developer with both development and design experience, and ultimately hired a veteran programmer with a second-career fine arts degree, several years’ experience on a university web development and support team (including coding a custom CMS from the ground up), and recent experience as the marketing-department webmaster for a large Cleveland non-profit.

The first assignment for the in-house web developer was simple: learn everything about the museum’s web content needs, and about the Drupal CMS and its support community. The decade-old staff Intranet was ripe for replacement, and work began to install, configure, and build a new internal website using the just-released Drupal 7.x.

The IMTS director, applications team leader, and new in-house web developer attended the Museum Computer Network and Museums and the Web conferences, and started trolling the websites of peer institutions, science museums and historical societies, and commercial galleries with a mission to determine of the industry’s best practices, note the caveats, and understand how other museums were integrating their art and technology.

Short-term Solutions

Basic missing functionality: Share and Back. The Pentagram design, as implemented in the Sitecore-based site, was intentionally shallow. The animated cards on the landing pages provided the key visual elements, with information pages designed to float above while the landing pages were ghosted in the background. The pop-up implementation resulted in two serious usability issues for online visitors, which required immediate attention:

  • URLs were created and displayed only for landing pages. Obviously, this was an immediate obstacle to driving traffic to specific information pages on the website via e-newsletters and social media. The old Marketing and Communications department contracted with the original implementer to create a sharable, short URL for every information page; this was implemented as a pop-up on top of a pop-up, but it worked.
The [Share] pop-up added to Sitecore allowed staff and online visitors to access a short URL for a specific information page. This functionality was not required after the move to the Drupal-based site. Photo by CMA.

The [Share] pop-up added to Sitecore allowed staff and online visitors to access a short URL for a specific information page. This functionality was not required after the move to the Drupal-based site. Photo by CMA.

  • Standard browser back-button functionality did not work with the Sitecore pop-ups. Online visitors were able to search the site and see a results list, but had to re-execute the search after following any of the links to an information page. IMTS contracted with the original implementer to re-implement the universal search results display on a plain vanilla page. The styling mimicked the look of the floating, black text area, but there was no ghosted-out landing page behind it: the background was solid background gray. (This early theming adaptation was later used for styling peripheral sites, and became a basis for the later replacement of the pop-up pages on the Drupal-based site.)
The re-implemented search results page on the Sitecore-based site was a “real” page rather than a pop-up, allowing online visitors to (finally) use the back button. Photo by CMA.

The re-implemented search results page on the Sitecore-based site was a “real” page rather than a pop-up, allowing online visitors to (finally) use the back button. Photo by CMA.

 

Navigation changes. Several design-related usability issues in the Sitecore website were addressed with no programmer intervention, using strategies later retained in the Drupal website. The WSC User Functionality subcommittee spent several months analyzing the Sitecore website and surveying other museum sites to determine standards for best-practice navigation and menu structure (e.g., where are job postings, the day’s events, and access to art online?). Two simple modifications were made to content, overriding recommendations from the Pentagram style guide:

  • Originally, every landing page was created with multiple image-only cards, depicting either an art object or editorial photography (e.g., photos taken of people with art, in classes, listening to lectures, etc.). These image-only cards were confusing to online visitors, because they frequently did not relate to the topic of the landing page, and there was no clear pattern as to where they would lead. These image-only cards were completely removed, with no impact on the visuals of the website.
“Where am I going?” Three of the image-only cards on this landing page lead to the same content page (Studio Classes for Children and Teens). Other image-only cards here are blind (lead nowhere). Photo by CMA.

“Where am I going?” Three of the image-only cards on this landing page lead to the same content page (Studio Classes for Children and Teens). Other image-only cards here are blind (lead nowhere). Photo by CMA.

“Why is this even here? What does it have to do with anything?”The art-object cards on this landing page lead to art-object detail pages, completely unrelated to the performing arts content around it. Photo by CMA.

“Why is this even here? What does it have to do with anything?”The art-object cards on this landing page lead to art-object detail pages, completely unrelated to the performing arts content around it. Photo by CMA.

 Landing pages are much cleaner and easier to navigate with art-object and image-only cards removed. Photo by CMA.

Landing pages are much cleaner and easier to navigate with art-object and image-only cards removed. Photo by CMA.

  • Based on the WSC User Functionality subcommittee’s recommendations, the main menu—displayed at the top of each page—was re-coded and completely reconfigured by in-house staff, and the submenus/content were reorganized to reflect the expectations of online visitors, rather than echo the museum’s internal structure of content silos/departments. Language used in the menus was simplified, and redundant links were removed, unless it made logical sense from the online visitor’s perspective for them to remain.

Homepage

One frustrating issue with the Pentagram design was that there was not enough screen real-estate (e.g., cards) to adequately feature non-exhibition programs—including popular lectures, films, performance events, art classes, antiques roadshows, and book clubs—on the home page. Additionally, since each card was exactly the same size, there was no way to emphasize major exhibitions or other featured content, beyond proximity of their card to the logo.

The User Functionality subcommittee recommended a slideshow treatment to increase screen real estate, and IMTS recommended “breaking” the design to include multi-card images. Design staff carefully selects images for two-and three-card use, so that it appears the scene is being viewed through a window: the effect is visually stunning, compelling, and personal. This design solution was so effective that IMTS contracted with the original implementer to add the functionality to Sitecore (April 2012), and then re-implemented it with totally different code/machinery for use in Drupal.

The original Pentagram homepage. The only emphasis possible is proximity to the logo. Photo by CMA.

The original Pentagram homepage. The only emphasis possible is proximity to the logo. Photo by CMA.

Showing emphasis on the homepage, using a triptych rotator to emphasize major exhibitions. Photo by CMA.

Showing emphasis on the homepage, using a triptych rotator to emphasize major exhibitions. Photo by CMA.

Interim Improvements to Collection Online

The WSC Collection Research and Presentation subcommittee assessed five areas in the original Collection Online implementation, considering all data back to its original source: data movement, searching behavior, publishing/display, user functions, and meeting immediate Curatorial needs regarding the collection. Based on the subcommittee’s findings, several immediate improvements were made to the Collection Online. IMTS managed a joint development project with Piction (who controlled the DAM data structure and return streams) and the Sitecore implementer (who controlled the display layer, and had to deploy the code).

  • Search functionality upgraded to allow for more complex searches and improved results: wildcarding, stop-word application, diacritic/Latin-1 character support, a new artist-name search field, and modified search drop-downs.
  • Sort and display logic was modified to hide certain object part records from the search results, and display them instead as related records.
  • Functionality was added to allow for on-the-fly watermarking for designated images (specifically to protect Contemporary art).

A Model for Distribution of Content Creation and Maintenance

In June 2012, IMTS proposed a radical shift in museum information culture: allow staff members in the stake-holder areas to enter and maintain the content for their own programs, to address the issues of content depth, accuracy, and currency, as well as distribute the maintenance workload.

The plan IMTS outlined for the WSC was as follows:

  1. Tech-savvy wordsmiths will be chosen from each stake-holding area, and their job descriptions adjusted to include the additional responsibilities.
  2. Content Gatekeepers will be trained in Chicago style and given a basic guide to the ‘museum voice’ by the new Marketing and Communications staff, then shown how to use the data entry templates.
  3. Marketing and Communications staff would provide a second set of eyes to ensure consistency of both message and voice, by ‘roving’ the site and adjusting/providing posting-specific feedback to individual Content Gatekeepers.
  4. Content Gatekeepers would meet formally once a month to discuss upcoming events (e.g., composed of content from multiple stakeholder areas) and content changes, and to review general style/voice adjustments.
  5. The Branding subcommittee would maintain the homepage arrangement plan and calendar, with additional input from the Content Gatekeepers to ensure secondary programs were given more visibility when needed.

The Marketing & Communications staff was concerned about the shift in editorial control, and the potential impact on content quality and institutional voice. In February 2012, as a pre-production pilot for the public website content-maintenance strategy, IMTS and Marketing and Communications worked together to test the content gatekeeper model for the newly-developed, Drupal-based Staff Intranet site.

This pilot allowed IMTS to fine-tune some gatekeeper staff selections recommended to the WSC, as well as the standing agenda and presentation style for the monthly meetings. Most helpfully, the staff Intranet team experimented with several different Drupal-supported approval processes for content publication, and found a rough balance for editorial control and efficiency.

One intranet gatekeeper—for Performing Arts, Music and Film—almost simultaneously started working as proto-content gatekeeper for the public website because of the huge amount of calendar-related program content his area provided. He gamely learned data-entry templates and rules for Sitecore and two flavors of Drupal; helped prepare the training strategy for Content Gatekeepers to follow; and became part of the hands-on content conversion and testing efforts in the Web-911 task force.

Parallel Development of an e-Commerce Portal

The Advancement Department—which includes Development, Membership, and Visitor Experience—had long identified the need to facilitate online giving, upgrade membership sales/renewals and online ticketing, and ultimately adopt a Single Shopping Cart model to facilitate the application of member discounts. They wanted to encourage membership and multiple purchases through up-selling, and create a comprehensive history of museum visitors’ membership statuses, purchases, and interests.

The existing online sales platform had some serious issues: there was no single location for all online-giving options, leading to confusion; ticketing services functioned only through Internet Explorer; and new members were unable to apply membership discounts to purchases outside of the transaction where the purchase was made.

In a parallel project to the website migration, the IMTS department worked with two outside vendors to implement an e-Commerce portal on a separate, secure server. Two phases of this effort were completed in rapid succession, providing:

  • Online tools for both members and staff, to look up membership IDs, edit contact information, and request a replacement membership cards.
  • A Central Table, to tie together record identifiers in the membership tracking system, ticketing system, and online store.
  • Membership purchase, renewal, and gift memberships. Forms are linked to the Central Table, and recommend upgrades based on current status.
  • Donor-circle (elite) membership care. Forms are linked to the Central Table, and highlight benefits based on current status.
  • Simple “donate now” forms for general donations, as well as the ongoing building-campaign. Forms include links to matching-gift tools.

3. Building the Foundation (Phase 2)

The award-winning Pentagram design was maintained for the Drupal-based site, in order to maintain integrity of brand and visual continuity. That said, given the new and different functionality, the usability needs required some extensions to the theming.

Redesign of Pop-up Pages

Eliminating pop-up pages opened up the site for SEO and provided a URL for every page; provided better lateral navigation; adapted the slideshows to a more standard style (using big arrows instead of a row of numbers below an image); and allowed for the ability to embed video.

The original pop-up information page design, floating over the landing page. Related materials and share/print are on the right. Note the slide numbers above the page title. Photo by CMA.

The original pop-up information page design, floating over the landing page. Related materials and share/print are on the right. Note the slide numbers above the page title. Photo by CMA.

The newly-designed basic information page, with its own URL and left-side navigation for related materials, as well as direct navigation to the parent landing page and all sibling pages. The share/print functionality is now offered via icon. Note the slideshow is not controlled by arrows on either side of the banner. Photo by CMA.

The newly-designed basic information page, with its own URL and left-side navigation for related materials, as well as direct navigation to the parent landing page and all sibling pages. The share/print functionality is now offered via icon. Note the slideshow is not controlled by arrows on either side of the banner. Photo by CMA.

A common public complaint about the Sitecore-based website was theme related: the white text on black background was difficult to read, especially for those with low vision. Design staff addressed this in the pop-up page redesign for the Drupal site as a user option: click an icon, and the text area would changed to a more readable black-on-white, and the preference would be remembered as the online visitor navigated from page to page.

The ‘peel’ icon allows online visitors to toggle text areas from white-on-black to black-on-white, for easier reading. Photo by CMA.

The ‘peel’ icon allows online visitors to toggle text areas from white-on-black to black-on-white, for easier reading. Photo by CMA.

Redesign of Art Object Pages

After reviewing dozens of other museum online collections, the WSC Collection Research and Presentation subcommittee determined that the existing vertical layout design involved too much scrolling: the art images were too far away from the descriptive metadata and tagging interface. The subcommittee and Design staff proposed a side-by-side layout, breaking with the pop-up page (basic page) template.

“What is it?” The original art-object detail pages used the same pop-up page design, floating over the search results page. The online visitor couldn’t look at the art and see the description at the same time. Photo by CMA.

“What is it?” The original art-object detail pages used the same pop-up page design, floating over the search results page. The online visitor couldn’t look at the art and see the description at the same time. Photo by CMA.

The phase I design for the new art-object information page, as implemented. Art and descriptive information are side-by-side, and the identifying information is concatenated, like a wall label or caption. Description, Inscription, and the See Also links area may be opened/closed. Alternate views of the art are offered as thumbnails in a scroll bar below the image area. Photo by CMA,

The phase I design for the new art-object information page, as implemented. Art and descriptive information are side-by-side, and the identifying information is concatenated, like a wall label or caption. Description, Inscription, and the See Also links area may be opened/closed. Alternate views of the art are offered as thumbnails in a scroll bar below the image area. Photo by CMA,

Legacy Data Analysis and Content Type Design

The Application team spent the spring of 2012 reviewing the different types of content already housed in the Sitecore system, mapping the fields, and reviewing their findings with the stakeholder department via the Web Steering Committee. Ultimately, 40 different types of data were specified in detail, including eight unique kinds of events/calendar items.

This list would form the starting point for content type development in Drupal. Current content types are shown below:

Basics   Pieces & Parts   Calendar    Special Content
Basic Page   British Portrait Miniature Artist   Exhibition   Affiliate Group
Blog Post   Collection Department   Film   Annual Report
Card Landing Page   Contact   Hosted Event   Art Object
Document   Curator   Lecture   Art to Go Program
Panel   Daily Special   Other Event   Collection in Focus Article
Webform   Facilitator   Performance   Distance Learning Program
    Featured Item   Special Event   Donor Circle Level
    Gallery or Space   Tour   In the News Article
    Gallery View       In-house Education Program
    Map       Internship Opportunity
    Sponsor       Job/Employment Opportunity
    Sponsor Block       Member Magazine
    Wallpaper       Membership Level
            News Article
            News Release
            Personal Story
            Volunteer Opportunity

Table 2: CMA Content Types as of April 2013

Support for Gallery One and ArtLens

As the museum’s Gallery One and ArtLens projects progressed to the functional-design phase in early 2012, it became clear that the CMA public website would need to provide two vital support services for these art and technology initiatives:

  1. Feed a list of the current day’s exhibitions and events/programming for display in the ArtLens, including a identifying image, title, time, venue/room, and a brief description.
  2. Provide a destination for social-media shares of visitors’ favorite art objects, from interactives throughout Gallery One and from the ArtLens. Ideally, this would be a complete description of the art, with images and all related media.

The Sitecore implementation could not support either of these requirements, which put a hard end date on the website migration to Drupal. The website would have to be operating with the new back end by 12-12-12, the Gallery One donor opening gala. Collections Online re-implementation and the calendar module became the immediate development priorities for CMA’s in-house web developer and vendor partners.

Implementation Plan for Back end Development and Migration

With an immovable deadline in place and the level of complexity of the project, the IMTS director decided to engage an expert advisor/development firm to work with the in-house web developer, providing depth of experience for module choice and best-practice approaches to the server setup, module choice, content-type definition, migration and non-standard functionality approach. The intention was a cooperative effort, with the expert advisor serving as a mentor/trainer to bring our in-house web developer up to expert level, comfortable with every aspect of the website and able to take over administration and development.

The museum’s online branding had to be maintained. The Drupal implementation allowed the museum to add new functional elements while maintaining the overall look and feel of the CMA website would remain. Theming would consist of careful mimicry, with design-consistent accommodations. The migration started with a thorough review of the in-house needs assessment and candidate content-type list, and setup with git and unfuddle for code- and task management. Drupal modules to support specific functionality needs were identified and installed (and of course, added to over time):

Module Description Use URL
Views customized sortable formatted lists of content or fields based on field value comparisons We use Views for: calendar day, today’s events, customized page-level event listings, card decks, job opportunities, membership levels, document repositories, etc. http://drupal.org/project/views
Field Collection blocks of common information with common display needs across content types We use Field Collection for: card fields, page banner fields, common event fields, art object images, etc. http://drupal.org/project/field_collection
Features “codified” (i.e., made into code) groups of common “features” (i.e., node types, views, pages, settings) We use Features for: multiple-developer environments, reverting back to stable code while developing, providing a platform to custom code, updating production environment from development server (with git) http://drupal.org/project/features
Display Suite custom display modes for cross-site use We use Display Suite for: field level displays, including custom PHP, specific wording for links (e.g., “view African Art in the collection”), standardizing document download links, providing different display modes for event lists and field collections (e.g., films and performances have ticket links at top) http://drupal.org/project/ds
Panelizer Customizes panel displays on any node We use Panelizer for customizing basic pages from a default configuration for content and layout – developers can add panels containing views, nodes, menus, custom PHP code, etc. http://drupal.org/project/panelizer
Migrate migrate/import content from a file/website/database to Drupal We use(d) Migrate for: importing Sitecore data from CSV files, import articles from WordPress blog, weekly refresh of Art Objects from Piction database http://drupal.org/project/migrate
Search modules Search API, Apache Solr, Facet API, Nodequeue We use search modules for general search capability and enhanced collection search http://drupal.org/project/search_api
http://drupal.org/project/apachesolr
http://drupal.org/project/facetapi
http://drupal.org/project/nodequeue
Menu modules Menu, Menu Block, Rendered Menu (sandbox module) We use menu modules for general menus, page-level menus of menu-peer items, rendered menu displays and dynamic menus built from views. Menu is core module http://drupal.org/project/menu_block
http://drupal.org/sandbox/tim.plunkett/1688232
Services modules Services, Services Views, REST Server We use services modules to make specific data available for display in iPad application, ArtLens http://drupal.org/project/services
http://drupal.org/project/services_views
http://drupal.org/project/rest_server

Table 3: Key Drupal Modules Implemented

The choice to engage an out-of-state firm complicated the mentoring, and made the practical exchange of nuanced information about the museum’s web content and required functionalities difficult. Yet despite the difficulties encountered along the way, the end product is very exciting.

Responsive Design and a First Pass at Mobile Device Support

The museum had set aside small capital budget line in 2011 to pilot a mobile website. IMTS and Piction had piloted a mobile website for art-object access (a sleek, scaled down Collection Online), as a precursor to drafting the scope of work for the ArtLens.

The expert advisors brought in for the Sitecore-to-Drupal migration suggested incorporating responsive design into the theming, to develop a single interface that adapted (stretched and collapsed across various pre-defined width breakpoints) for display via desktop browser windows, tablets and minis, and smartphones.

Expansion of the e-Commerce Portal

In a parallel project to the website migration, IMTS, the WSC Transactions subcommittee, and the Education and Interpretation department worked together with vendor partner, The Opal Group, to expand the portal functionality to include:

  • An easy-to use RSVP module for unticketed events, including membership sneak-previews.
  • A context-sensitive form for group registrations for special exhibition group tours, school tours and classroom experiences, and art-to-go requests.

These new transactions are recorded in the Central Table suite, to add to the history/statistics.

Launch

Nine hours before the Gallery One opening and ArtLens launch on December 12, 2012, the IMTS department flipped the DNS switch to allow the new Drupal-based website to take over www.clevelandart.org, and conducted a frantic round of ‘Hail Mary’ testing to ensure that all the integration stuck; shared art objects successfully launched the correct website pages from e-mail, Facebook, and Twitter; and the feed for the Today calendar on ArtLens proclaimed the opening-day events as the clock ticked past midnight, just as expected.

The website implementation team took a deep breath, set up triage, and immediately launched into shakedown mode for the Drupal-based website:

  • Online visitors called almost immediately to report issues with Internet Explorer 8 on Windows XP (related to IE7 not supporting responsive design) and Chrome (image-card caching), which required immediate attention.
  • Curatorial staff identified several glitches with the untested Collection Online.
  • Several peripheral content areas still needed to be built and converted, including the British Portrait Miniatures Catalog electronic publication, the museum’s Nazi-era provenance database, and a new Teacher Resource Center of lesson plans and downloadable classroom aids.
  • The Design department started its in-depth review of the complex theming implementation, so the in-house Web Developer could pull everything up to spec and add additional styles for new content types and functionality.

With the entire website migration budget spent (and then some), the museum now relied solely on its in-house web developer and the applications team.
A complete timeline of the implementation is available in the Appendix below.

4. Planning to Soar (Phase 3)

Distributing Responsibility for Website Content

The museum’s content gatekeeper experiment proved successful for the internal staff intranet: variety and currency of content improved, with minimal “hands on” oversight from Marketing and Communications. Twelve new content gatekeepers identified for the public website will be trained in May 2013 to take over content development and maintenance responsibilities, freeing the web editors to become true oversight editors, and concentrate on promotion through homepage/campaign development and SEO. The approval process to be used for content created outside the Marketing and Communications department will also be finalized and implemented with Drupal module support and appropriate training.

Mobile Device Support

The responsive-design menu collapse machinery built into the Drupal theming provides a useful base for the support of tablet devices and high-resolution minis. Upon review and testing, the smartphone presentation of the responsive design is not as user friendly: the dual column of cards offered for navigation is awkward to scroll and select with the thumb, and the availability of the fully-collapsed menu is confusing when opened; the scrolling required is practically endless.

Design staff and IMTS proposed a simple, more app-like approach for the narrowest breakpoint in the responsive design (e.g., for smartphones): remove the collapsing menus; render the navigation as ladder-like, full-width buttons using theming similar to that already developed for the ArtLens calendar feed; and make use of the browser’s back button (for return) and CMA logo (as an intuitive “home” button). Graphic elements would be limited: two rotators on the smartphone homepage (for major exhibitions and featured events), and mini-thumbs on the buttons, rather than full-image cards. This approach should sidestep many of the layering issues in older iOS and Android OS devices.

A rework of the responsive design to support stretch-and-collapse for desktop browsers and tablets, and provide an alternate, streamlined presentation for smartphones is currently underway and an in-house development project.

SEO Implementation

During the need-assessment phase, the Marketing & Communications department determined that search engine optimization (SEO) was their top priority. The architecture of the original Sitecore implementation did not support crawlers beyond the card-deck navigation (which contained only titles), and paths for the meaty content pages were hidden even when aliased. For more than two years, the CMA had effectively disappeared from Google, Yahoo, and Bing. The public could not find our art or events without going to the website itself.

After the initial push to set up content types and accommodate legacy data in the “open for crawlers” Drupal system, IMTS started looking at taking the next step to true SEO, and identified a set of Drupal modules to support this effort:

Module Description URL
Meta Tags Automatically provides structured metadata about site content http://drupal.org/project/metatag
schema.org Provides “rich bits” for use by Google, Yahoo, and Bing, to improve the display of search results http://drupal.org/project/schemaorg
XML Site Map Creates a formatted sitemap to optimize crawling, and keep indexed results up to date http://drupal.org/project/xmlsitemap
RobotsTXT Allows management of the robots.txt file via Drupal, to tell crawlers what site content to bypass/ignore http://drupal.org/project/robotstxt
Drupal SEO Essentials Manages installation and configuration of core SEO modules http://drupal.org/project/seo

Table 4: Drupal SEO modules

IMTS and WSC Branding subcommittee are working in partnership with the museum’s advertising firm to determine and implement a set of best practices for the content-side of SEO: definition of paths and aliases, wording of page titles and page descriptions, and optimization of the site map presented. The Marketing & Communications department will oversee keywording, coordinated for all major campaigns, and provide analysis of those efforts. IMTS will set up a comprehensive dashboard for website analysis for the WSC to review at will, and incorporate SEO best practices into Content Gatekeeper training.

Expansion of e-Commerce Portal

The plan for expanding the website e-commerce / transaction portal includes:

  • Integration with the museum’s institutional scheduling system, Artifax, to dynamically display room reservations/use for public events throughout the museum.
  • Addition of full-function ticketing functionality, including support for series and seat choice, membership subscriptions and renewals, online donations, and event tickets within a single transaction. Ticket delivery methods include will call, print-at-home, send-ticket to mobile device, and true ticketless (verified onsite with a scan of membership card or driver’s license).

Expansion of Collection Online

Driven by the director’s initiative to take scholarship to the next level at the museum and provide world-class resources for researchers, the plan to enhance and expand the Collection Online is ambitious and exiting:

  • Addition of Zoomify to the art-object image viewer, for all available views (exclusive of the Contemporary collection).
  • Full tagging functionality based on the Steve model (http://steve.museum) will be added to art-object detail pages, and perhaps later tied to specific views of the object. Access to the tagging interface will not require login, and tags provided will be fed back to the museum’s CCMS.
  • Expansion of the Collection Online discovery engine, through the expansion of available facets for search refinement, the addition of new data of art objects (e.g., provenance, research bibliography, etc.), and the integration of content from editorial photography, the museum archives, and the library catalog.
  • Support for visitor-defined tours (e.g., lists/personal collections of selected art objects, associated with a title), defined from ArtLens or defined directly on the website. Tours must be viewable both on the website in desktop mode, and via the visitor’s mobile device.
  • Support for creation of downloadable slideshows for registered educators (e.g., lists/groupings of selected art objects and their captions, sorted in a specific order).
The phase II art-object detail page, as wireframed, showing the related content area (tabbed), tagging interface, and expanded descriptions. Note that when the Description area is closed, the tagger is right next to the art, for easy use. Photo by CMA.

The phase II art-object detail page, as wireframed, showing the related content area (tabbed), tagging interface, and expanded descriptions. Note that when the Description area is closed, the tagger is right next to the art, for easy use. Photo by CMA.

5. Conclusion

While the prospect of migrating to an entirely new content management system and immediately going live with a complex new website may seem like the unlikeliest of scenarios, CMA determined through careful consideration to make just such a move. By carefully evaluating all possible avenues—including working to fix and enhance the existing Sitecore installation—the IMTS team hired a Drupal expert advisor/development firm to guide the migration of the existing site to an self-hosted server that the in-house web developer would then maintain and continue to develop with the support of the CMA application and network managers. Considering the long-term costs of the Sitecore site, and the improved functionality and flexibility available with Drupal, the decision was simple.

Online visitors have seen two solid years of frequent, small improvements: evolution, rather than an extinction-level event and the sudden emergence a fully-formed new website. The technical execution of the website’s transformation occurred in sprints, with a variety of short-term functional improvements being developed and deployed on the Sitecore platform, even as construction proceeded on the new Drupal back end. Intellectual changes made to content, its organization, and the main menu structure carried over seamlessly during transition with no wasted effort.

Acknowledgements

Thanks to the members of the Web Steering Committee (Elizabeth Bolander, Carla Howard and Denise Grcevich, Dale Hilton, Betsy Lantz, Aaron Petersal, Jeffrey Strean, Mary Suzor) and its hardworking subcommittees (especially Jon Seydl, Elizabeth Saluk, Dean Yoder, and Susan Miller), the IMTS Applications Team (including in-house web developer Jeanne DeBonis, Linda Wetzel, Will Hannah, and Andrea Bour), and the Web Editors (Tom Barnard, Kyle Miers, and proto-gatekeeper Michael McKay). Special thanks also to our dedicated vendor partners for this effort: Piction (Erick Kendrick, Marcelle Kratochvil, Marty Channon), The Opal Group (Jim Kilmer), and Big River (Ron Cass).

Appendix: Sitecore-to-Drupal Migration Timeline

Date Milestone
November 2009 Pentagram website design accepted by Board of TrusteesSitecore build-out begins for core website
February 2010 Collection Online component of Sitecore website spec’d
March 2010 CMA begins manual content entry into Sitecore
May 2010 Sitecore website goes live on hosted servers, maintained by developer
August 2010 Sitecore website moved to in-house servers, maintained by developer
March 2011 Website leadership moved from Marketing to IT
May 2011 Web Steering Committee / Subcommittees established areas of concern identified for general usability areas of concern identified for transaction-based features.
Planning begins for in-house maintenance/development
June 2011 Content Gatekeeper plan proposed
August 2011 in-house Web Developer hired
September 2011 interim adjustments to Collection Online search function in Piction+Sitecore
December 2011 search results page re-implemented in Sitecore (back button functionality)
November 2011 main navigation menu overhaul in Sitecore
April 2012 rotators added to Sitecore; homepage coverage expandsinternal needs assessment conducted, content types identified
May 2012 discovery project for fast-track Drupal development
June 2012 Advancement department reworks entire ‘support’ section; expert advisor retained for fast-track Drupal development
July 2012 new web servers set up for Drupal development; content types reviewed and mappedDrupal buildout begins with expert advisor and in-house Web Developer responsive-design wireframes reviewed
August 2012 redesign for Collection Online accepted by WSC
September 2012 conversion of Sitecore data, WordPress blog begins
October 2012 expert advisor trains in-house Wed Designer (during Hurricane Sandy)
November 2012 Education & Interpretation reworks entire ‘learn’ sectionUser Functionality proposes new ‘research’ sectionsimultaneous data entry begins in Sitecore+Drupal for new content
December 2012 initial Piction standing migration for Collection Online on Drupal-based system completed; skeletal Drupal website goes live, incorporating blog content, Collection Online, and incomplete mobile site; Gallery One and ArtLens integration tested, goes live immediately; triptych rotators added to Drupal; partial homepage available; IE8 backward compatibility crisis; expert advisor exits project
January 2013 legacy data conversion continuesbasic theming corrections mademultiple Drupal views added, basic functionality corrected/completed; related pages/documents functionality added; autopath + globalredirect Drupal modules added; path review begins
February 2013 site search and results display upgradeddate-related sorting and display re-implemented (calendar); Collection Online search and display upgraded; artist index added
March 2013 ‘research’ section implemented; banner slideshows re-implemented to support HTML captionsreusable sponsor blocks added to structure/theming; single-card rotators added to Drupal; homepage complete; Piction standing migration for collection online re-implemented, refined; mobile site design fleshed out; re-implementation begins; SEO implementation plan drafted; Drupal SEO modules identified

Table 5: Sitecore-to-Drupal Migration Timeline


Cite as:
J. Alexander and N. Krause, Migrating a Complex Museum Website from a Commercial CMS to Drupal. In Museums and the Web 2013, N. Proctor & R. Cherry (eds). Silver Spring, MD: Museums and the Web. Published April 4, 2013. Consulted .
http://mw2013.museumsandtheweb.com/paper/migrating-a-complex-museum-website-from-a-commercial-cms-to-drupal/


Leave a Reply