Phish

Phish

Content migration from Drupal to WordPress featuring rich media content, custom admin tools and a new responsive design that is blazing fast on mobile and tablet.

phish-home

The team at Phish.com had built years and years of content around tours dating back to the early ’80s including tour dates, news, photos, videos, songs, releases, and so forth; trapped in a Drupal CMS system to be migrated onto the WordPress platform.

This move to WordPress was also timed with a site redesign which was intended to work beautifully across all devices redesign (desktop, tablet, mobile) showcasing a few new features to wow the crowd.

Upfront Investment

We spent the time up front thinking through the business processes, confirming with client, matching against real data, which turns out to have been well spent time and super helpful in identifying requirements.

This planning effort allowed us to identify and define vocabulary (“album” vs “release”) and saved time down the line (in rework or redoing) since we were all on the same page from the beginning. Documentation from client and the existing site content architecture didn’t necessarily cover all of the situations we discovered – this is pretty common.

phish-arch

We used Google Docs to create easy to understand diagrams, provide a written dev plan/description/inventory for architecture and content migration, and held phone calls to walk through these with the client. We have a strong bias towards generating artifacts (architecture diagrams, detailed content inventory notes, migration test results, etc.) from our “non-development” work. It is often much easier to show than it is to tell.

Years and Years and Years of Awesome Content

We built a new base structure to migrate the content into, then began the process of bringing over years of legacy data.

The previous site was built on Drupal 6 using CCK. There was also data from a legacy Drupal build that we had to watch for during migration (fields and columns in multiple places). We worked with the Phish team to identify all of the content and associated meta, then we built a custom importer that handled the site’s specific content structure.

phish-mobile

With all this content (loads and loads of content!) there were some data inconsistencies and single edge cases that needed special considerations and graceful handling. This is really common, especially with content that has been generated over many years by many different people. Making sure that we handle these edge situations gracefully is something we are always attuned to.

Additionally the client was able to collect tour data from 1994 and 1995 and provide us with this in CSV format. Using a custom CSV importer we were able to include these tours right with the others.

Tools for the Job

To manage the content we built an intuitive administration interface for both editing existing content and for adding new stuff. Using the Post 2 Posts plugin with a few modifications, we were able to create the necessary post relationships without having to create and work with a ton of taxonomies (we were able to associate a song to a tour date from the tour date administration screen).

The homepage is updated often and is heavily curated for the band’s audience. We wanted to make sure it was super easy to manage. Listening to the needs of the client we created a custom post type to deliver a top banner image, used to announce the next upcoming tour. The top 3 widgets employ a FavePersonal style ‘sticky’ selector which uses the jQuery masonry “stamped” approach. Additional content is created specifically for the homepage using posts and customized post formats. A radio selector is used to determine the desired size (small or wide). And all news posts flow in around the rest of the content, filling in the site without any additional management.

Music + Data = Joy

phish-from-the-road

Every Phish performance is different and the band does not go into a concert with a predetermined setlist. Instead the setlist is the outcome of a jam session captured and entered ‘from the road’ via a custom setlist editor tool; designed to specifically for mobile entry.

This custom setlist editor uses a mobile friendly admin screen that is tied to the current tour date set to be ‘from the road’. From this screen you can enter a song title (or part of a title), then select from existing songs that populate below the entry or creates a new song. If you are feeling social, you can also tweet the song to an associated Twitter account.

All of this is captured as related content for a tour date. When LivePhish provides purchasing options for each of these tracks or for the entire show, the associated MP3 samples and purchase links are automatically added to this setlist.

Make it Pretty!

With the backend administration tools in place, we were free to focus on the end-user presentation for the site. The new design (as directed and provided by PROD) was applied to a responsive grid and implemented leveraging Carrington Core. This made it easy to layout the various (numerous) custom designed page templates.

phish-news

Many of these page templates (home, media, news, band details, release listing) use jQuery masonry to organically arrange the content on the page. Since masonry requires that all images be loaded to calculate height and form the arrangement, we created a custom lazy loading plugin to get image sizes in place and allow for the content to flow into the page smoothly and efficiently while keeping the initial page load time nice and speedy. Fancy presentation is no good if it causes your site visitors to wait for them.

The Phish.com site includes high quality images and video which are displayed at large sizes. All media is loaded into a fullscreen “take-over” with thumbnails and captions in a slideshow presentation (when there is more than one image or video, say, in a gallery from a tour). This gallery design is fully responsive and adapts to the device size, so you can appreciate the creative at the fullest scale available to you. And since the gallery interface uses a full screen take-over interface, the user never loses their place in their visit when they close out of the gallery.

Users can even participate in a live community discussion around the current tour date using either their social media account of choice. The ‘From the Road’ page leverages the Social plugin enabling outside users to login, using either their Twitter or Facebook account, and post their thoughts and experiences specific to the most current magical show. Then the slate is wiped clean, and the discussion board is fresh for the next tour date. Much like a sand painting, a beautiful thing designed for the momentary enjoyment.

Just Getting Started, Again

With a solid content architecture, a number of custom administration tools, along with an ‘easy-to-use’ frontend interface we now have a Phish.com that is in tune with the band’s highly engaged community. Going forward this site is designed to be easy to maintain while utilizing a system that can scale to meet the demand and still perform nice and f-f-f-fast.

Phish is a band that knows their audience well and cares deeply about the digital experience they provide to that audience. We were privileged to be a small part of bringing their vision to life.

Contact Us About Your Project

We love the opportunity to work with interesting teams on challenging projects. Our expertise in websites, web applications, WordPress and general best practices makes us a great partner for whatever you're looking to build.

Our team of professionals includes designers, developers and experienced project sherpas. Not only will the technical result be high-quality, but we will be your trusted guide throughout the process.

Get in Touch

Explore Other Case Studies